The faster your website loads, the better — users love it and Google loves it. If you've been improving your website speed with Google PageSpeed Insights for a while and have seen no miracles so far, there's only one reason. You might have misinterpreted the report.
Google PageSpeed Insights checker provides reports based on real and "artificial" data. So, it's important to know what metrics to focus on to improve not only the technical side but user experience.
In this guide, you'll find everything you need to excel in GooglePageSpeed Insights and finally take your website to the "green zone".
Note: if you manage your store on Magento, find a ready-made solution to speed up Magento as we go on.
What is Google PageSpeed Insights?
Google PageSpeed Insights (PSI) is a free tool that analyses your website performance in terms of loading time, responsiveness and user experience on mobile and desktop devices. It uses a 0-100 store scale to give feedback on how your web application is doing:
- Green — 90 and above — good performance
- Yellow — 50-89 — needs improvement
- Red — below 50 — poor performance
Pro tip: there's no need to obsess over the 100 score since it's nearly impossible to reach for all pages. It's best to focus on better user experience and relevance if you want your visitors to stick and convert.
Google PageSpeed Insights uses free speed audits to assess your website performance and quality. Thus, it provides reports based on different types of data:
- Lab data — collected in a controlled environment by Lighthouse. It shows how artificially defined or "fake" users may interact with your website. While good for debugging purposes this data doesn't show real-life user experience.
- Field data — extracted from Chrome User Experience report and shows how real users interact with your website. However, it includes fewer metrics.
Note: since PSI shows you data only from one user session and includes aggregate data, it shouldn't be the only performance testing tool to use.
Does Google Pages Speed Insights Store Affect SEO?
Although website speed is a known ranking factor, it's not like Google runs your website through PSI to rank you. It's the user experience that matters the most.
If your website performs badly, people abandon it. And if people leave, it signals to Google that your website is not relevant enough to be at the top SERP positions. Leave alone revenue losses and poor page view scores this could lead to.
So, improving website speed definitely has a positive impact on your SEO performance. However, it's important to know what to improve to make that impact.
Google PageSpeed Insight Metrics
Google made the PageSpeed Insights test very simple. All you need to do is to go to Google PageSpeed Insights, enter your URL and hit Analyze. Then wait a few seconds or minutes, depending on the complexity of the page or internet connection, and view the reports.
Mobile vs Desktop
Once the report is ready you'll land on the mobile view first (if you have a mobile version of a website). However, you can easily switch to a desktop to see the same metrics.
Note: mobile devices have device-specific CSS rules and slower processors. So, it's totally fine if your mobile score is lower than on your desktop.
Core Web Vitals
The Core Web Vitals (CWV) are the metrics that measure how user-friendly your website is based on visual stability, loading time, and interactivity (of the last 28 days). You can either pass (passed) or fail (failed) this assessment, based on the threshold breakdown of each metric in percentages (%).
The metrics in this section include:
- Largest Contentful Paint (LCP) — measures the time it takes for the largest content element on the page to become visible to the user
- Interaction to Next Paint (INP) — measures how quickly the page responds to the user interactions
- Cumulative Layout Shift (CLS) — measures how much content on the page moves around as it loads
- First Contentful Paint (FCP) — measures the time it takes for the first content element on the page to become visible to the user
- Time to First Byte (TTFB) — measures the time it takes for the user's browser to receive the first byte of information from the server
Pro tip: CWV are the only metrics based on field data, data about how real users are experiencing your website. Focus on improving all the metrics here.
Opportunities and Diagnostics
— indicates how your page performs in terms of speed and optimization (it's a weighted average or CVW, speed index and total blocking time)
— indicates how available your page is regardless of impairments or operational diversity (e.g. alt text for images, colour contrast, etc.)
— indicates how your page adheres to the trust and security best practices (e.g. secure connections, meta tags, Javascript optimization, source maps, etc.)
— indicates if your page follows basic search engine optimization practices (e.g. meta tags, mobile-friendliness, etc.)
Note: the SEO section doesn't analyse all things that could affect your SEO rankings. Don't rely only on this report when improving SEO.
Finally, there's the diagnostics report, under the performance score. It shows you the performance audits that your website didn't pass. You can switch between the audits relevant to the FCP, TBT, CLS, or LCP and skim through Google's suggestions on how to fix them. We'll get to that in a minute.
Fix Google PageSpeed Insights Issues
You don't need to hire a developer to read Google PageSpeed reports since Google provides suggestions on what needs to be improved. But things aren't that easy when it comes to making these changes.
Some are relatively simple, and some might require a technical expert. We'll try to break down each suggestion to give you a headstart.
1. Reduce initial server response time
When a user tries to access the webpage, the browser makes a request to the server to fetch the content. The server receives that request and returns the content. The longer the server responds, the longer the delay in loading. Google will mark this issue if the server response time is longer than 600 milliseconds.
To reduce initial server response time:
- Increase RAM and upgrade to faster processors
- Index database tables properly
- Use content delivery network (CDN)
If you choose a reliable hosting provider they will cover all these for you. Or you can hire a developer to fix this one.
2. Eliminate render-blocking resources
Render blocking resources, as the name suggests, are resources that block pages from rendering faster. These are usually the JavaScript, CSS and font files a browser has to load before displaying a page to the end user.
To fix this Google PageSpeed Insights issue unfold the suggestion and view the resources that are blocking the rendering. Then identify which of them are not critical for the website and remove or defer them.
3. Minify JavaScript
Javascript files are crucial for your website's functioning. However, they are not always properly optimized which slows down the loading. Not "properly optimized" in this case means that these JavaScript files include a lot of unnecessary characters, spaces and delimiters.
The process of removing these unnecessary characters is called minification. Use any of the online tools to minify JavaScript files listed in the PSI report or switch to the lightweight JavaScript frameworks and libraries.
4. Reduce unused JavaScript
This Google PageSpeed Insights issue is too obvious. If the JS is render-blocking, as discussed above, the browser will need to download, parse and compile the script before processing other resources.
And if the unused JS is not blocking any resources it still competes for bandwidth with other resources while the browser downloads it.
Correspondingly, there is no need to keep unused JavaScript around. Just view the list in the PSI suggestions and remove all JS files that you don't use.
5. Reduce unused CSS
Same as with JS files, the browser must download all external stylesheets before it can render a page to the user. Why? Because these stylesheets may include the rules that affect the styles of the page.
So browsers can't display any content before compiling all the required stylesheets.
The "reduce unused CSS" error in Google PageSpeed Insights appears when a website is loading the CSS styles not used on the page. This leads to unnecessary data consumption and longer loading.
To fix this issue you should inline critical CSS inside the <style> tag and defer the loading of other CSS files till after the page is rendered.
6. Avoid an excessive DOM size
The document object model is a tree-like representation of the HTML structure of the webpage. The larger the DOM size the worse the loading speed.
To reduce the DOM size:
- Use server rendering to render pages on the server and then return them to the user
- Avoid using visual page builder since they generate inflated HTML
- Use clean-coded themes and extensions
- Ask developers to remove unnecessary attributes and elements from the HTML code
7. Avoid chaining critical resources
You already know that a lot of JS, CSS, image and font files, etc. load before a page is rendered. Some are critical and some are not. But when you say that the loading of different files depends on one another you create a chain of critical resources.
e.g. you say that the text on your landing page should be loaded only after the images load. And for the images to load some JS and CSS files need to load first.
The browser won't render a page unless all elements of the chain are loaded. This creates significant delays.
To fix this issue you should simply add these attributes to the website code:
- "async" — tells the browser to continue loading the page while a file is loading in the background
- "defer" — tells the browser to download a file after a page is available to the users
8. Reduce JavaScript execution time
JavaScript execution time defines the time it takes for the JavaScript to run from start to finish. It depends on a variety of factors and causes a lot of issues when it comes to loading and user experience:
- Blocks the main thread. Browsers load content, respond to users' clicks and render a page in the main thread. They simply can't do any of that unless the JavaScript has been executed.
- Delays page rendering. If a browser spots the script tag it stops all other operations to run the script, leaving users to stare at the blank screen.
- Delays first input when busy. Browsers simply can't respond to user interaction when the JavaScript is busy.
- Consumes memory when running. If the code is poorly optimized, it uses a lot of memory, leading to delays and crashes (in some cases).
Fixing this error requires you to remove unused code from the JS files, divide JS files into manageable chunks using code-splitting, defer non-critical files and cache your code with the PRPL pattern.
9. Minimize main-thread work
When a browser renders a page, it means that its renderer turns your code into a webpage that users can interact with.
Most of the code is processed in the main thread of the renderers process. It parses the HTML and CSS files, builds the DOM, parses, evaluates and compiles the JS files.
When the main thread is busy with something else, it can't respond to the user's interactions. This is a bad user experience you should avoid.
Google PageSpeed Insights test provides a breakdown of where the CPU was spent when the browser loaded your page. To fix this you should remove unused files, reduce the complexity of style calculations, defer non-critical files, etc.
So we recommend paying attention to other flagged issues. You might fix this one while dealing with the others.
10. Properly sized images
If you have a lot of images on your website they can significantly delay the page loading, especially if not properly sized. Google speed test report provides a list of all these images along with the possible savings in kibibytes.
This error is relatively easy to fix since all you need is to resize images. You can do that in the following ways:
- Compress images with online tools before uploading them to your website.
- Lazy load the off-screen images.
- Use appropriate image formats for each image to maintain the best loading speed and quality.
- Use the “srcset” attribute to serve properly-sized images depending on the users' device.
11. Preload key requests
At this point, you must know that there are a lot of resources loading when the page is rendered. However since not all of them are critical, loading is delayed.
Preloading key resources means telling browsers what resources to download and render first. Key resources are anything that your page needs at the early loading stage. They usually include fonts, but CSS, JS and HTML files can be included too.
Ask a developer to identify critical resources and mark them with the "preload" attribute to fix this PSI error.
12. Defer offscreen images
Loading all images on a page at once won't do any good, especially if you have a lot of them on a page. The browser downloads all of them when rendering a page. It takes a while, depending on the number of images you have there.
A much better approach is to defer offscreen images — images not visible on the screen — using lazy loading. It allows you to prioritise images visible within the user's viewport and load the rest of them as needed.
This reduces the amount of time required to load a page and boosts user experience.
13. Reduce the impact of third-party code
Third-party code is useful when it comes to monitoring user behaviour with analytics tools and advertisers (e.g. Facebook Pixel, Google Tag Manager, etc.) But you most likely have some unnecessary code from tools and platforms you no longer use.
That's what causes loading issues. The scripts are loading even if you don't need them.
Google PageSpeed Insights flags third-party code that causes the delay and categorises them for your convenience.
However, you should continually monitor your website for unused third-party tools and remove all code associated with them.
Leverage PageSpeed Insights in Magento
If you manage your store on Magento, trying to rank higher, website speed might be the biggest roadblock. But it doesn't have to be when there's the Google PageSpeed Insights test. You get all the data you need to make it to the "green" score, with details on what and where to improve.
The challenge is to implement all of those suggestions, especially without a technical background.
That's what is here for. It tackles all common PSI issues, optimizes images and improves coaching. All to get you to the highest stores with little to no effort.
Since the tool is completely automatic you just need to set it up once and monitor the changes.
