fbpx













     

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

    Posted on January 14, 2021

     

    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.

    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.

    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.

    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.

  • […] our second part of the Core Web Vitals Series (you can read the first part here), we’re going to look at First Input Delay (FID). So, first of all, what is […]

  • Call Now Button
    >

    FREE Facebook Ads Training

    CLICK HERE TO BOOK YOUR PLACE NOW

    "I wish someone would just show me where to get started properly with Facebook Ads"

     Does that sound like you? Join our completely FREE online training - perfect if you want to learn how to use Facebook Ads to grow your business. You will learn about ad set up, creating audiences that work, retargeting and writing ad copy that converts. Ideal for both beginners and advanced users of Facebook Ads.

    %d bloggers like this:

    We have worked with:

    TEL: 0345 621 4321