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
Вверх