How to Improve Page Load Speed (2024 Guide)

In this article, we will take a look at the most important site speed optimization techniques. 

In fact:

NitroPack applies some of the methods mentioned below to optimize more than 200,000 sites worldwide.

Let’s begin! 

Achieve a 90+ PSI score with a click of a button. See your site with NitroPack!

How to Improve Each Aspect of Page Speed
 

There are three crucial stages that need to happen quickly in order for a web page to load fast:

• Server Response Time/Time to First Byte
• Page Load Time
• Page Interactivity/Usability

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 at which a certain technique is applied, it will positively affect the other two as well. 

Stage #1: Improving Server Response Time and Time to First Byte

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. 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.

2. Caching

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 user’s hard drive. 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 what 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.

Stage #2: Speeding up Page Load Time

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:

• First Paint is the first point at which the browser does any sort of rendering. Again, it doesn’t have to be a text or an image. It could be a background color or some pixels. Basically, anything that is visually different from the prior screen. 
   
• First Contentful Paint (FCP) measures how quickly users can see actual content (a text, an image, a logo, etc.). According to Google, a good benchmark is under 2 seconds. Ideally, both First Paint and First Contentful Paint should happen at the same time.
   
• Largest Contentful Paint (LCP) - If FCP tracks the beginning of the loading experience, then LCP tracks its culmination. Largest Contentful Paint is a metric that measures the render time of the largest above the fold content element. Items that appear after a user taps the screen or scrolls down don't affect this metric. A good LCP score is anything below 2.5 seconds.

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.

Reducing the number of bytes (code, images, JavaScript, CSS) that the browser needs to process will lead to faster rendering. You also need to help the browser prioritize critical resources over non-critical ones.

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.

Here’s why:

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 that improve all load metrics.

Let’s take a look at them:
 

• Image Compression

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.

There are a lot of great image compression tools, such as Optimizilla and imagemin.

 

• Image Lazy Loading 

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 is 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 the initial load.

 

• Using Next-Gen Image Formats

Serving images in next-gen formats is one of the most common suggestions in Google’s PageSpeed Insights:

If you aren’t familiar with modern formats, I will talk 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 maintaining 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

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:

• CSS 
• JavaScript

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

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.

In short:

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).

 

• Reduce Unused CSS

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.

Good to know: If you're running an eCommerce business, keep in mind that some eCommerce platforms invest in web performance more than others. Refer to the 10+ Best Ecommerce Platforms 2024 guide to explore which platform can offer you the best site performance right off the bat.

Stage #3: Optimizing Page Interactivity/Usability

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 Interaction to Next Paint (INP) (replaced First Input Delay (FID) officially on March 12, 2024)

INP measures the longest time between a user's input and the browser response. To be honest, it’s a tricky metric to measure, as it requires real user input (field data). 

However, INP is important for understanding the user experience on your site, and it’s the latest responsiveness metric introduced by Google, aiming to provide a more comprehensive view of how well your website reacts to users' interactions.

Join the top 31% of websites that pass their Core Web Vitals! See your site with NitroPack

The other metric that can give some feedback about your page interactivity is Total Blocking Time.

According to Google, three things need to happen for a page to be considered fully interactive:

1. The page displays useful content - Earlier, we mentioned the First Contentful Paint (FCP). It measures when a page starts displaying actual content. Interactivity is reached only after FCP. The gap between these two should be as small as possible.
2. Event handlers are registered for most visible page elements - Event handlers are scripts that are automatically executed once an event occurs. For instance, a user clicking on a button is considered an event. Your website’s event handlers respond to this event by producing the required results.
3. The page responds to user interactions within 50 milliseconds - In order to provide an excellent user experience, the transition from a user clicking a button to your page responding to it should be seamless.

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 a 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: 

• It parses the HTML and builds the DOM;
• Parses the CSS and applies the specified styles;
• Parses, evaluates, and executes the JavaScript.

 

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:

• Code Splitting means dividing your code into specific bundles or components, which can then be loaded synchronously or asynchronously. This allows your website to send only the code that your visitors need at the very beginning instead of overloading the browser’s Main Thread with all the JS at once;
   
• Minification and compression. These techniques reduce code file size. Minification means removing unnecessary parts like whitespace and comments from the code. And code compression means applying algorithms to rewrite the files’ binary code, using fewer bits than the original. Both are really low-effort, high-reward optimizations. Even if you don’t have a problem with your website’s JS, you would still benefit from applying them;
   
• Delay or remove non-critical third-party scripts. Third-party scripts can sometimes prevent your own scripts from executing on time. Prioritize the scripts that provide the most value to the user and delay the rest. In most cases, ad and pop-up scripts aren’t at the top of the list;
   
• Preload Critical Assets. We’ve already talked about image preloading. Well, you can preload other critical assets as well by adding the link rel="preload" element;
   
• Use web workers. Web workers allow you to run scripts in the background without affecting the Main Thread. 

 

NitroPack - The All-In-One Site Speed Solution

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):

• Caching and a built-in CDN;
• Image compression and WebP Conversion;
• Advanced lazy loading (including background images defined in the CSS);
• HTML, CSS, and JS minification & compression;
• Critical CSS, DNS prefetching, preloading, and more.

You can test NitroPack for free and see for yourself how fast and easy it is to optimize your website’s speed.