What is PageSpeed Insights?
PageSpeed Insights (PSI) is a free online tool from Google that helps you measure and improve the performance of your website. It provides both lab and field data about a page, so you can see how it performs in different conditions. PSI also provides suggestions on how to improve your page’s performance.
The lab data is collected in a controlled environment, so it can be used to debug issues. However, it may not capture real-world bottlenecks. The field data is collected from real users, so it provides a more accurate representation of how your page performs in the real world.
PSI uses a variety of metrics to measure a page’s performance, including:
- First Contentful Paint: The time it takes for the first piece of content to render on the page.
- Speed Index: A measure of how quickly the page becomes interactive.
- Total Blocking Time: The amount of time that the page is blocked from rendering due to JavaScript or CSS.
- Cumulative Layout Shift: The amount of movement that elements on the page experience as they load.
PSI also provides suggestions on how to improve your page’s performance, such as:
- Optimize images: Compress images to reduce their file size.
- Use a CDN: Serve your pages from a content delivery network (CDN) to improve load times.
- Minify CSS and JavaScript: Combine and minify your CSS and JavaScript files to reduce their file size.
- Eliminate render-blocking resources: Avoid using resources that block the rendering of the page, such as large images or scripts.
PageSpeed Insights is a valuable tool for anyone who wants to improve the performance of their website. It is easy to use and provides actionable insights that you can use to make your website faster.
Testing web addresses with Pagespeed Insights
To test different pages/addresses on your blog or website, go to the tool’s page. Once connected to the page, type or paste the short or long address of the page you want to test. Here, I’m typing the root address of Google:
Once you’ve validated, the tool will quickly do its job of measuring and eventually give you a result. Don’t panic if you see red everywhere.
The same applies if you see exclamation marks on the 2 tabs since the tool measures the page concerned for both mobile and computer support.
The tool isn’t there to punish you by giving you a low score and telling you that your website is super slow. Although I admit that the first time, it does have that effect.
The main purpose of the result of the analysis is to let you know which elements need to be improved, changed, or left as they are.
The result will tell you, for example, whether your photos and/or images are light enough for the web, or whether they’re a few kilos too big
The results returned by PageSpeed Insights
Let’s be clear. This tool is only useful if a website or blog owner has time to devote to understanding the results proposed by the tool and then to improving the potential elements incriminated in slow page display times.
It’s also worth noting that results can vary for the same website or blog. If you’re testing your contact page, on which only your logo, a navigation menu, and a form appear, the page will probably be quick to display because it contains very little. Unlike some home pages, which display a lot of images and information…
The 4 main rating axes
The tool gives you a score for mobile and desktop on 4 axes: performance, page accessibility, best practices, and SEO. The classic recommendation is to prioritize actions on the elements rated lowest by the tool.
1. Performance
This is undoubtedly the most strategic element for webmasters. Performance concerns elements that are not always easy to correct. For example, here’s what the Pagespeed Insights tool might report as positive or less positive:
- Correctly sized images (avoid 300kb for a single image)
- Images in JPG format only (try to use png for icons and logos, webp, and svg when possible, as they’re very light).
- Resources that block rendering (basically, this means using a caching system to minimize CSS and JS resources so that they don’t lengthen page loading time when clicked).
- Reduce the number of requests and the size of transfers: Here again, the aim is to reduce or remove anything that requires a lot of resources for the page to be displayed, or that requires the page to call up a lot of resources. We remove anything superficial, such as widgets that display social network feeds in real-time or near real-time…
If this element is tricky to deal with, it’s because it sometimes requires knowledge that’s not easy to grasp.
Not everyone is familiar with the notions of caching or JS. This is perfectly normal. On the other hand, other commonly criticized elements such as the weight/size of images and photos will be easier to improve.
This is often achieved by replacing a heavy image with a lighter one, or one of more reasonable dimensions. Or changing an image format.
2. Accessibility
Here we’re talking about what’s good and what’s not on a web page in terms of accessibility.
In other words, the legibility of page elements such as text (its size, its color in relation to the page background color, and the size of a button large enough to be readable, visible and clicked…).
For example: If your page has a poor accessibility rating, don’t hesitate to prioritize the changes you need to make to improve the rating and make navigation easier for your audience, i.e. your readers. Accessibility can be penalized for items such as :
- A background color that does not contrast well with a foreground color (you have very light text on a white background)
- A button with missing text (e.g.: send) that displays very poorly with only a small square.
For the two lifts to be improved, the foreground color should be made darker, so that it contrasts better with the white background. For the second example, text should be added to the button that’s too small.
In short, depending on the feedback received, it’s advisable to correct the elements that the tool considers to be inaccessible.
3. Best practices
Here, the tool will penalize elements considered basic. If, for example, a website does not have a secure HTTPS connection on all its pages, it will indicate this and lower the score for this reason. The message: “The page does not use the HTTPS protocol”.
In this case, you’ll need to make sure that any offending pages have switched from HTTP to HTTPS protocol, which is designed to ensure the security of your visitors.
4. SEO
This rating function is aptly named, as it will rate as positive or negative any element directly related to a web page’s SEO. Also, the tool will give feedback on elements such as whether the website or web page tested has :
- a title element
- indexing of the page is not blocked (by robot.txt, for example)
- images have ALT attributes set
- the page uses readable font sizes
- tactile elements are correctly sized…
Recommendations for improving your site via Pagespeed Insights results
Whether you’re consulting the results for your blog or website via PageSpeed insights out of curiosity or because you find your website slow, don’t hesitate to take the time to read the results.
Scanning them too quickly, especially if the scores are low, won’t give you a clear picture of where the potential slowness of your website or blog is coming from.
To be effective and really act on the results to be improved, take action on the results that the tool shows you first.
Example: If, in the case of slowness, it’s your website’s images and photos that are being blamed for being too heavy for the web, then don’t hesitate to tackle this point first. Replace files that are too large (several MB) with a lighter version.
Or by opting for JPG instead of PNG, or even better, not WebP. Don’t hesitate to reduce the size of your logo if it’s too large, even though it’s only about 30 pixels high on your site.
Example: If the tool tells you that you need to add a cache to your website and you don’t have a cache system activated, ditto. Choose the tool that seems most appropriate and activate the plugin on your web space.
Some of the actions required to improve results on Pagespeed Insights can be complex to grasp. Others, however, are easy to understand. For example, you may need to process images to make them lighter.
So don’t hesitate to act on what you can manage on your own. And act on the elements that slow down your website the most. In this way, you’ll achieve higher scores on the tool and, by extension, offer your visitors a more pleasant browsing experience, since this is the tool’s primary aim in providing these analyses.
Below is a video by SMA Marketing to help you understand better
Other tools like PageSpeed Insights
If you prefer to compare results with other free tools of the same type as PS Insights, don’t hesitate to analyze your site using tools such as :
Comparing the results of each tool helps to put some of the sometimes low scores into perspective. On the contrary, it can help you realize that certain points identified as needing improvement are confirmed and that it’s best to take action on them.