How to Optimize Late-Discovered Largest Contentful Paint Element?

Core Web Vitals metric is one of Google’s essential criteria for measuring the quality of your websites, such as their user experience and site opening speed. These metrics have gained even more importance with the Page Experience algorithm update, which is rolling out until the end of August 2021. One of these metrics is Largest Contentful Paint.

Largest Contentful Paint can be defined as the time elapsed between the moment we click on a website and the loading of the largest element of the relevant page. Usually, the most recently loaded part on a website is the largest. So we can also see this metric as the loading of the last element on our homepage. In terms of user experience of this metric, less than 2.5 seconds is defined as good, between 2.5 and 4 seconds is normal, and more than 4 seconds is definitely a time that needs to be improved.

What makes the largest contentful paint so important for user experience? Basically, we’re improving website speed, reducing bounce rates, and increasing conversion rates. Core Web Vitals metrics are also getting important with Google algorithms. Thus, you can increase your organic visibility as well. We must ensure that we are presenting our largest content in an optimized manner. Because, during the loading phase, the appearance of the elements on the screen that users first encounter gives them the message that the website has been loaded. This, of course creates interaction rather than a blank page and prevents the user from bouncing directly from our page.

Which elements are detected as Largest Contentful Paint?

During the loading phase of our website, it can specify many different types of elements as the largest contentful paint element. These are;

• Image Elements

Any element with a visual structure found in the viewport on our website can be the largest contentful element.

• Video Featured Image

The featured image of the video element in the viewport can also be the largest contentful element before loading it.

• Paragraph Elements

The text elements on our home page, which take up a lot of space on our page, can also be our largest contentful element.

• Element with CSS Background Images

Sometimes images can be background images defined from CSS to an HTML element rather than the img src format, which are considered the largest contentful element.

Types of Largest Contentful Paint Elements

How can I see the Largest Contentful Paint Selected on the Page?

You can learn and optimize it from PageSpeed Insight supported by Lighthouse from Google’s developer team and many tools such as Speed Curve, WebPageTest, and GTMetrix. 

How Can I Find Largest Contentful Paint Element in PageSpeed Insight?

If our largest contentful element is not optimized, our PageSpeed Insight tool will tell us that we need to optimize in the deals menu, and it will also provide the URL of the relevant element.

But you can find our relevant element in the “Diagnostics” section. The Diagnostic area is described in PageSpeed Insight as, “More information about the performance of your application. These numbers don’t directly affect the Performance score.” If you click the Largest Contentful Paint Element accordion in this area, you can reach our relevant element.

PageSpeed Insight – Detecting Largest Contentful Paint Element

How Can I Find Largest Contentful Paint Element on WebPageTest?

We can find this element when we click on the Web Vitals menu after crawling our website in the webpagetest tool, which I like to use the most, especially the waterfall scheme.

This side shows our metric performances by giving detailed information about our Core Web Vitals metrics. Along with the performance of our Largest Contentful Paint metric, it also provides detailed information about the element type, background image, and outer HTML.

Webpagetest – Detecting Largest Contentful Paint Element

How Can I Find Largest Contentful Paint Element on Speed Curve?

We can see it from the “Render Times” section of the Speed Curve tool, supported by PageSpeed Insight and webpage tool APIs, which I like very much by visual data transfer and especially find very useful in the Cumulative Layout Shift metric. You can also find the URL of our image file in this section.

Speed Curve – Detecting Largest Contentful Paint Element

PageSpeed Insight tool does not have a waterfall feature. But you can check your site’s domain data performance and compare it after 28 days after optimization.

You can optimize your element by controlling the loading order using the waterfall property in Speed Curve and webpagetest tools.

Late-Discovered Largest Contentful Paint Element

One of the most common Largest Contentful Paint problems is that our relevant element is late loading in the website’s waterfall. This problem is the late loading of the most crucial element and prioritizing other unnecessary elements. These unnecessary elements can be render-blocking resources such as CSS and JS or loading images that are not the Largest Contentful Paint elements on our page or outside of our page. In this case, since we need to load the largest element as much as possible, we need to prioritize this element.

Preload Largest Contentful Paint Image – PageSpeed Insight

When we crawl our website via PageSpeed Insight, it requests this image be loaded with the preload method. Let’s check the waterfall of our website together.

Browser Waterfall – Speed Curve

When we check the browser waterfall, firstly, our text element is loaded. We see that the element in the collections section under our article is also visible. We can notice that our image triggered as our largest contentful paint element is loading late. Our largest contentful paint element, loaded after other elements on our page is loaded, takes 4 seconds.

So if our largest contentful paint element is loading this late, which of our elements are loading first? This time, let’s check it out on webpagetest, which has the visuals that I like more in the waterfall section.

Browser Waterfall – WebPageTest

When I checked the uploaded images with priority, I noticed that the images on the off-screen area were loaded with more priority. Our Largest contentful paint element is loaded at 63rd place.

So what’s the error here? We should prioritize the source files that support the viewport of our website. We should get an optimized waterfall by loading the elements at the bottom of our page later.

Detecting Largest Contentful Paint Element on the Waterfall – WebPageTest

Because when the user loads the page, if the viewport is blank, the rate of natural bounce from the page will increase. Maybe our website loads fast, but the user will not interact with the page because our elements outside the screen are loaded with priority.

How To Fix Largest Contentful Paint Element Loading Late?

It’s found straightforward; let’s solve it step by step,

1. Using one of the tools I mentioned above, define the largest contentful paint element on your relevant page.
2. Check the source file that triggered this related element in the waterfall. If the load order is acceptable, it’s okay, but if the load order is too late, go to the next step.
3. Prioritize this element over the loading order of other elements using the preload method.  If you are using a CMS, you can also do this with plugin support. But I recommend that you solve it manually as much as possible. Because plugins make use of unnecessary code in the background, they slow down our site. For example, if you want to preload a responsive image specified with:

   <img src="watch.jpg" srcset="watch_400px.jpg 400w, watch_800px.jpg 800w, watch_1600px.jpg 1600w" sizes="50vw" alt="A minimalist watch">

   You can do that by adding the following to your HTML’s <head>:

   <link rel="preload" as="image" href="watch.jpg" imagesrcset="watch_400px.jpg 400w, watch_800px.jpg 800w, watch_1600px.jpg 1600w" imagesizes="50vw">

   Source: web.dev

4. After completing this stage, compare the lab data with the tools I mentioned above and measure the savings you have achieved.
5. Measure whether the savings you have achieved in lab data also work on the user side. Check the CrUX reports of your relevant page and measure whether the users’ performance in the LCP metric has improved or not in a percentage of the 28 days.

Google Data Studio – CrUX Report

In Summary

​​Google is increasing the correlation between SEO and Page Experience keywords day by day. With the Page Experience Algorithm Update, which will be finished by the end of August, its importance increases in the SEO industry.

The current Page Experience metrics contribute to the competition between pages as a “tiebreaker.” However, it may be the most critical metric by Google in the coming days. Therefore, we need to present the Largest Contentful Paint metric, one of the Core Web Vitals metrics in Page Experience, in an optimized way as much as possible. One of these improvements is optimizing the browser waterfall that we have just described.