In this article, we will take a look at the most important site speed optimization techniques.
NitroPack applies some of the methods mentioned below to optimize more than 74 000 sites worldwide.
There are three crucial stages that need to happen quickly in order for a web page to load fast:
You’ll learn more about each of them in a bit.
In this article, I’ve grouped the optimization techniques based on the stage they improve. The goal is to give you a better framework for thinking about page speed rather than just a list of techniques.
However, it’s essential to understand that all of the optimization methods are connected. In other words, regardless of the stage a certain technique is put in, it will positively affect the other two as well.
Time to First Byte (TTFB) is the amount of time it takes for the client to receive the first byte of data from the server. Or in other words, how long it takes from the moment a user enters a URL in the address bar to the moment the server returns data.
During this stage, the server's response time (SRT) plays a big role. If the server has to execute too much code for complex tasks like preparing dynamic content and making lots of database calls, its response time takes a hit.
Physical distance and internet connection speeds also affect this stage.
According to Google, a good response time is under 200ms.
Here are some techniques to reduce SRT and Time to First Byte:
1. Good Hosting
Make sure to find a hosting provider that can satisfy your website’s needs.
To achieve low serve response time, you will need to build your infrastructure on high-quality servers. Free, cheap, or shared web hosting with no support will only contribute to slower response times.
Fortunately, many Managed Service Providers offer top-notch hosting solutions. You can pick from a number of dedicated services, such as Cloud Hosting, Virtual Private Servers, Dedicated Servers, Collocation, etc.
Whatever you decide, make sure to choose a hosting service that has excellent performance, high availability, security, and top-notch support.
Caching ensures fast content delivery to your visitors.
Simply put, caching is the process of storing a copy of your website files in a place called a web cache.
Without caching, every time, the browser needs to request the website’s assets (HTML, CSS, JS) from your origin server instead of accessing them from a local or intermediary cache. The lack of caching might result in slower response times as servers have a limit on the number of requests they can handle.
On the other hand, caching your website’s content will lead to reduced response time, bandwidth usage, and downtime.
There are different types of caching, one of which is browser caching.
In some cases, browsers can store static assets on the users’ hard drives. So, the next time a user decides to visit your website, the content will be served from the browser’s cache instead of your origin server. As a result, your website will load way faster.
Another type of caching is provided by Content Delivery Networks (CDNs).
3. Using a CDN
CDNs are another great way to reduce your server response time.
A CDN consists of a number of caching servers distributed in different locations all around the world.
In other words, instead of having a single point of presence (your origin server), you can have multiple caching servers placed in different locations near your visitors.
A CDN’s main job is to shorten the physical distance between the visitors and your origin server. By doing so, it attacks the issue of network latency which occurs when thousands of miles separate the user and the origin server.
Here’s how the process of requesting content would look like without a CDN:
And here it is with a CDN:
Put simply, CDNs are a must if your site serves content to users all over the world.
Page load time refers to the amount of time it takes for the web page to display its content.
It’s a critical stage in page speed optimization, as it gives visual feedback to the users that something is happening behind the scenes.
Or, to put it another way - it’s proof that your website is responsive.
When it comes to measuring it, there are various metrics for capturing different page load aspects:
Serving that first piece of content instantly is a really powerful way to impact the user experience positively. This way, you will visually convince your visitors that everything on your website is happening immediately.
To improve the perceived performance and, most importantly - achieve fast render time, you have to make your website’s resources as light as possible.
And here are the optimization techniques that can help you:
1. Image Optimization
Images are often the biggest reason for a slow website load time.
About 50% of all bytes on the average page are image bytes. Without image optimization, half of the average website is unoptimized.
The entire image optimization process includes a collection of different techniques which improve all load metrics.
Let’s take a look at them:
Image compression refers to the process of applying different algorithms to group or remove parts of an image to make it smaller.
There are two types of image compression:
Lossy compression is a compression in which some of the data from the original file is lost. It significantly reduces file size (it will be rendered faster), but it also means that you will serve lower-quality images. JPEG and GIF are examples of lossy image types.
Lossless compression maintains roughly the same image quality. Usually, this is done by removing unnecessary metadata from the files. While you are going to serve high-quality images, they will be of a larger size. RAW, BMP, and PNG are all lossless image formats.
Lazy loading (deferring) of images refers to loading only the images that users are currently looking at.
In other words, if the user doesn’t scroll to an image, it’s never loaded.
But how does this improve your render time?
Well, before a browser starts rendering, it requests all the images on the page, regardless of them being visible immediately or not. As you already know, images are some of the heaviest resources, so requesting all of them increases load time.
The most important images are the ones immediately visible (above the fold) to visitors. By lazy loading all other images, we ensure only the critical images are processed at the start. This massively reduces initial page load time.
And here how it works:
As you can see, below the fold images are loaded right before the user scrolls to them, resulting in loading only 548KB (instead of 2.2MB) on initial load.
Serving images in next-gen formats is one of the most common suggestions in Google’s PageSpeed Insights:
In case you aren’t familiar with the modern formats, I am talking about JPEG 2000, JPEG XR, AVIF, and WebP.
What makes them different from the well-known formats like JPEG, PNG, and GIF is that they have better compression and quality characteristics.
Simply put, they combine the best of both worlds - they’re lighter while still keeping a comparable quality level to the older formats.
Currently, WebP is the only modern format that has enough browser support to be viable for most users.
Preloading images, especially hero images, is a great way to help browsers discover and load specific visual assets with priority.
One way to do it is by putting a link rel=preload in the HTML code of your website.
It looks like this:
Preloading can drastically improve LCP as well as actual and perceived performance.
2. Remove Render-Blocking Resources
If you’ve ever run your website through Google PageSpeed Insights, you’ve probably seen the “eliminate render-blocking resources” recommendation:
To understand render-blocking resources, we need to briefly summarize how web browsers render sites.
When a visitor tries to access your website, their browser requests its resources (i.e., HTML, CSS, JS) and starts going through the code from top to bottom.
Throughout the process, the browser encounters CSS and JS files that it needs to download, parse, and execute before proceeding with anything else. In other words, the entire rendering process is “blocked” until those resources are fully processed.
So, instead of prioritizing above the fold content that is immediately visible to the user, the browser can waste time working on non-critical resources (below the fold).
All of that results in a slower load time, negatively affecting the user experience and perceived performance.
When referring to render-blocking resources, Google is talking about:
However, some CSS and JS files are critical for your website, so you need to prioritize their execution. One way to do that is by implementing Critical CSS.
Critical CSS is the CSS applied to above the fold elements. Put simply, it’s the CSS responsible for the content that’s immediately visible when a user loads your website.
To speed up your website’s render time, you need to find the minimum set of blocking CSS, or the critical CSS, needed for your page to appear to the users.
In other words, you have to focus only on the minimum amount of CSS required to render the top portion of the page across all breakpoints. You don’t need to worry about the remainder of the CSS, as you can load it asynchronously.
For a better understanding, we need to differentiate between external CSS and inline CSS.
External CSS is located in a separate file called stylesheet. You can link to this file in the tag of your HTML code. Although it’s easier to maintain and work with, it slows down the rendering process. That’s because the browser needs to locate and download the entire file before it can continue rendering.
On the other hand, inline CSS is placed in the head tag of the HTML file in a style tag instead of in an external stylesheet.
Inlining Critical CSS is beneficial because the browser doesn’t have to look for it in a separate location.
As a result, you serve the critical content faster (making your visitors happy), and your external CSS file will become lighter and load asynchronously.
If you want to learn more about critical CSS, check out our article - Critical CSS: How To Boost Your Website’s Speed And UX.
Unfortunately, Critical CSS isn’t set up by default, so you either have to do it manually or use a plugin (NitroPack can help with that).
Another common recommendation by Google’s PageSpeed Insights is to reduce unused CSS:
Unused CSS rules are the ones that are not used in styling the page a visitor is currently looking at.
In other words, if your visitor is on the home page, they don’t need the CSS that styles the About Us page and vice versa. But because the rules are in a global stylesheet (external CSS), the browser processes them, regardless if they contribute anything to the specific page.
Again, you can either improve this aspect of your website manually or use a plugin.
NitroPack offers a RUCSS feature that automatically finds and reduces these unnecessary CSS rules. As a result, visitors’ browsers will render your content faster.
All we’ve been talking about until now is how to optimize your website in order for your content to appear faster on users’ screens.
But it’s also important for a page to become interactive quickly once its content is visualized.
This leads us to stage #3 - Optimizing Page Interactivity
An important metric to follow here is First Input Delay (FID).
FID measures the delay between a user’s first interaction and the moment the browser can respond. To be honest, it’s a tricky metric to measure, as it requires real user input (field data).
However, FID is important for understanding the user experience on your site, and it’s part of Google’s Core Web Vitals, so keep an eye on it.
Two other metrics that can give some feedback about your page interactivity are Time to Interactive and Total Blocking Time.
Time to Interactive (TTI) measures the time it takes for a page to become fully interactive after a user arrives on it.
According to Google, three things need to happen for a page to be considered fully interactive:
Total Blocking Time measures the amount of time during which these Long Tasks block the main thread and affect the usability of a page. In other words, It shows how unresponsive a page is before it becomes fully interactive.
Two words that may have caught your attention are “main thread.”
It won’t be too far-fetched to say that the Main Thread is the big deal when it comes to web performance. The truth is that the browser relies on it for a ton of things.
And when I say a ton, I really mean it.
The main thread handles most of a website’s code:
The main thread also processes user events.
So, any time the main thread is busy doing something else (of the tasks mentioned above), your web page may not respond to user interactions immediately, resulting in a bad experience.
The problem with Long Tasks is that once a task is started, the browser cannot interrupt it. As a result, an extended JS function can block the thread entirely, regardless of what the function is responsible for.
When this happens, the page becomes unresponsive, and the user has to wait until the Long Task is fully completed.
Here’s how you can improve your page interactivity:
Congrats on reaching the end of this article!
We’ve covered a lot of things and you probably realized that site speed optimization is a comprehensive task that requires specific skills and expertise.
We’ve come to that realization as well, and that’s why we created NitroPack!
NitroPack is an all-in-one site speed solution that takes care of your website’s optimization. The great thing is that it will take you no more than 5 minutes to set up NitroPack. Then, we will take it from there.
You don’t have to do anything manually. NitroPack takes care of your site’s speed optimization by applying all kinds of different techniques (some of them were mentioned in the article):
You can test NitroPack for free and see for yourself how fast and easy it is to optimize your website’s speed.