Web Vitals: What is Largest Contentful Paint?

It measures page loading performance

Largest Contentful Paint, or 'LCP', evaluates a your web page loading performance.

LCP is a metric which measures the time at which the largest image or block of text is visible within the viewport.

This 'above the fold' image or text element is considered as important for the user and the loading performance of you're website.

Largest Contentful Paint is measured in seconds.

What is largest contentful paint target time?

To provide users a good experience, you should aim for a first input delay of 2.5 seconds or less.

Largest Contentful Paint: Google Scoring Ranges

What elements are considered in LCP scoring?

The following elements are considered for largest consideration paint:

  • <img> elements
  • <image> elements within an <svg> element
  • <video> elements (the poster image is used)
  • Block-level elements containing text nodes or other inline-level text elements children.
  • An element with a CSS background image loaded via url() (elements with CSS gradients are not considered)
Note, restricting the elements to this limited set was intentional in order to keep things simple in the beginning. Additional elements (e.g. <svg>, <video>) may be added in the future as more research is conducted.

My largest contentful paint score is above 2.5 seconds is this OK?

If your LCP score is above 2.5s then Google will label the scoring as Needs improvement and if it is above 4s then your score will be labeled Poor. You should try to ensure most of you users get an LCP score of 2.5s or under. Google suggests the 75th percentile of page loads, segmented across all devices as a good threshold.

If you're worried about how your largest contentful paint (LCP) scores will impact your search rankings, then use our SERP speed comparison tool to compare how other websites ranking for your target keywords / vertical measure up.

How can I optimize LCP time?

According to Google, largest contentful paint is primarily effected by four factors:

  1. Slow server response time
  2. Render-blocking JavaScript and CSS
  3. Resource load times
  4. Client-side rendering

We'll cover ideas and solutions you can use to optimize for each of the LCP factors below.

Slow server response time

Slow server response time is the time which it takes your server to respond to requests from the users browser, there is a metric for this called Time To First Byte (TTFB) which can be helpful for assessing your server response time.

If you see your server is responding slowly then this is a good place to start with optimizing for LCP. But it is also one of the most difficult to optimize.

Common reasons for slow server response are:

  • Low quality hosting - if you are hosting your website on cheap or shared hosting you may find it is not as responsive as a more premium hosting platform
  • Old technology - as the web evolves, technologies powering it also get better and faster! If you're running a site on a server using older technology stacks, it can result in a slower response time.
  • Inefficient backend code - inefficient code can cause the server response to become slow (for example if you website has backend logic which returns products or articles).
  • No CDN / Cache - using a CDN and caching can have dramatic impact on server response time if you don't currently use a CDN then have a look at your options. There is free CDNs available.

Render-blocking JavaScript and CSS

Blocking script tags in the head of your website can code will cause the browser to pause parsing of your code until the file has been loaded and evaluated. You should move <script> tags to the bottom of your HTML (just above the closing body tag - </body>).

You may also have CSS loaded in the head of your website and although this is where you want your style sheets to be loaded. If these are large files they can also impact LCP times. A better way of loading CSS is to inline the critical CSS (the styles needed for the 'above-the-fold' or 'hero' section of your page), and then async load the remaining CSS.

Easy Async CSS Loading:

<link href="/myCSSFile.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link href="/myCSSFile.min.css" rel="stylesheet" /></noscript>

Notes: this should be used with caution, if your async load an entire page's CSS then you will cause negative impact to your cumlative layout shift since the browser will load the HTML without styles and then apply the styling once the CSS file is loaded, causing major shifts if element positioning.

Resource load times

Having large resources on your page will dramatically reduce load times and if the element flagged as LCP is heavy then this will cause a slow largest contentful paint. You should try compressing any images you have 'above the fold' as well as providing multiple sizes for the image to be loaded at a relevant size per device.

For example if you have a full width image in your header, you should provide multiple 'desktop' resolutions as well as tablet and one or two mobile size variations. With these variations and each image size being compressed you will drastically reduce the time needed to load the image and improve your LCP.

Client-side rendering

If your site is running as a SPA and using client side rendering (HTML generated through JavaScript), then you will likely have a poor LCP, because the browser needs to load and parse the JavaScript before it can write HTML and apply styling (or load images if using images).

The best way to improve load times is by pre-rendering the code within your build pipeline. You could also look at a static site generator such as Gatsby (React) or Nuxt (Vue) which will produce the HTML for you in build and then hydrate the app with your JavaScript.

Another option (which won't impact as much as pre-rendering) is to preload the initial JS required for the app to load.

And (this is good practice for any SPA) you should be splitting code and lazy loading as required.

Category: Web Vitals
Published:
Nick McBurney - Founder of SERPFast.com
Author: Nick McBurney

Founder of SERPFast.com and Lead Frontend Developer with a passion for site speed.