How to find your Largest Contentful Paint problem

Even though the Core Web Vitals rolled-out this week, a lot of websites are still working to improve them.

One of the three Core Web Vitals is the Largest Contentful Paint (LCP). This means the largest item loading on a page cannot be larger than a specific size. How can you find the largest item on any given page? Chrome Dev Tools can help. In this video we show how to find the LCP on a page, so you can begin to fix the issue.

Transcript:

As of today, Google started rolling out the pagespeed insights I’ve been working on that as of probably last weekend, I’m still having trouble with my, I mean, desktop, as always shows up, fine, but I’m looking at page speed site in G metrics. Um, I think one of my biggest issues is with the content largest paint or something like that. Figure out how to get that lower. But I did figure out how to I was getting up there. I said, I think was called cumulative layout where my pictures didn’t have a size, it was said Otto or something like that, if you know how to fix that. That’s where the harder ones, cumulatively out shift is one of the hard ones. But that is that I’m glad you’re able to get that largest content. For Pate means the biggest item on that particular page is too large. So if You load your page using Chrome developer tools. It will actually tell you what your largest Contempo paid item is on that page. so sometimes it’s like an images too big Or it could be something else. But I mean, like, show use color. Like if you like, if you have a background color like on your front on your first page instead of a picture you might have like color and then letters Could it be the color or just the picture? It’s probably just the picture. Okay? Unless you’re, if you’re using CSS to do the color, that shouldn’t be large, welcome, because that’s just the way the browser’s rendering it. Let’s let me see if I can run an example here for you. Let’s see if we can pull up. I will throw my website under the bus. So here we go, we are in Chrome which I’ve stopped using, but I will use for this purpose. I use Chrome, I have so many extensions that I don’t know. Okay, well off screen, I’m going into developer tools. That was settings and then developer tools, right? Right. So oh sorry, it’s find more and then developer tools. And you can hit the mobile. So now we’re looking at it from a mobile perspective and I forget how to get to it. So let’s just load, reload the page. Obviously, it’s not a fast page. Oh good. I got web vital selected here, so that’s good. Okay, look at all this stuff. So, We’re. Okay. There we go. Largest content. Full paint. See how it says LCP here. And notice how it’s highlighting something. This image. The largest content will paint item and it tells you the size to okay? Yeah yeah. So what probably happening. Is that this? Image is just too big. It needs to be able to load smaller, and that’s why that’s the largest content for paint issue. We can confirm this by loading a light path house. And see ya performance on mobile. So let’s just see. About generator for it. That’s what I want generate report. So lighthouses has a lot of things and some of these are very useless like their SEO report is about useless, have a client that’s obsessed with it for some reason, but it’s about worthless. For all this talk about pagespeed these tools from Google are pretty slow doing it. Almost there boy. You know, it’s slow and they have to warn you, it’s almost there, all right. Largest content for pay eight seconds. Boy, that’s no good. But my cumulative layout shift is really good. So I got that going for me. so, anyway, so the the, the community layout Chef largest content for paint and the best that Ten Tiny interactive is the other item. That’s a webcore vital. So if we go here, we can learn that largest content will paint. We learn what it is. What affects it. And what we’re trying to do, we’re trying to get it less than 2.5 seconds. Over 4 is red, I mate who your Double-Double, hmm. So that means going to work on that. And the thing is is with with performance once I figure out that this fix this problem, that mounts on something else will show up and the goal is to figure out mr. Can’t keep fixing whatever happens to be the largest Contempo paint. Pardon me, item until The largest item is loads and less than 2 and 1/2 seconds. And that’s how that works. I make it sound real easy, don’t I? Yeah, you just do this, just do it, just do it. I mean, just just don’t load a large image that easy. Yeah, but yeah, give me a left shift is a struggle for a lot of people and that I’m glad you’re able to figure that one out.