Largest Contentful Paint: Optimizing for LCP

woman using laptop and taking notes

Publishers have been hearing a lot about the new Google Page Experience algorithm that will begin factoring into rankings in May 2021 — and for good reason.

Pagespeed is always top of mind at Mediavine, but with this Google change on the horizon, it should be a priority for everyone.

To that end, we’re here to break down all of Google’s pagespeed ranking signals — old and new.

Today we’re tackling Largest Contentful Paint, one of Google’s three Core Web Vitals that determine Page Experience.

Leif Lessons

  • Largest Contentful Paint (LCP) is one of three Core Web Vitals, part of the new Google Page Experience algorithm, which will start to be a ranking factor in May 2021.
  • LCP is a measure — in seconds — of how long it takes for the biggest element in your first screen view (before the scroll) to render.
  • To measure LCP, use PageSpeed Insights on individual blog posts and pages, not just on your homepage. Aim to have your largest object render in 2.5 seconds (or less).
  • Ways to optimize for LCP: Conduct a plugin audit to see what may be slowing your site down, use a well-optimized theme (like Trellis!), change your post formatting.
  • Optimizing your content for Above the Fold SEO is the most effective strategy for optimizing for LCP.
  • Use Web and System Safe fonts to speed up load times.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is word salad, that’s for sure.

It’s defined as how long the largest piece of content in the first screen view of a web page takes to “draw” and is measured in seconds.

Let’s try that again in more human terms.

As we often say, pagespeed is the highest priority but it’s also a relatively subjective term.

How do you determine if a page is fast?

In Google’s opinion (and Mediavine’s), what matters is that a site feels fast for the user, not a pagespeed score.

Google has always measured pagespeed based on how fast a page loads in the initial screen view on a mobile phone or whatever is showing in your desktop browser before you begin to scroll.

First impressions are everything, as the saying goes, but LCP represents a change from how this has traditionally been assessed.

Previously, Google measured pagespeed by how long the First Contentful Paint (FCP), or the first piece of content, took to render.

However, they later concluded that this wasn’t the most useful. As a user, do you only want part of the first screen view to render?

No, and therefore Google adjusted accordingly.

Now, LCP measures how long it takes for the biggest element in that screen — measured by its height in pixels — to load. In practical terms, if you have a big logo or large photo in the first screen view, that’s most likely going to be the largest element.

If you have a wall of text, then it’s going to be that. Google’s goal with LCP is to measure whatever your users are most likely going to notice first as a page is loading. Whatever will feel like the page is ready for them.

graphic pointing at largest content on a site

How Do You Measure LCP?

Luckily, unlike Cumulative Layout Shift, measuring LCP is fairly simple. No Chrome extensions are required; just the handy PageSpeed Insights tool and potentially a little bit of Google Search Console.

When you run a particular webpage through PageSpeed Insights, there will be a section called “Lab Data.”

Lab Data is what PageSpeed Insights detects when running on your site and performing a simulation of a user viewing your page.

Note: You’ll want to run PageSpeed Insights on individual blog posts or pages, not just your homepage!

As you go through your top posts (we suggest you start with those), you’ll likely see varying LCP scores. You’ll also want to check both tabs — mobile and desktop — because those results will also differ.

Both have the same goal, though: making sure your Largest Contentful Paint (object) renders within 2.5 seconds.

You’ll also want to check the Origin Summary which shows how your overall domain is performing for LCP in the real world.

LCP score on pagespeed insights

How long does it take the average reader browsing your website with Chrome to see your LCP? This is how you find out.

Even better: If you’re browsing a page with enough traffic, such as your homepage, you might also see Field Data which shows you how that particular page is doing with real world traffic!

This real world usage, as reported by Field Data and Origin Summary, will also appear in Google Search Console and is the best representation of what Google will use in its ranking algorithm.

It’s important to use PageSpeed Insights Lab Data to help you debug given that it’s using real-time information. Keep in mind though that Origin Summary and Field Data are only showing you a 30-day average.

In other words, immediate actions may take time to show results.

It’s also important to note that you can use Chrome Developer Tools and Lighthouse, the tool which powers PageSpeed Insights, in order to measure the same lab results.

How Do You Optimize For LCP?

Knowing how to measure your Largest Contentful Paint is great, but what do you do about it if you’re not already perfect?

(As much as we love you, most likely, you’re not.)

You’ll probably see a fair number of posts failing in Google Search Console and/or by playing around with PageSpeed Insights.

How do you fix this?

First, we will refer you to all previous Mediavine pagespeed resources and advice because there’s lots of generally helpful guidance there.

More specifically, we recommend a third-party JavaScript and plugin audit to see what’s slowing your site down and how badly.

You’ll also need a well-optimized theme (say, Trellis by Mediavine), plus optimized plugins (or a theme that does it for you … have we introduced you to this Trellis thing everyone’s been talking about?).

Beyond the usual speed tricks, mastering LCP has a much less technical, easier component that any publisher can take on: Change your post formatting.

Pagespeed tips vary widely in terms of how complex they are and how technical you need to get, but optimizing for LCP is pretty simple.

Assuming your theme is well-designed, your content is going to be what impacts LCP most and no one knows that better than you.

Remember what LCP is measuring: How long does your largest piece of content take to load. How can you speed that up?

Optimizing LCP with Content

You guessed it: Improving the time it takes your largest piece of content to load can be as easy as changing up that content!

The most effective strategy for optimizing for LCP is very similar to our Above the Fold SEO advice — lead with text.

If your first screen view of content on a phone is all text, which therefore pushes the first image below the fold, that’s going to mean lightning-fast load times for users — and passing LCP scores to follow.

As for how much text you need to accomplish this, we generally say that 3-4 paragraphs of text should have you covered.

If you’re following our advice — using shorter sentences and paragraphs (e.g. pressing the Enter key early and often), increasing font size and line height to optimize for accessibility — it shouldn’t take more than that.

We love it when SEO, accessibility and pagespeed come together!

first screen load shows all text, image on the next one

System / Web Safe Fonts

One important caveat to all this: Before your text can display, you still have to wait for whatever font you’re using to load.

While faster than an image for sure, it still won’t be instantaneous if you’re using something like Google Fonts.

This is why with Trellis, we recommend that publishers stick to System fonts and Web Safe fonts whenever possible.

If you’re running System fonts, a well optimized theme, start with text and push images down, you’ll pass LCP with flying colors.

Mastering LCP, along with its fellow metrics CLS and FID, will place you among the elite percentage of publishers passing Core Web Vitals.

You can do this, and we’re here to help every step of the way. Together, we can be excited for — and not scared of — the May Page Experience algorithm.

Related Posts