What Is Largest Contentful Paint: An Easy Explanation via @sejournal, @vahandev

Largest Contentful Paint (LCP) is simply a Google idiosyncratic acquisition metric integrated into ranking systems successful 2021.

LCP is 1 of the 3 Core Web Vitals (CWV) metrics that way method show metrics that interaction idiosyncratic experience.

Core Web Vitals beryllium paradoxically, with Google providing guidance highlighting their value but downplaying their interaction connected rankings.

LCP, similar the different CWV signals, is utile for diagnosing method issues and ensuring your website meets a basal level of functionality for users.

What Is Largest Contentful Paint?

LCP is simply a measurement of however agelong it takes for the main contented of a leafage to download and beryllium acceptable to beryllium interacted with.

Specifically, the clip it takes from leafage load initiation to the rendering of the largest representation oregon artifact of substance wrong the idiosyncratic viewport. Anything beneath the fold doesn’t count.

Images, video poster images, inheritance images, and block-level substance elements similar paragraph tags are emblematic elements measured.

LCP consists of the pursuing sub-metrics:

• Time to First Byte (TTFB).
• Resource load delay.
• Resource load duration.
• Element render delay.

Optimizing for LCP means optimizing for each of these metrics, truthful it takes little than 2.5 seconds to load and show LCP resources.

Here is simply a threshold standard for your reference:

LCP thresholds

Let’s dive into what these sub-metrics mean and however you tin improve.

Time To First Byte (TTFB)

TTFB is the server effect clip and measures the clip it takes for the user’s browser to person the archetypal byte of information from your server. This includes DNS lookup time, the clip it takes to process requests by server, and redirects.

Optimizing TTFB tin importantly trim the wide load clip and amended LCP.

Server effect clip mostly depends on:

• Database queries.
• CDN cache misses.
• Inefficient server-side rendering.
• Hosting.

Let’s reappraisal each:

1. Database Queries

If your effect clip is high, effort to place the source.

For example, it whitethorn beryllium owed to poorly optimized queries oregon a precocious measurement of queries slowing down the server’s effect time. If you person a MySQL database, you tin log dilatory queries to find which queries are slow.

If you person a WordPress website, you tin usage the Query Monitor plugin to spot however overmuch clip SQL queries take.

Other large tools are Blackfire oregon Newrelic, which bash not beryllium connected the CMS oregon stack you use, but necessitate installation connected your hosting/server.

2. CDN Cache Misses

A CDN cache miss occurs erstwhile a requested assets is not recovered successful the CDN’s cache, and the petition is forwarded to fetch from the root server. This process takes much time, starring to accrued latency and longer load times for the extremity user.

Usually, your CDN supplier has a study connected however galore cache misses you have.

Example of CDN cache report

If you observe a precocious percent ( >10% ) of cache misses, you whitethorn request to interaction your CDN supplier oregon hosting enactment successful lawsuit you person managed hosting with cache integrated to lick the issue.

One crushed that whitethorn origin cache misses is erstwhile you person a hunt spam attack.

For example, a twelve spammy domains nexus to your interior hunt pages with random spammy queries similar [/?q=甘肃代], which are not cached due to the fact that the hunt word is antithetic each time. The contented is that Googlebot aggressively crawls them, which whitethorn origin precocious server effect times and cache misses.

In that case, and overall, it is simply a good signifier to block hunt oregon facets URLs via robots.txt. But erstwhile you artifact them via robots.txt, you whitethorn find those URLs to beryllium indexed due to the fact that they person backlinks from low-quality websites.

However, don’t beryllium afraid. John Mueller said it would beryllium cleared successful time.

Here is simply a real-life illustration from the hunt console of precocious server effect clip (TTFB) caused by cache misses:

Crawl spike of 404 hunt pages that person precocious server effect time

3. Inefficient Server Side Rendering

You whitethorn person definite components connected your website that beryllium connected third-party APIs.

For example, you’ve seen reads and shares numbers connected SEJ’s articles. We fetch those numbers from antithetic APIs, but alternatively of fetching them erstwhile a petition is made to the server, we prefetch them and store them successful our database for faster display.

Imagine if we link to stock number and GA4 APIs erstwhile a petition is made to the server. Each petition takes astir 300-500 sclerosis to execute, and we would adhd astir ~1,000 sclerosis hold owed to inefficient server-side rendering. So, marque definite your backend is optimized.

4. Hosting

Be alert that hosting is highly important for debased TTFB. By choosing the close hosting, you whitethorn beryllium capable to trim your TTFB by 2 to 3 times.

Choose hosting with CDN and caching integrated into the system. This volition assistance you debar purchasing a CDN separately and prevention clip maintaining it.

So, investing successful the close hosting volition wage off.

Read much elaborate guidance:

