In the fast-paced digital world, where every second matters, the speed at which a website loads can make or break the user experience. Despite being a crucial metric, Largest Contentful Paint (LCP) is still the one most websites struggle with. Let’s dive into this topic with the site-speed optimisation expert Harry Roberts.
Why should I continue reading?
According to Google’s Core Web Vitals initiative, LCP is one of the three user experience-centered metrics. It’s the time taken for the largest visible element on a webpage to load and be rendered. LCP not only directly impacts how quickly users can engage with your content but also is used when ranking your site’s position in search results. Whether it’s an image, text, or another visual element, optimizing LCP can dramatically enhance user satisfaction, boost conversions, and even improve search engine rankings. And yet only 58% of websites have a good LCP (March 2023 figure).
The good side
LCP is by far the easiest to monitor and fix. So what is considered a good LCP? The answer for now is 2.5 seconds or faster for the following reasons:
- Based on psychology around 2.5 seconds is the time when the human brain might get distracted or lose interest.
- To confirm that a threshold is achievable, the condition of 10% of origins currently meeting the good threshold is required.
As Harry mentioned in his talk, it may happen that in the future Google decides to redefine the threshold of this metric.
From poor to good
Let’s take a look at Harry’s tips on how to get to that 2.5-second sweet spot:
- Solve everything beforehand – DNS, TCP, TLS, redirects, TTFB, First Paint, First Contentful Paint – all of these are everything that happens before the LCP event.
- Analyse where you are losing time – Treo is a useful tool to help you with that even in its free version.
- Choose the best element – obviously, text is always faster than images, but if you want to include pictures choose <img> or poster over <image>, <svg>, or background image.
- Mind the preload scanner potential – in this case, HTML is the way to win your browser’s heart.
Common pitfalls
Before diving into optimisation techniques, it’s necessary to fix the common mistakes that harm your LCP performance.
☝ Overusing lazy loading for LCP images is a very common mistake that leads to slower load times. The best is to avoid lazy loading of LCP elements in general.
☝ It’s often tempting to use eye-catching animations on your site, but the truth is animating or fading images is also one of the ways to slow the performance and hold back the overall user experience.
☝ JavaScript is a fast way to create a slow website.
☝ Hosting images off-site is obviously inefficient. Self-hosted, optimised images are a better choice.
☝ Marketing departments are usually the ones guilty for usurping LCP with changing the size or structure of LCP elements.
Strategies for optimising LCP
We know what the good LCP is supposed to look like and what mistakes to avoid so now it’s time for the how.
- Preloading resources might seem like an older technique and yet remains an invaluable powerful tool for enhancing performance.
- Fetch Priority Hints is a relatively recent addition to web specifications. By assigning a fetch priority, you guide the browser on the importance of rendering specific resources.
- The Image Decoding API is a lesser-known gem. It allows you to influence how the browser handles image decoding tasks.
Final thoughts
In the race for user satisfaction and search engine success, mastering the art of optimising LCP is your golden ticket. As you embark on this journey, remember that optimising for LCP is a continuous process and that every millisecond you save takes you a step forward to make your web shine in the result search.
Have a bunch of questions on this topic popped up in your head? You are not the only one and we are sure many of them were covered in the Q&A session after Harry’s talk. Keep calm, sit back, and watch it here: