[SOLVED] Why did LCP change without making any changes to the websites?

Starting from late November, the Largest Contentful Paint (LCP) of some websites has changed without any apparent reason. These are the screenshots taken from the Search Console of some of our students, showing an improvement and a deterioration in the Largest Contentful Paint (LCP), without any modifications being made to the websites?

What happened? The change was caused by the release of Google Chrome version 118 in October, which introduced changes in the default loading priority of images. But what does Google Chrome have to do with LCP? LCP measures the time it takes to display the largest element in the viewport, and usually, this element is an image. Core Web Vitals are calculated based on data sent by the Chrome (and Android) browsers of your site’s visitors.

Worsened LCP suddenly why

Worsened LCP suddenly why?

 

Why are we only noticing this now if the release happened in October?

Core Web Vitals are released with a 28-day delay from the detection date and represent the experience of at least 75% of the visitors. Not all users immediately update their browsers as soon as a new version is released, which explains the two-month delay.

What happened (technically)? When a website loads, the first step is to download the HTML document. The browser then analyzes the HTML to identify resources to download, such as stylesheets, scripts, and images. The browser prioritizes “critical” resources, those necessary to render the visible part of the site (the famous “above the fold”). This seemingly simple process presents a big problem: the browser cannot distinguish which images are more important just by looking at the HTML, so it assigns them a low loading priority. Only after initiating the page rendering (and completing the CSSOM and DOM) does the browser recognize which images are actually visible in the viewing area and increases their priority.

Therefore, Chrome has changed how images are prioritized: starting from October 2023, the first five images in the document have a “Medium” priority instead of “Low.” (You can notice this by opening the Network Inspector and enabling the Priority column). This new rule attempts to identify important images in advance, causing an impact on the largest contentful paint.

Is this innovation a problem or an opportunity?

In fact, we lose control of the situation because we are allowing the browser to do “as it pleases”. If tomorrow the Chrome team wakes up and decides to apply another rule, the Core Web Vitals will change again. Furthermore, not all users immediately use the latest version of Chrome when it is released, so we will definitely have fluctuating results for months and months, as Core Web Vitals represent 75% of users. Personally, we prefer to be the one deciding how the site should behave and maintain control independently of Chrome updates.

Improved LCP suddenly why

Improved LCP suddenly why?

The Solution: What to do to regain control of the LCP situation?

The solution in this specific case is to use Priority Hints correctly and apply the fetchpriority attribute to all critical images (and only to those).

<img src="/performance.png" fetchpriority="high">

Keep in mind that critical images depend on the viewport size, which in turn depends on the visitor’s screen size. In these two specific cases, I used the WordPress filter wp_get_attachment_image_attributes. However, starting from WP 6.3, it is better to use wp_get_loading_optimization_attributes. Now, I will wait for the customary 28 days to see the result of the intervention?.

P.S. Before intervening, check which version of WordPress you were using at the time of the LCP change. Version 6.3 (released on August 8, 2023) automatically adds fetchpriority="high" to the image detected by WordPress as LCP.

In the examples provided, the version used is 6.2.x.

Learn more with SEO Specialist course here.

START YOUR CAREER

DOWNLOAD YOUR EBOOK

Which is the best Digital jobs for you cover ebook

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *