So, we’re all familiar with the Core Web Vitals scores, right? Just in case we’re not, lets recap. These are scores that Google uses to just the speed of your page. It’s more than just “How much data” does the page use, or “When is the DOM ready”, but also includes things like “When is the content painted on the page” and “How much does stuff shift as the page is loaded”.

This is actually really good, as these are much better metrics; people want your page to read, and these metrics focus on that.

So, one of the things I’ve noticed is that a number of our customers are not getting great scores for the Largest Contentful Paint (LCP) – and this seems to be due to a particular bugbear of mine – carousels.

The issue is this – you want the top of your page to load and render as quickly as possible. Often, that’s the page itself, some icons, a logo, and a big hero image. I mean, I get why – it looks good.

That’s great but there are issues. Big images are big files, so slower to transfer. I’ll ignore the question of optimising images – we all know that content editors are not good at optimising the images they’re publishing – but just assume that all things being equal, bigger dimensioned images take up more bytes of data.

Anyway, this means that at the top of the page you’ve got this hero image that is comparatively slow to transfer. You can do things about that; make sure it’s the right dimensions (for mobile, table or desktop, for example). Google Chrome supports “Eager” as well as “Lazy” loading. Heck, you could even Preload it with HTTP Resource hints. Or make those JPEGs progressive loading.

All that’s fine, but then we have Carousels. The problem here is that now instead of 1 big image that you need for the top of the page, often you’re loading many big images … and that really slows things down. Even if it’s just the limits on bandwidth, it’s going slow things down. Often I find these hero images can be 200-300KB in size (they should be smaller, IMO), so now you’re looking at 700KB or more (sometimes a LOT more).

Then you’ve got how some carousels and hero banners work – by using CSS and a Background Image. Why is that a problem? Well, sadly, the browser sees that Background Image as low priority, and so it downloads it late, further killing your LCP. If it were an <img> tag it would get higher priority, and you could mark it as “Eager” loading too.

Let’s look at this in a fairly typical, real world example. First, how do you find out what the LCP relies on? Fortunately, the excellent https://www.webpagetest.org/ shows you your LCP (the green dotted line), and the file for the LCP (Green row). We can see that the page is very slow (2.4 seconds for some HTML?!), but I note that the browser then downloads a bunch of images near the bottom of the page, and then the images for the carousel – but all in parallel. Ideally, we want that first frame to be higher priority, and the other carousel frames deferred until much later.

What would I like to see, then? I’d like Carousels that are a bit more progressive. In fact, ones that are a static Hero Banner only, until the page is ready, when some JavaScript can run and add the additional frames, and download their images. Let’s defer the Carousel being a carousel as long as possible – so that we can get a Largest Contentful Paint as early as possible.

And yes, optimise your images.