fbpx
Slow computer

Google Core Web Vitals: What is Largest Contentful Paint (LCP)?

Slow computer

Google Core Web Vitals: What is Largest Contentful Paint (LCP)?

In the first of three blogs about Google Core Web Vitals and its three fundamental aspects, today we’re going to look at Largest Contentful Paint.

First of all though, let’s explain what Core Web Vitals are – they are a subset of metrics that apply to all web pages. Google has been pushing for an improved, user-centric web landscape, and offers the tools to measure such metrics with tools like Google Analytics and Search Console. Core Web Vitals focuses on the metrics that matter the most – hence the name Core Web Vitals – and Google has announced that these factors will affect page rankings from May 2021.

The fundamentals of Core Web Vitals are bound to change over time, but for 2021, there are three aspects: Loading, Interactivity and Visual Stability. The first of these, loading, is addressed in Largest Contentful Paint, better known as LCP.

Picture1

LCP is simply a web performance metric that reports on how local it takes the largest text block or image visible on the window to render. Sites should aim for within two and a half seconds of when the page starts to load.

There have been prior metrics like First Paint or First Contentful Paint, but these have issues in that metrics like splash screens would be what’s measured. There are only certain types of elements that are considered by the LCP application programming interface (API), including such code as img, image inside svg, video, url() and block level elements containing text. This list was intentionally limited to help create the API, but going forward, additional elements may be added as the research continues.

If any of the elements above are included in the first view of a website, the time it takes for the largest of them to load is the LCP time for your site.

When looking at the LCP of a website, Google takes multiple screenshots as the site loads. You can use tools to see which elements are causing the site to slow over the course of its loading, and Google highlights the elements as screenshots are taken to show which element is causing your LCP.

Picture2

Picture3

How to improve LCP

There are plenty of ways to help improve the LCP metric of a website, such as optimising your images or JavaScript, or using an image CDN (content delivery network). The focus of any website has to be its users and optimising for speed is a sure way to improve your LCP timing and climb the search engine optimisation (SEO) ranks. Google has some fantastic and in-depth technical documentation that can aid you with this.

One of LCP’s focuses is to make the web a more compliant place, and simply choosing the next-gen image formats like WebP helps boost loading speed and carry your website into the future of mobile.

The main ways of improving LCP times are to optimise CSS, images, web fonts and JavaScript. However, in my reading, some of the most technical parts apply instant loading with the PRPL pattern and optimising of the Critical Rendering Path.

PRPL pattern

PRPL is an abbrevation used to describe a pattern used to make web pages load faster:

• Push (or preload) the most important resources
• Render the initial route as soon as possible
• Pre-cache remaining assets
• Lazy load other routes and non-critical assets

Critical Rendering Path

Optimising the critical rendering path means the time to first render pages is significantly improved. Within the example below, you can see how optimising for performance is about understanding what happens in the intermediate steps of a website loading. The optimised example has a first render in just 0.3 seconds.

Picture4

LCP is one of the most important web performance metrics, and is reflected in Chrome User Experience Report, or CrUX. It will affect how an internet site ranks both on mobile and desktop version of Google search.

Next week, I’ll focus on how Google measures interactivity of a website with its acronym, FID – First Input Delay metric.

  • Get in touch

    Please enable JavaScript in your browser to complete this form.
    Acceptance

    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

    >

    Book a consultation with Engage Web