How Page Speed Affects Your Conversion Rates
Last updated on Aug 28th, 2024 | 14 min
Special Black Friday Offer 
Get NitroPack with up to 37% OFF
Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
1 Mississippi. 2 Mississippi. 3 Mississippi.
Three seconds – that’s how long your visitors are usually willing to wait before bouncing off your website.
And as harsh as it may sound, It doesn’t matter if you have the best ads, landing pages, or products. The truth is:
If your site does not load fast enough, prospects will leave before seeing your offer.
So, it’s safe to say that page speed has a massive impact on your conversion rates. And there’s data to prove it.
Read on.
For one of our joint webinars with Google, we researched the role of page speed in user experience.
After monitoring 245,433 unique site visits, it turned out that:
Put simply, after attracting visitors to your website, the second critical task is to make them stay and browse. And offering them a seamless user experience will keep them around and push them further down the funnel.
And speaking of moving them along the funnel, in a collaborative study with Google, Deloitte found that a mere 0.1s improvement in load time can influence every step of the user journey:
The accompanying percentages beside each stage represent the increase (or decrease) in progression along the funnel based on all four speed metrics (TTFB, FCP, INP, Fully loaded), improving their speed by 0.1s.
In terms of conversation rate improvement, they found that the same 0.1s faster load time led to some spectacular results in the three industries they analyzed:
The results simply cement the notion that:
The competitive gap will widen between brands that provide great user experience and those who don’t.
Here are a couple of examples of companies that decided to invest in better performance, and it paid off big time:
Rakuten 24 prioritized optimizing their Core Web Vitals (LCP, FID*, CLS) to enhance overall web performance and user experience. Additionally, they aimed to demonstrate the link between Core Web Vitals and conversions.
*Note: First Input Delay has been replaced by Interaction to Next Paint (INP) as a Core Web Vitals metric as of March 12, 2024.
These optimizations led to:
redBus focused on optimizing their website's INP to improve user experience and performance.
As a result, they saw a 7% increase in sales, illustrating the positive impact of smoother web interactions on business outcomes.
After struggling for a while with failed Core Web Vitals, subpar loading speed, large images, and media, and slow JavaScript execution time, OfficeRnD turned to NitroPack for complete web performance optimization.
In less than two months with NitroPack, OfficeRnD hit all major milestones in web performance they had set from the start:
It would have been great if “page speed” was a single metric, but the reality is that you need to track multiple performance metrics. And it seems like every new speed testing tool comes up with its own set of KPIs you need to consider.
The good news is:
You can apply the “80/20” rule, where 20% of all metrics bring 80% of the value to your company.
But before focusing on the most impactful ones, let’s examine the other 80% of metrics and why it is a common mistake to spend all your efforts optimizing them.
Page speed score, performance score, performance grade, or whatever the tool you’re using is calling it, is a metric that should not be your north star.
Why?
Because it’s based on lab data. Not that it’s a bad thing, but…
Lab data is collected in a controlled, simulated environment, typically using tools that run on a developer's machine. Tests are run in a consistent and repeatable setup, ensuring that external factors like network variability do not affect the results.
As Google’s Philip Walton says:
In other words, if you identify an issue with your website and want to debug it, your lab-based score is the place to look for immediate feedback.
However, you should know that your 100/100 performance score or “A” grade does not translate into a great user experience. You can ace all performance testers, and visitors may still bounce.
This means that your lab-based score does not have a direct impact on your conversion rates and other business metrics.
Nevertheless, reaching a perfect page speed score is a great foundation for optimizing the metrics that truly matter…
Google’s Core Web Vitals are a set of three performance metrics based on real-world data that measure your site’s loading speed (LCP), responsiveness (INP), and visual stability (CLS).
Before digging into each metric, you may be asking yourself:
What on earth is real-world data?
Real-world data is, in fact, field data collected by monitoring all users who visit a page and measuring their experience. The data takes into account each user's real-world conditions, reflecting their actual devices, network conditions, and geographic locations.
The key aspect to understand about field data is that it’s not a single number, similar to the page speed score. It’s a distribution of numbers. Since each user has a unique set of conditions, some may experience fast loading times while others may encounter slower performance. Field data encompasses the entire range of performance data collected from all users visiting your site.
Now, returning to the Core Web Vitals, these three metrics measure key aspects of user experience:
1. Largest Contentful Paint (LCP) measures how long it takes for the largest above-the-fold element to load on a page.
2. Interaction to Next Paint (INP) measures the time from an interaction (for example, a user clicking on “Add to cart”) until the browser is able to update the screen (changing the Cart icon that the item has been added).
3. Cumulative Layout Shift (CLS) calculates a webpage's visual stability during the loading process. It quantifies the number of unexpected layout shifts that occur as the page loads and is crucial for assessing the user experience.
Being based on field data, you need to guarantee 75% of your page visits fall under the “good” threshold to pass Core Web Vitals:
Here’s what “good” means for each metric:
1. PageSpeed Insights (PSI)
PageSpeed Insights was, is, and most probably will continue to be (considering it’s Google’s) the go-to web performance tool for all website owners, webmasters, and developers. It offers insights into both lab data and field data, so you can simultaneously measure real user experience and debug any performance issues you might have.
And speaking of debugging, PSI’s Opportunity and Diagnostics are a great place to start since they provide you with a list of warnings you need to fix.
Struggling to understand your PSI report?
Check out our guide on understanding PSI and get the most out of Google’s tool.
2. GTmetrix
GTmetrix is another popular page speed testing tool that is preferred by many due to its additional features like:
⚠️ Good to know:
GTmetrix primarily uses lab data for its performance analysis.
3. Lighthouse
If you want to fix some lab-based issues but don’t want to run PSI or GTmetrix tests constantly, you can do it locally, using Lighthouse inside your Chrome browser. Lighthouse is an open-source, automated tool developed by Google.
To start Lighthouse:
You might be surprised that the Lighthouse and PSI’s reports are similar. That’s because PageSpeed Insights collects lab data from Lighthouse.
Having a website without a solid caching strategy in place is like not installing an SSL certificate or neglecting your mobile version. It’s unthinkable.
Caching is one of the most effective yet straightforward ways to improve your website’s speed and overall performance. In a nutshell:
Caching works by storing copies of your site’s files in a temporary storage location, which can be quickly accessed when a user visits your site. This reduces the need for the server to process requests and deliver content every time, which in turn speeds up page load times.
There are two main types of caching you can implement:
Server-side caching involves storing content on a web proxy (server) that stays between your origin and your visitor. This type of caching reduces the load on your server and speeds up the delivery of content to users. You can easily enable server-side caching by using a caching plugin or ask your hosting provider to set it up for you.
Browser caching, on the other hand, instructs the user’s browser to store certain files (like images, CSS, and JavaScript) locally for a specified period. This way, when a user revisits your site, the browser can load these files from the local cache instead of downloading them again from the server.
To enable browser caching, you can also use plugins like NitroPack or manually adjust your .htaccess file to set cache expiration dates for different types of files.
Images often make up a significant portion of a webpage’s load time, so addressing this area can lead to substantial improvements. In fact, according to the Web Almanac, images are the biggest contributors to page weight at 1,026 KB for desktop pages and 811 KB for mobile:
That being said, optimizing your site’s image can lead to a massive performance boost.
But what exactly does image optimization include?
Well, there are several fundamental techniques you need to consider:
1. Use next-gen image formats
Next-gen image formats like WebP and AVIF offer better compression rates than traditional formats like JPEG and PNG without sacrificing quality. This means you can keep serving high-quality images without the performance implications.
You can convert your images to WebP or AVIF using free online tools and then manually re-upload them. For WordPress users, plugins like Imagify and NitroPack automatically convert and serve your images in these formats.
2. Implement Image Compression
Image compression reduces the file size of your images while maintaining an acceptable level of quality. This can involve removing unnecessary data from the image file or reducing the image's resolution.
There are numerous tools available for image compression. For manual compression, you can use tools like TinyPNG. If you’re using WordPress, NitroPack can take care of this automatically.
3. Enable Lazy Loading
Lazy loading is a technique in which images are loaded only as they come into the viewport rather than all at once when the page initially loads. This means that images further down the page are loaded only when the user scrolls down to view them.
This massively reduces initial page load time, improves performance on long-scrolling pages, and saves bandwidth for both the server and the user.
To implement lazy loading, you can install a plugin or use JavaScript libraries like LazyLoad to add the loading="lazy" attribute to your img tags in HTML.
Render-blocking resources are files that a browser must fully download and process before it can render a web page’s content. Typically, these resources include CSS and JavaScript files that are essential for the visual and interactive elements of your site.
This delay can cause your site to load more slowly, particularly on mobile devices or slower networks.
Here are three ways to deal with render-blocking resources:
1. Asynchronous Loading of JavaScript
One of the most effective ways to eliminate render-blocking JavaScript is by loading it asynchronously. This means the JavaScript files load in the background while the rest of the page continues to render. You can implement this by adding the async or defer attribute to your script tags. The async attribute loads the script as soon as it is available, while defer loads it after the HTML parsing is complete.
2. Inline Critical CSS
Critical CSS refers to the minimal CSS required to render the above-the-fold content of your page. By inlining this critical CSS directly in the HTML document, you can ensure that the most important styles are loaded first, allowing the page to render quickly. The rest of the CSS can be loaded asynchronously.
You can use online tools to generate critical CSS, then manually inline it in the head of your HTML. Or rely on an automatic plugin like NitroPack.
3. Use Plugins for Automation
For WordPress users, plugins like NitroPack can automatically optimize and defer the loading of CSS and JavaScript files, making it easier to manage render-blocking resources without manual coding.
Minifying your code involves reducing the size of your HTML, CSS, and JavaScript files by removing unnecessary characters such as spaces, line breaks, and comments.
This automatically leads to your code being loaded faster since it requires less data to be transferred from the server to the user's browser.
There are tons of online tools that require you to simply paste your files and then update your site’s code.
We’ve already mentioned how important it is for your site’s most critical (above-the-fold) content to load fast. You can speed up the process by preloading specific resources.
Preloading is a technique that allows you to instruct the browser to prioritize loading certain resources early in the page load process. Using the link rel="preload" attribute, you can tell the browser to fetch critical assets even before they are requested in the usual sequence of HTML parsing.
To implement preloading, you can add a link tag in the head section of your HTML document, specifying the resource you want to preload and the type of content it is.
Here’s an example of how to preload fonts:
A Content Delivery Network (CDN) consists of a number of geographically distributed servers at various points of presence (PoP) around the world. A CDN’s main job is to shorten the physical distance between a user and the web server, resulting in faster load times, increased server uptime, reduced bandwidth usage, improved security, and better website performance.
Your hosting provider probably offers a CDN service, so the easiest way to leverage this performance technique is to contact them directly and ask them to enable it on your website.
If they don’t, there are plenty of CDN providers, such as Cloudflare, Akamai, KeyCDN, and Amazon CloudFront. Find the offer that best suits your needs and set up your CDN.
This one is a more specific technique, but it will have a huge impact on your Cumulative Layout Shift score, Core Web Vitals, and overall experience.
If you’re showing ads on your website, then you should definitely reserve enough space for them. Otherwise your visitors may experience unexpected layout shifts, which, as you already know, is detrimental to the user experience.
Here’s how you can gain control over how ads are displayed:
Font files can be surprisingly large, especially when they include thousands of characters and glyphs your site may never use. They are also considered a render-blocking resource, meaning the larger the file, the longer it will take the browser to process it.
However, there’s a way to serve your fonts without affecting the user experience.
Enter font subsetting.
Font subsetting includes removing any unused glyphs from the font file, thus minimizing its size and speeding up the download and rendering process.
This leads to massive benefits like:
When it comes to removing unused glyphs from font files, you have two options;
We all know the feeling of installing a new plugin that promises to fix all our issues. As exciting as that might be, you shouldn’t forget that each new piece of software you get adds extra code to your website.
Extra code means increased HTTP requests, slower load times, and even security vulnerabilities. So, it’s essential to strike the right balance between number of plugins used and performance.
But how can you do that?
What do you imagine when you hear “the best web performance optimization tool”?
Perhaps:
Enter NitroPack.
NitroPack is the leading all-in-one web performance optimization solution that allows everyone to have a fast website.
Trusted by more than 200,000 businesses globally, NitroPack includes 60+ advanced performance features like:
And you will love to know that everything is applied automatically to your website after a quick installation.
Now, you may be thinking:
It sounds too good to be true. There must be a catch. Perhaps it’s too expensive.
You can start with NitroPack for $0.00.
Yes, we offer a free subscription with enough features to experience how powerful NitroPack truly is.
In a nutshell:
There’s much to gain and absolutely nothing to lose.
While there’s no such thing as “ideal page speed,” numerous studies have concluded that users prefer browsing websites that load within 3 seconds.
Yes, improving your Core Web Vitals can lead to a measurable increase in conversions. In fact, there are public case studies that proved the correlation between good LCP, INP, and CLS scores lead to a massive increase in business metrics like sales, average order value, revenue per visitor, and more.
Page speed has a direct impact on conversion rates because faster-loading pages provide a better user experience. Visitors are more likely to abandon a slow site, which increases bounce rates and decreases the likelihood of completing a purchase or other desired actions. By optimizing page speed, you can reduce friction for users, leading to higher engagement and improved conversion rates.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.