TL;DR: A collaborative research with Google showed that a mere 0.1s improvement in load time can lead to a 10.1% increase in conversions in the travel industry, an 8.4% increase in eCommerce, and a 3.6% increase in the luxury sector. To set up your business for performance and financial success, you must focus on your Core Web Vitals—Google's three metrics that measure loading speed, interactivity, and visual stability. They are critical for improving user experience and boosting your conversion rates.
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.
How Does Page Speed Affect Conversion?
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:
- Users who experienced a load time of 3 seconds or less visited 60% more pages.
- 50% more visitors drop off when a page loads in 3 seconds compared to a 2-second page load time.
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:
- Ecommerce: An increase of 8.4% in conversions and 9.2% in average order value (AOV).
- Travel: An increase of 10.1% in conversions and 1.9% in AOV.
- Luxury: An increase of 3.6% in conversions and 40.1% in users from product page to add to basket.
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:
1. Rakuten 24 increased conversion rate by 33.13%
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:
- 53.37% increase in revenue per visitor
- 33.13% increase in conversion rate
- 15.20% increase in average order value
- 9.99% increase in average time spent
- 35.12% reduction in exit rate
2. redBus increased sales by 7%
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.
3. OfficeRnD increased their overall conversion rate by 10%
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:
- 10% increase in overall website conversion rate
- 12.5% conversion rate boost for key product page
- Passed Core Web Vitals
What Page Speed Metrics to Measure to Improve Conversions
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.
The Truth About Your PageSpeed Score
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:
“The purpose of a lab test is to control for as many factors as you can, so the results are (as much as possible) consistent and reproducible from run to run.”
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…
Focus on Your Core Web Vitals
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:
- LCP: Less than 2.5 seconds.
- INP: Below or at 200 milliseconds
- CLS: Score of 0.1 or less
3 Tools to Measure Page Speed
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.
2. GTmetrix
GTmetrix is another popular page speed testing tool that is preferred by many due to its additional features like:
- Structure - The tab where you will find a list of specific issues affecting your site's performance.
- Waterfall chart - It displays all individual requests on your web page.
- Video - It automatically records an embeddable video showing how a page loads for each performance test. (paid feature)
- History - It includes all your past performance tests.
⚠️ 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:
- Open Chrome and navigate to the web page you want to audit.
- Press F12 to open DevTools, or right-click the page and select "Inspect."
- Click on the "Lighthouse" tab.
- Choose the categories you want to audit (Performance, Accessibility, etc.).
- Click "Generate report" to run the audit.
You might be surprised that the Lighthouse and PSI’s reports are similar. That’s because PageSpeed Insights collects lab data from Lighthouse.
How to Improve Your Page Speed (9 Proven Techniques)
1. Implement caching
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
- browser caching
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.
2. Optimize your images
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.
3. Remove render-blocking resources
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.
4. Minify your code
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.
5. Preload critical content
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:
6. Use Content Delivery Network (CDN)
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.
7. Reserve enough space for ads
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:
- Place late-loading dynamic content lower in the viewport so you have more options for reserving space for it.
- Use ad placeholders with fixed dimensions to reserve space for ads before they render to prevent shifts; if you’re expecting small and bigger ads to be returned, style a larger ad container or choose the most likely size for the ad slot based on previous data.
- Reserve space for late-loading content by adding a min-height styling or by using the new aspect-ratio CSS property to allow the ad containers to grow as necessary while reducing the risk of layout shifts.
8. Subset your fonts
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:
- No more Flash of Unstyled Text (FOUT)
- Fewer network requests
- Better user experience and perceived performance
When it comes to removing unused glyphs from font files, you have two options;
- Download your fonts and manually remove unused characters
- Use an automated tool
9. Remove redundant third-party plugins
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?
- Always test your site’s performance before and after installing a plugin.
- Go for all-in-one solutions that could replace multiple plugins.
- Delete all unused plugins (simply deactivating them isn’t enough).
The Best Tool to Speed Up Your Website
What do you imagine when you hear “the best web performance optimization tool”?
Perhaps:
- An all-in-one solution so you don’t have to juggle a myriad of tools
- Free trial or free plan available so you can test before purchasing
- A plug-and-play plugin that takes care of everything automatically
- Easy to install and manage
- No code skills required
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:
- Advanced caching
- CDN
- Image optimization
- Font optimization
- Code optimization
- Lazy loading
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.
FAQs
What is the ideal page speed?
While there’s no such thing as “ideal page speed,” numerous studies have concluded that users prefer browsing websites that load within 3 seconds.
Can improving my Core Web Vitals lead to a measurable increase in conversions?
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.
How does page speed directly affect my conversion rate?
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.
