PageSpeed Insights: Understanding and optimizing core web vitals

What Are Core Web Vitals?

Core Web Vitals Definition

Before diving deeper into how Core Web Vitals work, let's establish what they represent. To keep it simple: it's the analysis of three key indicators—LCP, FID, and CLS. These metrics measure webpage performance and verify that user experience meets expected standards.

The goal is to push web creators toward fast-loading, mobile-compatible, secure sites without intrusive ads. Google had already integrated these elements into its algorithm to deliver the best results to users.

With Core Web Vitals, however, three new indicators are added to achieve optimized SEO, complementing the criteria Google already considers:

• LCP (Largest Contentful Paint) = Loading time

• FID (First Input Delay) = Interactivity

• CLS (Cumulative Layout Shift) = Visual stability

Without optimizing these three indicators, you cannot provide users with a satisfactory experience. Every page on your website will be analyzed—even those marked for robots not to index. This demands special attention!

Core Web Vitals Elements

As mentioned previously, Google uses three key scoring criteria that are part of Core Web Vitals: loading (LCP), interactivity (FID), and visual stability (CLS). These three criteria are essential for delivering a successful user experience.

Largest Contentful Paint (LCP): Loading

LCP is the indicator that measures webpage loading time. It considers the largest element (the most important page content) for its calculations. This is one of the essential elements for achieving top-tier user experience. Users want instant results and no longer wait for websites to load.

Note that LCP concerns content above the fold—images, videos, and text that display automatically without users needing to scroll.

With a poor LCP score, your bounce rate is more likely to be high. Additionally, Core Web Vitals updates make LCP an even more important factor for achieving good SERP positioning.

First Input Delay (FID): Interactivity

FID measures webpage interactivity—specifically, the time it takes to respond to a user's request from the moment they perform an action (like scrolling a page or clicking a CTA).

Simply put, FID measures wait time for an interface response. If your code is poorly designed or you use blocking scripts, you risk getting a fairly low FID score.

FID is a statistic calculated solely through user actions at a given moment. With some tools, you might see the term TBT instead of FID. TBT (Total Blocking Time) measures the exact time a webpage is blocked and can therefore estimate FID precisely.

Cumulative Layout Shift (CLS): Visual Stability

CLS analyzes visual stability of a webpage during loading. Let's be honest—there's nothing more frustrating than clicking on a website element only to have elements suddenly shift, preventing you from clicking the button you intended.

This can affect any webpage elements: font changes, images that don't load correctly, or windows that modify the page and sometimes redirect us to another webpage without our consent.

You must be very vigilant, especially if you use a CMS like WordPress that isn't optimized with outdated CSS, scripts, or fonts.

The Importance of Core Web Vitals

Know that over 200 factors can influence your ranking. If you thought working solely on your Core Web Vitals would improve your SEO with a snap of your fingers—well, that's false! We don't really know how much this can influence positioning.

The results you get from analyzing your Core Web Vitals will be indicators. For example, even if your loading speed is under one second, you might have a catastrophic score due to other elements. It's not consistent either—your score can jump from 70 to 80 without you noticing any changes.

But that doesn't mean you should neglect them! By working on your Core Web Vitals, you optimize your user experience, which directly impacts your SEO and increases your chances of converting users into customers.

Note that Google has used "page experience" since June 2021 alongside Core Web Vitals to rank and evaluate webpages. While both are somewhat linked in terms of SEO, "page experience" also includes responsiveness, HTTPS, and website security. This is why a poorly coded site or one with undesirable dynamic content will be poorly positioned in SERPs. Terrible.

Optimizing Your Core Web Vitals with PageSpeed Insights

What is PageSpeed Insights?

PageSpeed Insights is a free tool offered by Google to measure webpage performance and obtain precise analysis of technical elements that need improvement to optimize a page, considering the three Core Web Vitals we discussed earlier (LCP, FID, and CLS).

It notably uses the Lighthouse tool to measure website speed and Chrome User Experience Report (CrUX) to provide user experience data.

Its operation is simple. Just enter a webpage URL into the PageSpeed Insights tool to get a detailed, automatic report. A score is then assigned to the analyzed page ranging from 1 to 100 with a basic color code using red for poor scores, orange for average scores, and green for good scores exceeding 90.

The color coding also helps you see which points need priority attention and which align with Google's expectations. PageSpeed Insights will help you understand your performance and identify elements that need improvement.

The tool has dual value since it provides both a desktop version report and a mobile version report for a page. This is significant considering Google closely monitors the mobile-friendly aspect of websites.

How Are Your Core Web Vitals Measured with PageSpeed Insights?

You should know that two techniques exist for measuring website performance:

• Synthetic monitoring, translated by Google as "lab data" or laboratory data. This data is collected through navigation simulations and by the Lighthouse tool at a given moment.

• Real User Monitoring, called "field data" by Google or field data. This data is collected from real users over the last 28 days and comes from the CrUX tool.

The difference between lab data and field data is that field data relies on real users for everything concerning loading speed, connection, device choice, etc.