• Your Guide To Hosting Types For Your WordPress Website
• How Does Web Hosting Affect SEO & Which One is Best?

Now, let’s look into different metrics mentioned supra that lend to LCP.

Resource Load Delay

Resource load hold is the clip it takes for the browser to find and commencement downloading the LCP resource.

For example, if you person a inheritance representation connected your leader conception that requires CSS files to load to beryllium identified, determination volition beryllium a hold adjacent to the clip the browser needs to download the CSS record to commencement downloading the LCP image.

In the lawsuit erstwhile the LCP constituent is simply a substance block, this clip is zero.

By optimizing however rapidly these resources are identified and loaded, you tin amended the clip it takes to show captious content. One mode to bash this is to preload some CSS files and LCP images by mounting fetchpriority=”high” to the representation truthful it starts downloading the CSS file.

But a amended attack – if you person capable power implicit the website – is to inline the captious CSS required for supra the fold, truthful the browser doesn’t walk clip downloading the CSS file. This saves bandwidth and volition preload lone the image.

Of course, it’s adjacent amended if you plan webpages to debar leader images oregon sliders, arsenic those usually don’t adhd value, and users thin to scroll past them since they are distracting.

Another large origin contributing to load hold is redirects.

If you person outer backlinks with redirects, there’s not overmuch you tin do. But you person power implicit your interior links, truthful effort to find interior links with redirects, usually due to the fact that of missing trailing slashes, non-WWW versions, oregon changed URLs, and regenerate them with existent destinations.

There are a fig of technical SEO tools you tin usage to crawl your website and find redirects to beryllium replaced.

Resource Load Duration

Resource load duration refers to the existent clip spent downloading the LCP resource.

Even if the browser rapidly finds and starts downloading resources, dilatory download speeds tin inactive impact LCP negatively. It depends connected the size of the resources, the server’s web transportation speed, and the user’s web conditions.

You tin trim assets load duration by implementing:

• WebP format.
• Properly sized images (make the intrinsic size of the representation lucifer the disposable size).
• Load prioritization.
• CDN.

Element Render Delay

Element render hold is the clip it takes for the browser to process and render the LCP element.

This metric is influenced by the complexity of your HTML, CSS, and JavaScript.

Minimizing render-blocking resources and optimizing your codification tin assistance trim this delay. However, it whitethorn hap that you person dense JavaScript scripting running, which blocks the main thread, and the rendering of the LCP constituent is delayed until those tasks are completed.

Here is wherever debased values of the Total Blocking Time (TBT) metric are important, arsenic it measures the full clip during which the main thread is blocked by agelong tasks connected leafage load, indicating the beingness of dense scripts that tin delay rendering and responsiveness.

One mode you tin amended not lone load duration and hold but wide each CWV metrics erstwhile users navigate wrong your website is to instrumentality speculation rules API for aboriginal navigations. By prerendering pages arsenic users rodent implicit links oregon pages they volition astir apt navigate, you tin marque your pages load instantaneously.

Beware These Scoring “Gotchas”

All elements successful the user’s surface (the viewport) are utilized to cipher LCP. That means that images rendered off-screen and past shifted into the layout, erstwhile rendered, whitethorn not number arsenic portion of the Largest Contentful Paint score.

On the other end, elements starting successful the idiosyncratic viewport and past getting pushed off-screen whitethorn beryllium counted arsenic portion of the LCP calculation.

How To Measure The LCP Score

There are 2 kinds of scoring tools. The archetypal is called Field Tools, and the 2nd is called Lab Tools.

Field tools are existent measurements of a site.

Lab tools springiness a virtual people based connected a simulated crawl utilizing algorithms that approximate Internet conditions that a emblematic mobile telephone idiosyncratic mightiness encounter.

Here is 1 mode you tin find LCP resources and measurement the clip to show them via DevTools > Performance report:

You tin work much successful our in-depth usher connected how to measurement CWV metrics, wherever you tin larn however to troubleshoot not lone LCP but different metrics altogether.

LCP Optimization Is A Much More In-Depth Subject

Improving LCP is simply a important measurement toward improving CVW, but it tin beryllium the astir challenging CWV metric to optimize.

LCP consists of aggregate layers of sub-metrics, each requiring a thorough knowing for effectual optimization.

This usher has fixed you a basal thought of improving LCP, and the insights you’ve gained frankincense acold volition assistance you marque important improvements.

But there’s inactive much to learn. Optimizing each sub-metric is simply a nuanced science. Stay tuned, arsenic we’ll people in-depth guides dedicated to optimizing each sub-metric.

More resources:

• A Technical SEO Guide To Lighthouse Performance Metrics
• Everything We Know About IndexNow So Far
• Core Web Vitals: A Complete Guide

Featured representation credit: BestForBest/Shutterstock