So, you've got a hero image which is actually messing up your LCP metric in Lighthouse or PageSpeed Insights? You might not have heard this before, but making it even bigger will help.
After the launch of a recent case, I got asked how I achieved such a high Largest Contentful Paint (LCP) score despite being an image-rich website. Well, here it is!
Short intro into Largest Contentful Paint
Google is able to tell you all about LCP as well via web.dev. To summarize, the biggest textnode or element containing an image (could be inlined image or background image) within the viewport and until user interactions starts, is considered the LCP. It used to be FMP, but got replaced by this LCP metric for more transparent outcomes.
Full viewport dimensions images aren't tracked as LCP
Having an image as LCP is likely to negatively impact your LCP. But since the LCP Core Web Vitals update of January 19th 2021, you can still achieve a good LCP score despite having a large hero image. Chances are your score improved while not changing any code at all due to this Core Web Vitals update. I think (and hope) this hack or just mindset will provide a solution for many developer and product owners out there, maybe you included.
It might sound too good to be true, but enlarging your hero images could improve your LCP. After I shared this finding via this LinkedIn post, I immediately got a lot of questions. For example:
- is this a bug?
It isn't! 😃 - is this faking PageSpeed Insights?
While it might feel like faking the PageSpeed Insights score, it isn't. Since the LCP Core Web Vitals update of 19 January 2021 Chrome will interpret full width + height (i.e., full viewport) images as decorative instead of meaningful. Exactly the difference between hero images and product images, Google figured that pagespeed metrics should be about context too. - Is setting only width to 100% enough?
No, both width and height attributes should be 100% of the viewport; - Does the image has to be a background image via the style attribute?
No, both inlined images as well as background images will do, as long as it has full viewport dimensions.
By the way, if you are using inline images, you can use the object-fit: cover; property to stretch the image and let it behave as a background image; - Where was this documented?
Then take a look at my Core Web Vitals FAQ, where I am pointing to some metric changelogs such as LCP as part of the "Where can I find any updates on the Web Vitals metrics?" question.
Has your website's real UX (field) data improved since this date? Then you were probably already using full viewport and thus 100% width + height images.
Case Study: Regge-Tegels.nl
One of the websites where I applied this LCP approach is www.regge-tegels.nl as it was part of the design. I also shared this via LinkedIn. This website is in Dutch only (sorry for that), but the technique isn't. As the audience is withing The Netherlands, it isn't on a CDN. But despite the large hero image (and many other images), the LCP should be close to the TTFB and FCP.
LCP in PageSpeed Insights
Yes, the website contains a lot of high-resolution images, which in many cases results in a poor LCP score. However, by giving the images a full height + width (where possible) I was able to achieve a very healthy LCP score, as can be seen in the screenshot below.
Despite a huge screen-filling background image (using CSS), the mobile LCP-score is just 1.8 seconds in Lab data. Field data is 1.4 and -since replatforming to this full viewport image setup- even moved to 1.3 in the last days. Furthermore, the image can just be pretty high-resolution. The CMS did its work here as well though, by cropping images in a different way for mobile portrait mode usage.
Is this LCP hack for you?
If this will work for you, depends. For example, if you already have an 80% height image, you might as well make it 100% high. Be sure to consult your designers as well to check it is ok to do so within the design. You might not be allowed to change such hero image characteristics based on branding requirements.
In my experience this is a relatively easy fix which can have a huge impact on particular websites. It won't change real user experience, but will impact the real UX data, but it will at least improve Core Web Vitals when your hero image was close to being full viewport already.
While this trick is impacting the LCP, be sure to use image width and height attributes to improve your Core Web Vitals CLS score. Questions about any of these approaches? Get in touch!
