Google has gradually been increasing the importance of site speed as a ranking signal since mobile-first indexing was introduced in 2016. In their own words, “Speed equals revenue.”
When a page takes too long to load, visitors move on to another page to find answers quicker. Slow speed discourages visitors from staying on your site, irrespective of how they’ve found you (organic search, referral link, paid ads).
In addition to improving the user experience (UX) of your site, a fast site also improves overall SEO.
If your website is fast, you have a greater chance of ranking higher than slower sites with high bounce rates.
- Visitors are 106% more likely to bounce as page load time goes from one second to six seconds.
- A one-second delay in the loading speed of mobile sites can impact conversion rates by up to 20%.
A Backlinko study that analyzed 11.8 million Google search results found, quite surprisingly, that there was “no correlation between page loading speed and first page Google rankings.” It did explain that Google’s Speed Update affects only extremely slow pages and downranks them instead of benefiting fast pages.
However, the study found that the average page loading speed for results on the first page is 1.65 seconds.
Furthermore, a 2019 study by Portent found that sites should aim for a 0-2 seconds load time to improve transaction conversions.
Above all, Google has confirmed that page speed is a ranking factor for both mobile and desktop searches and recommends the use of PageSpeed Insights and Lighthouse to evaluate site performance.
So, improving your page speed should be a priority to enhance the user experience and boost search engine rankings.
How does PageSpeed Insights work?
PageSpeed Insights is a free performance evaluation tool that analyzes any URL and provides a score out of 100 for both its mobile and desktop versions. It also offers several recommendations for improvement and identifies opportunities for optimization.
The tool is powered by Lighthouse that provides lab data and field data.
- Field data is gathered from real-world performance data contained in the Chrome User Experience Report (CrUX) when visitors load your page. It identifies bottlenecks that prevent real visitors from converting on your page. It includes:
- First Contentful Paint (FCP) – time taken for the first text or image asset to load
- Largest Contentful Paint (LCP) – time taken for the largest text or image asset to load
- First Input Delay (FID) – time taken by the browser to respond to the visitor’s first interaction
- Cumulative Layout Shift (CLS) – measures any movement of the page in the viewport
- Lab data measures the speed of the webpage in a simulated, controlled environment like mobile networks and a mid-tier device. It’s a good way to detect performance issues and find solutions to fix them. It calculates FCP, LCP, CLS, and three more metrics:
- Speed Index (SI) – time taken for the content to visually appear during page loading
- Time to Interactive (TTI) – time taken for the page to become completely interactive
- Total Blocking Time (TBT) – total time of FCP and complete interactivity
Getting a 100/100 score isn’t a direct indicator of page speed. You can have a fast-loading website without achieving a perfect score.
Neither do visitors care about a perfect score. All they want is to view your content quickly. So it’s more important to focus on implementing the recommendations given by the tool.
The performance metric results used to calculate your score have different weightages.
This table gives the weights for lab data in Lighthouse 8:
| Performance metric | Weightage |
| FCP | 10% |
| SI | 10% |
| LCP | 25% |
| TTI | 10% |
| TBT | 30% |
| CLS | 15% |
Instead of these weightages, what you’re shown is an aggregate performance score and a color that denotes your score bucket:
- Red (poor): 0 – 49
- Orange (average): 50 – 89
- Green (good): 90 – 100
The tool provides detailed action items in the Opportunities section to help you improve your score.
How to improve your PageSpeed Insights score
Based on the recommendations offered by the PSI tool, here are 12 ways in which you can improve your performance score:
Avoid Post-Click Landing Page Redirects
Redirects are commonly used when you delete or move a page on your website.
They increase time-to-first-byte (TTFB), which is the amount of time taken between a request to the server and when the first byte of data is sent back to the requester. While there’s nothing inherently wrong with using redirects, excessive use causes delays in page loading.
Ensure you use redirects only when necessary to improve page loading speeds and improve overall SEO.
Minify CSS, HTML, and JavaScript
Minification refers to the process of eliminating or fixing unnecessary or duplicated data without affecting how a browser processes HTML. It involves removing unnecessary spaces, characters, and duplications.
Minifying CSS, HTML, and JavaScript reduces the size of these files and improves page loading speed.
Use plugins like WP Rocket, HTML Minify, or Autoptimize to automatically minify your code in WordPress.
Prioritize Above-the-Fold Content
Lazy loading involves prioritizing the loading of images that are immediately visible instead of making the browser load all the images on the page before displaying above-the-fold content. It reduces the amount of time taken to reach FCP and FMP.
By prioritizing above-the-fold content and deferring offscreen images, you can improve site performance. If you have implemented “infinite scrolling” as most content-heavy sites do, you must use lazy loading.
Use WordPress plugins like Lazy Load by WP Rocket and a3 Lazy Load. Autoptimize also has lazy loading features.
Speed Up Server Response Time
Server response time or TTFB is a measure of how long the browser is required to wait before it gets its first byte of data from the server. The longer this period is, the longer it takes for the page to load.
A low TTFB is not the same as a fast overall site speed, but a fast server response time improves site performance.
Methods to speed up server response times:
- Use a fast WordPress host – A quality WordPress-focused hosting provider has a carefully thought-out architecture and prioritizes speed.
- Implement a Content Delivery Network (CDN) – If you have a website that serves visitors around the world, using a CDN will significantly lower your TTFB.
- Use WordPress caching – Caching can decrease page load times as well as TTFB because it reduces server processing time. We recommend Pressable’s built in caching options.
- Select a premium Domain Name System (DNS) provider – Typically, with premium DNS providers, DNS lookup times are faster. However, Cloudflare is a free DNS provider that offers excellent performance.
Eliminate Render-Blocking Resources
Render-blocking resources are static files like JavaScript, CSS, HTML, and fonts that are crucial for the rendering of a webpage. The visitor’s browser is required to download and process these files before the rest of the page can be displayed.
Thus, having a lot of these files “above the fold” creates a bottleneck and slows down site speed.
There are two methods to remove render-blocking resources:
- Inlining – If your webpage does not have a lot of JavaScript or CSS, consider inlining them i.e. incorporating the JavaScript and/or CSS code into the HTML file. You can use a plugin like Autoptimize to inline your code if you use WordPress. Note that this method works only for very small sites. Most WordPress sites have enough JavaScript that this technique could be counterproductive.
- Async and Defer – For large websites, use the async and defer attributes to eliminate render-blocking. The defer attribute downloads the scripts during HTML parsing but executes it only after completion of parsing. It also executes them in order of appearance on the page. Scripts with the async attribute execute as soon as downloading is complete.
Minimize Main-Thread Work
The “main thread” is the chief element of a user’s browser that is tasked with changing code into a webpage that visitors can work with. It has two functions: it parses and executes JavaScript, HTML, and CSS and handles user interactions.
When the main thread is working on the site’s code, it cannot simultaneously handle user requests. Thus, if the main-thread work takes too long (>4 seconds), it leads to slow page loading speed and poor UX.
Methods to minimize main-thread work:
- Minify CSS, HTML, JavaScript – Use inlining or deferring to reduce file sizes.
- Remove unused code – Just like you minify code, consider inlining or deferring styles in whatever manner works for your webpage. Use tools like ChromeDevTools to find unused JavaScript and CSS code.
- Implement browser caching – It involves saving copies of previously-loaded resources so the browser does not have to reload them on every visit. Use tools like W3 Total Cache for WordPress websites.
- Implement code-splitting – It is an advanced technique that involves splitting JavaScript into bundles to execute when required instead of having browsers load all the code before the webpage becomes interactive. Use webpack to implement code splitting.
Serve Images in Next-Gen Formats
Images in next-gen formats like JPEG 2000, JPEG XR, and WebP load faster than commonly-used file formats like JPEG and PNG.
- WebP offers 25% to 35% smaller file sizes than JPEG with the same quality.
- WebP images result in a 42.8 percent decrease against PNG images.
WebP images are increasingly becoming the standard format for images and plugins like Smush and Imagify offer a WebP conversion feature.
Leverage Browser Caching
Browser caching is a basic optimization that enables your webpages to load faster for repeat visitors. When the visitor moves to a new page on your site, caching ensures that all your data (like logos and fonts) does not have to be reloaded.
This results in a vast improvement in site speed.
Pressable customers can take advantage of our premium edge caching that’s included with all of our plans. Websites on other hosts can rely on plugins like W3 Total Cache, WP Super Cache, and WP Rocket for WordPress websites to implement browser caching.
Google PageSpeed Insights requires you to have an “efficient” cache policy. This means that you need to optimize the frequency at which your browser clears its cache. But you don’t want it to be too often because it defeats the purpose of having browser caching.
You can optimize your cache expiration period by adding Cache-Control and Expires headers to an Nginx server. If you have Apache servers, you can edit or create a .htaccess file (with the help of a web developer).
You can also consider hosting Google Analytics locally with plugins like Perfmatters and Complete Analytics Optimization Suite (CAOS).
Avoid Large Layout Shifts
Large layout shifts lead to a frustrating user experience because page elements appear suddenly, shift around, and interfere with how visitors interact with the webpage. When layout shifts happen, just as a visitor is about to click or tap on an element (buttons, images, contact forms), the screen moves down and they’ve clicked on something else.
Avoiding large layout shifts is particularly important for mobile devices. A poor CLS score indicates that your webpage is “janky,” or visually unstable.
Ways to prevent large layout shifts:
- Specify image dimensions – Set the width and height for images and video elements so that correct spacing is used for images and videos. You can also do this using CSS aspect ratio boxes.
- Reduce layout shifts caused by embeds, ads, and iFrames – You can take several actions to minimize layout shits due to iFrames, ads, and embeds:
- Use placeholders when no ads are available for display
- Shift ads to the bottom or outside the viewport
- Reserve the largest ad slot before loading the ad library
- Avoid inserting dynamic content above existing content – You can avoid large layout shifts by not inserting new content like banners and forms above existing content unless it is in response to visitor interaction.
- Prevent the Flash of Invisible Text (FOIT) – Your CLS score can be affected by FOIT issues. You can preload fonts and/or use the font-display attribute to ensure that your text should remain visible during font loading.
- Avoid non-composited animations – With the help of a web developer, perform only composited animations wherever possible to minimize main-thread work and avoid repainting of pixels during page loading.
Optimize Images
Slow pages and low PageSpeed Insights scores are mainly caused by large images. Optimizing images helps lower FCP and LCP times and prevents CLS issues.
Here are a few ways in which you can optimize images:
- Resize and compress images: Use plugins like WP Smush Image or Crush.pics to save, on average, 50 percent or more on image size. You can also use online tools like Optimizilla and Compress JPEG.
- Set standards: Define standards for format and the maximum resolution of images for the site
- Use a CDN to deliver your images: Use a content delivery network so images are delivered faster.
- Use responsive images – It involves creating images of different sizes for different devices by using the srcset attribute, which gets added to <img> tags to specify alternate image files in varied sizes. Browsers read this list, decide which image size is suitable for the current device, and display that version of the image.
Reduce the Impact of Third-Party Code
Third-party scripts can lower the performance of your site by prolonging main-thread work. Examples of third-party scripts are:
- Google Analytics
- Libraries for JavaScript and fonts
- iFrames for ads and other content
- YouTube video embeds
- Social media sharing buttons and feeds
While some of these may be necessary for your website, there are ways to minimize their impact:
- Defer the loading of JavaScript
- Locally host third-party scripts like Google Analytics
- Use link tags with preconnect attributes
Avoid an Excessive DOM Size
The Document Objective Model (DOM) is how browsers transform HTML into objects. It uses a tree structure with several individual nodes that represent each object. The larger the DOM size, the longer it will take your webpage to load.
Google PageSpeed Insights will recommend that you reduce the number of nodes and the complexity of your CSS styling.
You should also use a lightweight website theme that uses GZIP compression or has a more responsive design. Heavy themes add more volumes of elements to the DOM and may have convoluted styling that slows page loading speeds.
Over to you
Google PageSpeed Insights is an invaluable tool for site owners and marketers, even those with less technical knowledge. By following the recommendations in the PSI report (but not obsessing over getting a perfect score), you’re sure to boost your website’s rankings in SERPs.
Zach Wiesman
Zach brings a wealth of knowledge to Pressable with more than 12 years of experience in the WordPress world. His journey in WordPress began with creating and maintaining client websites, fostering a deep understanding of the intricacies and challenges of WordPress. Later, his knack for problem-solving and commitment to service led him to pursue a role at Automattic, where he excelled in providing customer support for WooCommerce. His expertise extends beyond technical proficiency to encompass a deep understanding of the WordPress community and its needs. Outside of work, Zach enjoys spending time with his family, playing and watching sports, and working on projects around the house.
