Google Page Speed Insights

Introduction

The Google Page Speed Insights is an indispensable tool for evaluating and optimizing website performance. In an increasingly demanding digital scenario, the loading speed of a webpage plays a main role in user experience and site success. The Page Speed Insights furnishes invaluable insights regarding a page’s loading speed, pinpointing enhancement insights for developing more responsive, and efficient websites. This article introduces the metrics employed by Page Speed and imparts guidance on which adjustments to prioritize in order to elevate your website’s score.

Using the Page Speed

Upon accessing Page Speed, you will find a highly intuitive interface prompting you to enter your website’s URL.

Entering your website URL (I used the Page Speed website as example), you will observe your score divided among the distinct metrics that Page Speed employs to evaluate websites performance. The key metrics will be elaborated upon below.

LCP (Largest Contentful Paint): This metric measures the time it takes for the largest visible element in the viewport (such as an image or text block) to be loaded and displayed on the screen. A swift LCP is crucial for delivering a rapid loading experience to users.

CLS (Cumulative Layout Shift): The CLS gauges the visual stability of a page, accounting for the shifting of elements during loading. A low CLS value ensures that page elements remain in their expected positions, preventing distractions and interaction errors.

TBT (Total Blocking Time): The TBT quantifies the total time during which the page is blocked and unresponsive to user interactions due to main thread activity. Minimizing TBT is crucial for ensuring a responsive user experience.

FCP (First Contentful Paint): This metric measures how long it takes for the first content to be rendered on the screen. A rapid FCP helps create the sensation that the page is loading quickly, even if the complete content is still being processed.

SI (Speed Index): The Speed Index metric provides a comprehensive glimpse into a webpage’s visual loading experience. It quantifies how rapidly content becomes visible within the viewport while the page is loading. Unlike metrics targeting individual elements, the Speed Index evaluates the overall perceived speed by tracking content’s progressive appearance. A lower Speed Index value corresponds to a swifter loading encounter, enabling users to perceive content faster and sense page responsiveness.

Where should I begin?

Throughout the web analysis page, you will notice that in addition to the scores, Page Speed provides a list of suggested adjustments to enhance website performance and consequently its score. Given the development context, where there is typically a pre-estimated story point for the tasks, it is crucial to discern how to prioritize alterations that will yield the most significant impact on performance and score. With this in mind, we will begin by evaluating the “Calculator” option.

On the calculator page, we observe the metrics along with the time taken, and the obtained score for each. The calculator also displays the weight attributed to each metric in final score.

We can then experiment by altering the “Value” for each metric to gauge which will have a more substantial impact on the website’s score, thereby prioritizing the adjustments.

The values of LCP, TBT, and CLS carry more weight towards the final score, hence we usually begin with these. In the provided example, I would start with TBT, as it holds greater weight and has a higher value. If we were to reduce the TBT to 270ms, the final score would already rise to 90, a green score.

Mobile and desktop

It’s important to highlight that Page Speed assigns separate scores for the mobile and desktop versions of the website. We should consider this aspect and strive to enhance both scores. The mobile score tends to be lower due to the testing being conducted under limited internet speeds.

A tip that often helps in improving the mobile score is leveraging responsive design resources, such as the srcset attribute for images. This attribute enables us to include images with optimized sizes and dimensions for the mobile version of the website, thereby reducing the loading time of these images.

Conclusion

Google Page Speed Insights is an excellent optimization tool, and I hope that after reading this article, you have gained a good understanding of its functioning and feel motivated to explore it by testing these optimization tips on your website.