Learn how to fix most instances of LCP (Largest Contentful Paint) failing in your Core Web Vitals assessment.
What Are Core Web Vitals
Core Web Vitals are Google's way of measuring the end-user experience of a page.
What sets Core Web Vitals apart is that, unlike other page experience measurements, Core Web Vitals are not the result of a test but is aggregated data from the Chrome User Experience (CrUX) report.
The CrUX report gathers anonymized metrics on performance statistics from actual Chrome users visiting a webpage. When enough data is available from enough pages on a website, that website will now have Core Web Vitals, which may be taken into account for ranking information. If there isn't enough data, the site doesn't have Core Web Vitals and Google will not use any other data to substitute it.
Optimizing for Core Web Vitals tends to be a cruel game of whack-a-mole at best and a horribly convoluted technical whodunnit at most other times.
One of the big whack-a-mole Core Web Vitals metrics can be LCP.
What is LCP
LCP stands for Largest Contentful Paint, which as an answer to "what is it" is not helpful at all.
The way we explain it to clients is to take your smartphone. Open your browser. Visit a webpage. Any page, doesn't matter. Now, keep your phone at arm length distance, look at the page, and ask yourself "what is the largest thing I see on my screen?"
That thing is the Largest Contentful Paint. It's that simple. it can be a headline, it can be a hero image, it can be a paragraph of text, but it is the largest "thing" on the screen. And so, in a way, Google finds it a good approximation for how fast the page is showing. "If this is the largest thing then therefore when that largest thing is there, the majority of the first view is ready", it reasons.
The Fastest LCP is Text
Text is the most light-weight thing on any webpage. It is the smallest thing to download, so to say.
And so, the way to get the fastest LCP tends to be to use text.
If the largest thing on your screen is text-based and it has bad LCP, you're in for some technical detective work because almost always you have so-called render-blocking resources; "stuff" the browser has to download before it can even begin to show anything.
Fastest Image LCP
That's all fine and dandy, but we like our web pages to be pretty, and so 9 out of 10 times, the Largest Contentful Paint in our screen is an image, often a so-called "hero" image.
Naturally we cover our basics in trying to get this image out as fast as possible. We right-size it: no server a 1024x724 pixels images only to be shown at size of 256x181 pixels. And of course we use a compressed filetype, like JPEG or Webp (pro-tip: use a plugin to automatically optimize image files uploaded to your site!).
But then... How do we get this image on the web page?
The two absolute fastest HTML tags to do so are either <img> or <poster> .
When a browser starts to render a web page, it doesn't just go line-by-line. Parts of it -- the pre-load scanner-- skip ahead, look ahead, and see what can be done already.
One of those processes looks for images it can already start downloading. And it does so by looking for <img> and <poster> HTML tags.
Boom - fast(er) delivery!
The Slowest Image LCP
There's also an insanely slow way of delivering such an image, and that's by not using an HTML tag but by using the background-image, a CSS property.
While this thing lets developers and designers do all kinds of cool stuff without too much coding, the pre-load scanner also doesn't see this thing, and so it doesn't already grab and download the image.
Instead, the browser is happily building the page when --suddenly!-- it realizes it needs this background image! Crap! Let's quickly download it!
When your LCP fails, 9/10 times it's because your hero-image is loaded as a background-image.
It's that simple.
How to solve slow image LCP
There is a reason your designer and developer is using that background-image option, and having them retool the setup of your website is not going to be fun, not in the least because it is probably going to cost a ton of money.
But there is a very quick, very effective fix. What we call a "penny solution for a thousand-dollar problem."
Remember that browser pre-load scanner? We can tell that preload scanner about the background-image we're going to use....and it will start downloading it ASAP.
The way to do so? With this one line of code:
<link rel="preload" as="image" href="your-image.jpg">
Tell your developer to put that in the <head> section of the web page (they'll know what that is!), populated with the correct name and path of the image, and your image LCP most of the time will be fixed.
