AdThrive

Ad Optimization and Management for Bloggers

Marie King

What is Largest Contentful Paint (LCP)?

4–5 minutes to read

LinkedIn0

Largest Contentful Paint (LCP) measures how fast the largest element in the viewport of a page loads. Depending on the page, this might be an image, video, or text.

LCP homes in on what the reader truly values when it comes to page load and page speed. It’s a good indicator of perceived load speed — how long it takes the page to load from the viewpoint of your reader.

cartoon infographic of the AdThrive page with a loading bar and a man next to the computer

In the past, metrics like DOMContentLoaded, Time to First Byte (TTFB), and First Contentful Paint have all attempted to put numbers around this moment in user experience, but they fall short of being able to accurately measure what the user is seeing on their screen. 

So what might affect a page’s LCP score? Let’s take a look…  

Elements that are considered for LCP

LCP looks at the elements that load above-the-fold, so that narrows down our search to the top of the page. 

cartoon infographic of four phones with page loading elements

According to Google, the following above-the-fold page elements can be used for your LCP score:

Images:

  • <img> elements
  • <image> elements inside an <svg> element
  • An element with a background image loaded via the url() function (as opposed to a CSS gradient)

Videos:

  • <video> elements (if specified, the poster image is used to measure LCP)

Text:

  • Block-level elements that contain text nodes or other inline-level text elements children

If your head is spinning from that technical jargon, not to worry! There are some simple ways to address LCP that DON’T require you to dive into the code on your page. 

The short & sweet version: above-the-fold images, background images, videos, and complex text blocks can contribute to LCP, so keep them optimized.

What causes poor LCP?

  • Heavy or poorly optimized full-screen image downloads
  • The order for loading content isn’t optimized
  • Delays earlier in the page-load lifecycle, such as
    • Slow server response times
    • Render-blocking JavaScript and CSS
    • Client-side rendering
  • Slow resource load times
  • Applying main content images as background images

How to measure and assess your LCP score

You can measure LCP with a variety of tools. Our guide to Core Web Vitals measurement tools looks at each of these in detail and shares what kind of data they offer.

Tip: Start in Google Search Console to assess the big picture LCP issues your site is experiencing. Search Console will show you an aggregate score for your entire site which can help you prioritize overall issues before looking at individual pages one-by-one. 

In terms of LCP scores, you want to aim for a load time of less than 2.5 seconds to be classified as “good” by Google. Slower than 4 seconds results in a “poor” score.

Image of LCP with a bar going from red to green with time metrics

Room for improvement? First identify the issues affecting LCP.

To improve your LCP scores, first you’ll need to identify what’s causing issues, so you know what changes to make on your site. The testing tools and results can get into the technical weeds, so if you’re less tech-savvy this might be a great time to hand over the reins to your developer to help optimize.

Here are some common issues and recommended improvements:

Slow server response times? Optimize your server, use a CDN, cache your site’s assets, serve HTML pages cache-first, and establish third-party connections early.

Render-blocking JavaScript and CSS? Minify your CSS and defer non-critical CSS and inline critical CSS.

Slow-loading resources? Optimize your images, preload resources, and compress text files.

Issues on client-side rendering? Minify critical JavaScript and use server-side rendering.

Getting to “Good”: four steps to improve your LCP score

If your LCP score needs a boost, the good news is that there is plenty you can do to move the needle. 

Here’s a handy checklist of resources you can share with your developer to address the various issues that impact LCP.

1. Upgrade your hosting plan

2. Optimize your images 

  • Compress images before you upload them to your site, or use a plugin that compresses images when you upload them
  • Serve images in WebP format (as opposed to PNG or JPEG)
  • Use responsive images and size your images correctly

Check out this article that has tips for image optimization! 

3. Improve slow server response times

4. Clean up your script

This Google guide breaks these down further into actionable steps!

Dig deeper on LCP:

Your Core Web Vitals roadmap

Knowledge is power! Start here:

Dig deeper to understand each metric and why it’s important for user experience:

Benchmark your site’s Core Web Vitals so you understand your starting position:

Make a step-by-step plan to improve Core Web Vitals:

Tackle low-hanging fruit:

Marie King

About Marie King

As Director of Publisher Insights, Marie gets to support AdThrive publishers by digging into data to find and share interesting findings to help our publishers continue to thrive! With almost a decade working with many types of publishers, Marie is thrilled to be part of the AdThrive team working with and helping the publishers she’s been obsessed with for years. A Chicago native, she now lives in Denver with her husband, dog, three cats, and an extensive collection of board games.