Certain interactions (like scrolling) cannot be analyzed simply under specific conditions, as with lab data. FID, for example, which represents all interactions, can hardly be analyzed by lab data since it requires real conditions to obtain them.

Caution! Lab data remains important for analyzing user experience. Beyond the LCP, FID, and CLS trio, you'll also have access to TTI (Time to Interactive), Speed Index, and Total Blocking Time (which sometimes replaces FID in certain measurement tools) thanks to lab data.

How to Improve Core Web Vitals

Largest Contentful Paint (LCP): Loading

Problems impacting LCP often correspond to slow server response time. If your data isn't optimized, your structure is poorly designed, or you encounter API bugs, you're facing a fundamental problem. One of the first things to do is check your server.

To improve your server speed, you can:

• Get a more powerful server

• Use a CDN (content delivery network) like OVH or CloudFront

• Cache your HTML, CSS, and image resources

Additionally, adding JavaScript and CSS to your website can influence your content loading time. To avoid weighing down your webpages, it's better to reduce the number of plugins, especially those above the fold, and:

• Remove unused code

• Check code updates

• Reduce CSS files used

Visually imposing or complex content necessarily takes longer to load. If you have GIFs or unoptimized images above the fold, your LCP score risks being low. You should then optimize your images (compression and formats) and "preload" your resources.

First Input Delay (FID): Interactivity

Most blockages impacting FID are linked to a webpage's loading phase. To increase your FID score, you should look at Long Tasks.

Long Tasks are JavaScript execution moments during which a user waits for a webpage to respond. From the moment the main thread has been blocked for more than 50 to 100 milliseconds, there's a Long Tasks issue to resolve.

To identify Long Tasks, you must first determine which pages are problematic. You can then use the Lighthouse tool to detect them.

It's also possible, as with LCP, that JavaScript is causing a website's lack of interactivity. Basically, when JavaScript loads, the browser cannot respond to user interaction—who obviously cannot see what's happening behind the scenes and decides to leave the site.

To resolve the problem, you can simply limit your JavaScript usage on each page. If your site runs on WordPress and uses countless plugins, you very likely have unnecessary loading that harms your website speed.

Cumulative Layout Shift (CLS): Visual Stability

A poor CLS score corresponds to an element that disrupts a website's proper functioning (example: a layout issue, an ad, or intrusive pop-up, etc.).

• Images

One of the first issues users encounter is related to using CSS to resize images. The problem with this approach is that display space will only be visible once the image is imported and the browser has determined its dimensions. Consequently, when this situation occurs, other elements fill the space and create a shift once the image becomes visible.

To avoid this problem, you must include width and height attributes on your images and videos. The browser will then understand the space it should allocate to the image before download.

• Ads and Dynamic Content

Ads are elements integrated into a page that can shift a website's layout. Coming from a third-party site, the browser doesn't know what size to assign until it's downloaded. Fortunately, you can reserve stable space that won't change for your ad placements by styling the element in advance.

If no ad loads, this space should still have content or remain empty. Because if it disappears due to no ads being present, all your content will shift to fill the void. This will disorganize your webpage!

Also remember to check your dynamic content, like newsletter signups or other forms of pop-ups.

• Embeds and Iframes

Here, we find the same problem as with image size attributes. The browser cannot recognize the size of "embed" widgets (examples: videos or maps) and iframes until they're loaded. To resolve this problem, you can inspect your elements using your browser's developer tools.

You'll then know your final elements' dimensions and can reserve sufficient space for your elements.

• Custom Fonts

If you use custom fonts, you might encounter download and layout issues (example: the selected font is replaced by another font or the text becomes "invisible").

To avoid this type of problem, you must ensure all your fonts are optimized and that "fallback" fonts are properly in place and preloaded. If you use fonts from Google Fonts, you can also host them yourself to reduce loading times.

Other Tools for Measuring Your Core Web Vitals

Google Search Console

Google Search Console allows you to analyze Core Web Vitals at a glance. This tool offers two reports: one for mobile and another for desktop with all your performance details and improvements you could make for each page of your website.

However, your website needs sufficient traffic to collect interesting visitor data that you could use.

Web.dev

Web.dev is a superb tool for analyzing your web performance and page loading speed. It's not reserved solely for developers, as it also allows measuring Core Web Vitals very simply. Like PageSpeed Insights, if everything is green, it means you're in the clear.

For those using browsers other than Chrome, you can also find the functionalities offered by Lighthouse on Web.dev. However, you won't be able to test in private browsing, and most of your analyses will be directly directed toward mobile devices.

GT Metrix

GT Metrix is somewhat like PageSpeed Insights. Indeed, it provides similar reports using Lighthouse metrics. The little extra? The waterfall charts that can become very practical for detecting and analyzing poor elements.

Additionally, GT Metrix measures TTFB and gives you technical recommendations to improve and optimize your loading time. GT Metrix's paid version will bring you other functionalities: tests on multiple servers, email alerts, etc.