With Core Web Vitals and Page Experience, publishers finally have the tools to see if their websites deliver an optimal experience. However, that still doesn’t mean that it’s easy to do.

In this article, we’re going to:

• Briefly explain what Largest Contentful Paint is.
• Breakdown Largest Contentful Paint into parts.
• Look how the Largest Contentful Paint metrics are measured.
• Show you ways to improve your Largest Contentful Paint score.

What is Largest Contentful Paint or LCP?

Largest Contentful Paint, or LCP, is one of several metrics used by Google Core Web Vitals, which analyzes how fast a webpage's main content is loaded. Core Web Vitals are metrics that form part of Google’s Page Experience to measure user experience. There are three vital metrics, such as LCP, which measures visual load; CLS (Cumulative Layout Shift), measuring visual stability; and FID (First Input Delay), which measures interactivity.

When it comes to Largest Contentful Paint, there are two elements to take into consideration:

• Page Experience: Page Experience is about looking at key relevant issues to your visitors and determining the best way to answer those questions. Additionally, speed, ease of use, and several other factors can influence how users experience your website.
• LCP: LCP answers that ‘how fast’ question.’ People who use your site don’t care when a DOM event is inspired. Users only care about when a page is usable or when they think it is usable.  LCP gives you those insights, allowing publishers to make improvements and optimize their ads.

Largest Contentful Paint Breakdown

You might wonder how it will benefit publishers, but it becomes a relatively straightforward idea once we break it down to what its parts mean. 

Paint in LCP

The “Paint” in “LCP” refers to a paint event (browser terminology), essentially, when pixels on your screen are rendered or painted in. Basically, every time a pixel changes color on your screen, that is a paint event. Like other Core Web Vital events, paint events are exposed as PerformanceEntry, then tracked and analyzed by the PerformanceObserver browser API. When the browser paints, we know about it and understand each element on the page as it is loaded. It is powerful but overwhelming, so there is a separate, more useful LCP event.

Contentful Paint

Contentful Paint refers to a paint event that explicitly draws the pixels of a handful of DOM elements. DOM (Document Object Model) is a language-independent, cross-platform interface that allows you to remove, create and change elements from a document. There are the elements measured: 

• <img> image elements;
• <svg><img></svg> image elements used with an SVG; 
• background-image: URL () elements with a background image; 
• <video> video elements and 
• display: block; block level elements (as in display block when they contain text).

Simplified Contentful Paint is a paint event that paints content.

What is Largest Contentful Paint, then? It is when the element that uses the most pixels of all the elements on our user's screen is painted. For example, if you have a large banner ad at the top of your site, and it’s the largest element on your page, LCP will measure how long it takes that element to load. Consequently, it’s critical that publishers keep their sites - and their ads - highly optimized.

How Do We Measure LCP Metrics?

LCP gets measured in seconds. It’s the number of seconds between the very first bite on the loaded page and the final Largest Contentful Paint event. As soon as users interact with a page on your website, the window of time closes, and LCP is no longer measured. The element with the highest number of seconds between the first bite and when painted is reported for the URL LCP.

Like every other part of the page experience, every page has its own LCP score. Your homepage may have less than stellar LCP, but your articles or product pages could have fantastic results. Neither page impacts how the other pages perform against this metric. All these results are generated by and collected from people using your site. In other words, if you see your site has an LCP of 1 second, that is what your real-world users are experiencing when they visit.

The most important thing to remember is that LCP is just one part of Page Experience, which is just one of the many inputs that search has inside its “secret sauce.” There isn’t a fail or pass number when we talk about these things; just a number used to compare similar sites to determine which users have a better experience.

That said, in our experience at Rev·Amp, a good goal for LCP is to score 2.5 seconds or less for at least 75% of the sessions on a page. It may sound complex, but publishers can get all their Web Vitals and Page Experience results on the Google Search Consoles Page Experience report. You can sign up for a Google Search Console free account if you aren't using it already.

Ways To Improve Your LCP Score

Now that you know how LCP is measured, we can share a few of our team’s tips on improving your score. Below, we’ll share the most common causes of poor LCP scores and how you can negate them.

Slow Server: 

We now know LCP measures from the browser's first bite until a user’s interaction. If the server is running slow or isn’t fully optimized, you’ll be inflating your LCP before the browser code starts running.

You need to minimize server logic and operations to what is essential. Ensure your CMS is caching pages rather than rebuilding them on every request. Regarding caching, ensure your static files are served with long-lived caching headers to reduce the number of files your server has to send out continuously.

Once you verify that your server is doing its best, you can move on to the next step.

Slow Networks: 

Your server can be turbocharged, and the front end is the height of performance. If your network is slow, it will undermine all of that work. That is why using a CDN (content delivery network) is essential. CDNs serve cached copies of your content on your server from their servers, allowing pages and images to be loaded much faster than usual. Most popular CDNs have data centers in population capitals around the world, but it’s always a good practice to t study your page analytics, ensuring you choose a CDN that best suits your needs.

So your servers are running smoothly, and your networks are screaming fast, but your LCP isn’t perfect. The next stop is to address slow codes.

Front End Code: 

We know LCP only measures what's on a user's screen and stops reporting once there is interaction. That means the element that triggers your LCP will likely be in that initial area (the top of your page) when the URL is first loaded (let’s call it the initial viewport). Your job is to ensure that whatever is being rendered in that initial viewport can be done as fast as possible, and, to accomplish this, we can reduce what is loaded.

One way to improve your LCP is to remove any scripts and style sheets in the head of your documents not being used on the page. Those can slow or block the browser while rendering what is being used and eating into your critical LCP budget.

Additionally, unnecessary or overly complex and unoptimized scripts can have a severe negative impact on your score. If you’re working with an SSP or a monetization partner, ensure that the codes provided are optimized correctly. Using multiple providers may also want to ensure conflicting codes cause no errors. Finally, always remove unused code whenever possible and employ lazy loading on your ads 

Work with Quality SSPs and Ad Service Providers

Few things, like poorly optimized ads, can tank your user’s experience and CWV metrics. Unfortunately, ad code is only as good as your service provider can make them. That’s why it’s absolutely critical to work with a reputable and capable monetization partner.

Here at Rev·Amp, we have created a lightweight ad solution to boost publishers' revenue by meeting their specific needs. We understand how valuable users are and how fickle they can be. That’s why we’ve developed tools and methods to showcase quality ads without user experience disruptions. 

Conclusion 

Although metrics such as First Contentful Paint and TTFB also measure your Page Experience, they don’t render when your page is meaningful to users. As a publisher, you want to benefit from the 25% Performance score that LCP accounts for; therefore, it makes sense why it is probably one of the most important metrics to optimize. A good LCP score will ensure you provide the best user experience, ensuring interaction on your pages. More interaction means more conversions for you!