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.
- 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
[…] 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 […]
[…] blogs about Google Core Web Vitals and its three main components – Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) and First Input Delay (FID) – with a nagging reminder in each that Google intends to make these […]
[…] your site needs to be for each element of Core Web Vitals, and we’ve written previously about LCP, FID and CLS if you would like to learn more about […]