What is Largest Contentful Paint?

What is Largest Contentful Paint?


It seems we finally have a new web
performance metric that’s not only user- centric but that’s actually valuable. I
strongly believe this is how we’re gonna measure web performance in 2020 and
beyond. So if you want to find out how to measure your website performance using
this new metric – more info coming up! So for a few years now, most good developers measure web performance using all the user-centric web performance metrics,
such as the First Contentful Paint (FCP), First Meaningful Paint, and so on. The
biggest problem with that is measuring those metrics at scale was close to
impossible, because as with First Contentful Paint, it was pretty easy –
whereas with Meaningful Paint it was very difficult to assess which part of the
website is actually meaningful for your users. Also metrics like DOMContentLoaded that I personally don’t really like to use don’t really correspond with
what your users see on the screen. And this was my biggest problem – my biggest
beef with those metrics – that they didn’t really correspond with real data. Metrics
like First Paint (FP) or First Contentful Paint were also kind of tricky because,
for example, if a user is gonna see a splash screen, it’s not really what
we want to measure here. And now it seems like we have a solution to that. The new
metric called Largest Contentful Paint (LCP) comes to Chrome 77. Right now when I’m
recording this video my version of Chrome – which obviously updates
automatically – is 76. So with the new and next version of Chrome – of stable Chrome – and not Chromium, we’re gonna see that built in into every
single browser. Also it kind of changes how Google is going to collect the data
about web performance. But let’s get to that now! I reached out to Philip Walton (@philwalton), an engineer at Google, who actually wrote an
article about Largest Contentful Paint and he confirmed that this is something that Googlers – actually, I’m guessing the
Chrome team – is measuring, is gonna start measuring and this is something
that’s going to be reflected in CrUX, so Chrome User Experience Report,
and we can only assume that this is going to be one of the most important
web performance metrics that may also be moved on to the ranking factors – either
mobile or desktop tracking ranking factors in the future. But this also
changes how we should look at how we optimize websites because the metrics
that are a little bit outdated for a while now, like First Contentful Paint,
like DOMContentLoaded, that we had to optimize for a bit are getting
a little bit less important with this new cool metric. So
let’s talk a little bit about what Largest Contentful Paint is. So the Largest Contentful Paint metric looks at the largest elements rendered in the
viewport. Those elements – and let me just look . . . and obviously
– so images – vector images – so– formats as well, and
view that you see when loading a page, they will see at the big – they will
look at – Chrome is gonna look at the biggest element and is gonna measure at
which time this element is going to load and this is gonna be your Largest
Contentful Paint time, which is – The fun part here is that basically
it took Googlers and people at Chrome, and not only Chrome, a few years to come up with this metric and coming up with basically the biggest element may sound
a little bit funny because we’re all expecting something very new
and spectacular, but basically coming back to basics here makes it the easy –
makes it the most logical, and I’m guessing, the easiest to measure web
performance on scale. And gathering data, for example, from Chrome to
measure how different websites load based on user-centric metrics. And you
can read a little bit more about that in the in the link below and this video. But
generally, this metric is going to be available through Chrome API, so you can
you can export that from Chrome when measuring your website – we’re
actually building a tool that’s going to measure that pretty soon as well.
We should publish that within – on our website. The most exciting part about
Largest Contentful Paint is that this is a little bit more dynamic than the
previous metrics were looking at. Let’s look at two examples presented by the
the author of the article on web.dev who actually showed quite interesting case
studies of different websites loading and how the Largest Contentful Paint may change so the largest – actually the largest element – may change affecting where the Largest Contentful Paint event takes place. If we look at the CNN
website, there are actually three different elements that are marked as
the largest element, but when the website is fully loaded you can see that it
moves from the headline to the images. In the case of – in the case of
TechCrunch, we can see that one of the paragraphs is being marked as the
Largest Contentful Paint for a second and then it again moves on to the
image. So this is – I like this metric a lot compared to previous ones because it
shows a little bit of like, hmm – flexibility? – when measuring web
performance and the website is fully loaded, the Largest Contentful Paint
element may actually change making the the Largest Contentful Paint Time
move forward – you basically change and to reflect the latest state
and – of the website that’s fully loaded in the viewport. We can also
see that sometimes the Largest Contentful Paint element is going to remain
the same in the example of Instagram or Google, it doesn’t change so it
also reflects how users see web performance, how it affects users. And it basically reflects that pretty well compared to, for example,
First Meaningful Paint that was difficult to measure on scale or First
Contentful Paint that I never really – I never really liked or even DOMContentLoaded that was updated for a while now. I hope you’re gonna find this new metric
as exciting as I found it when reading the article by Philip Walton. I’m pretty
sure it’s gonna change how I measure web performance. I’m a little bit
surprised that it’s a little bit underappreciated – that this article and this topic wasn’t as popular as I would expect in the both technical
SEO web performance and development communities. But I guess it’s gonna get the recognition it deserves pretty soon while – when Google is gonna – and Chrome team is gonna start rolling out that into CrUX. Thank you so
much. Thank you for watching. Make sure to subscribe and press the bell and see you
soon!

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *