Largest Contentful Paint: What is it?

Largest Contentful Paint: What is it?

What is Largest Contentful Paint?

The Largest Contentful Paint (LCP) metric measures the time it takes to render the largest image or text block visible inside the viewport compared to when the page first loaded.

Offscreen components are not included in the Largest Contentful Paint, which is an important milestone in the lifecycle of a page. Even if the largest element is later removed from the page DOM once discovered, or when images of the same size all qualify, Largest Contentful Paint identifies the largest element.

What is a Good Largest Contentful Paint Score?

Sites should aim for a Largest Contentful Paint time of 2.5 seconds or less to provide a good user experience. To check that you’re meeting this goal for the majority of your users, the 75th percentile of page loads, split by mobile and desktop devices, is a good benchmark to aim for.

The time it takes for a page’s main content to load, according to Google, influences how quickly users perceive your site to load.

If you’re wondering what a good Largest Contentful Paint time is, here are the following Google’s thresholds:

  • Good – 2.5 seconds or less.
  • Needs Improvement – 4.0 seconds or less.
  • Poor – 4.0 seconds or more.

Largest Contentful Paint measures how long it takes for the largest “content element” on your page (e.g., hero image, heading text, etc.) to become visible within your visitor’s viewport.

What Elements are Considered?

The types of elements considered for Largest Contentful Paint are currently listed in the Largest Contentful Paint API:

  • <img> elements
  • <image> elements inside an <svg> element
  • <video> elements (image from the poster is used)
  • The url() function is used to load a background image on an element (as opposed to a CSS gradient)
  • Block-level elements (such as <h1>, <h2>, <div>, <ul>, <table>, etc.) consist of text nodes or other inline-level text elements children.

Page Loads Metric (LCP)

Largest Contentful Paint measures how quickly visitors can consume substantial content on your website. The assumption is that loading the largest content element on your page, such as a carousel or hero image, will give your visitors a good idea of how quickly your page loads.

Largest Contenful Paint - Load TimeLargest Contenful Paint - Load Time

LCP metric that measures how quickly your page’s largest content element loads.

The Impact of the Largest Contentful Paint on Performance Score

Largest Contentful Paint is one of the most important metrics to optimize as a Web Vital metric, accounting for 25% of the Performance Score.

While other page speed metrics like First Contentful Paint (FCP) and Time-to-First-Byte (TTFB) are still useful, Largest Contentful Paint is more representative of your visitors’ real-world expectations when visiting your website.

Largest Contentful Paint - Performance ScoreLargest Contentful Paint - Performance Score

 

The appearance of a faster LCP is that the page loaded faster.
The green website appears to be more visually complete than the red website at 0.2s.

Optimizing your Largest Contentful Paint can often result in the greatest improvement in web performance for your site, both in terms of Performance Score and the perception of performance by your visitors.

What Causes Poor Largest Contentful Paint?

  • Slow Server Response Times
    • A slow server will affect all of your website’s loading speed metrics. Even if all of your other resources are optimized, if your server isn’t operating well, it’ll all be for none.
  • Render-blocking JavaScript and CSS
    • If you constantly adding new plugins to your website or choosing a theme with a lot of design elements, you might want to reconsider. The use of JavaScript and CSS, particularly above the fold, has a significant impact on loading speeds. When a browser encounters synchronous scripts and external stylesheets, the rendering of a web page is delayed.
  • Resource Load Times
    • Above-the-fold images, videos, and text-block features have a direct impact on Largest Contentful Paint. To decrease loading times, large components like hero banners must be optimized.
  • Client-side Rendering
    • Many web developers prefer client-side rendering. It renders web pages directly in the browser using JavaScript. However, JavaScript has a significant influence on Largest Contentful Paint since the browser must first load all critical JavaScript before it can finish rendering.

Largest Contentful Paint - Poor LCP ScoreLargest Contentful Paint - Poor LCP Score

An example of a poor Largest Contentful Paint.

How to Optimize Largest Contentful Paint?

Improve your Largest Contentful Paint timing by using the best web development principles like:

  • Improve Server Response Time

    • When it comes to server optimization, the first thing you should look into is your web hosting. Caching and the use of a Content Delivery Network (CDN) can also help your server run better. Both will minimize the time it takes for a browser to load a web page’s content.
  • Optimize Images

    • One of the most common causes of poor Largest Contentful Paint is unoptimized images. The first thing you should do is make sure that any images above the fold, such as hero banners, carousels, banners, and featured images, are optimized.
    • You may compress photos using a variety of tools before uploading them. You may also use plugins to compress images on your website. The burden is reduced by reducing the picture file size. It’s also a good idea to utilize current image formats.
  • Defer Non-Critical JavaScript and CSS

    • When optimizing for Largest Contentful Paint, keep in mind that the objective is to provide the user with as much of the above-the-fold content as possible. The first thing a user sees on your website when it loads is what’s called above-the-fold.
    • So instead of loading scripts and stylesheets above-the-fold, place them below-the-fold so that the browser can focus on what matters most, the web page’s main content.
  • Minify CSS and Minimize Critical JavaScript

    • When reducing unnecessary lines and characters from CSS and JavaScript, the word “minify” is used. In your stylesheets and scripts, look for unused and unnecessary lines and characters. It may not appear to be much, but every little bit helps to reduce your website’s loading times.
    • But with JavaScript, some of your website’s content may not load until all scripts have finished loading. You should get rid of some of your scripts that aren’t needed.

Other rendering metrics

One of the rendering measures is the largest contentful paint. It captures the exact time that a certain section of a web page is rendered in the user’s browser.

Largest Contentful Paint - Rendering MetricsLargest Contentful Paint - Rendering Metrics

An example of a rendered page.

While Google chose Largest Contentful Paint to include in its ranking algorithm, there are a number of other rendering metrics you can work on:

  • Load event is fired when the whole page has loaded,
  • First paint refers to the point at which the first pixel renders on a screen after a user navigates to a web page.
  • First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM,
  • First Meaningful Paint is the time it takes for a page’s primary content to appear on the screen.
  • DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Fixing Largest Contentful Paint Doesn’t Have To Be Challenging

While fixing Largest Contentful Paint is a key component to passing Core Web Vitals, in order to have a website that loads fast for a great user experience, can be challenging, it doesn’t have to be.

Improving your time to first byte, optimizing your images, deferring non-critical javascript and css, and minifying CSS and javascript resources can all be automated.

Pegasaas Accelerator WP is our Web Performance Optimization plugin for WordPress that automates all of these processes. Save yourself hours of learning and time managing your optimizations with Pegasaas. Sign up today for our free 14 day trial.

Comments are closed.