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
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
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.
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.
- What videos should you post on your website? - February 17, 2021
- Google Core Web Vitals: What is Cumulative Layout Shift (CLS)? - February 10, 2021
- Google Core Web Vitals: What is First Input Delay (FID)? - February 3, 2021