Optimizing the LCP Metric
Let's dive into the world of Largest Contentful Paint (LCP), identifying potential pitfalls and ways to optimize this metric efficiently.
We've prepared several tips for optimizing LCP based on our speed consulting. Here, we'll introduce you to technologies like Priority Hints, preload, and native lazy loading.
If you're eager to learn more, read on or check out our webinar recording:
YouTube: Practical LCP Metric Optimization
Before you begin, make sure to see how to properly identify the LCP element. This is crucial for further optimization.
Priority Hints (Boosting Element Priority)
If the LCP element is an image, you can change its download priority using Priority Hints. Increase priority by adding the fetchpriority="high" attribute to the <img> tag. This ensures the image source is downloaded with the highest priority, leading to the quickest rendering of this element.
For other images on the page, add the loading="lazy" attribute to the <img> tag. This tells the browser to download and render the source only when the user scrolls to it.
Don't forget images from WYSIWYG-edited areas that web editors insert on pages.
Think about carousels and similar components with multiple images. If a carousel is the LCP element on a page, add the fetchpriority="high" attribute to the first image and loading="lazy" to all subsequent images.
<ul class="carousel">
<!-- First carousel image with increased loading priority: -->
<li><img src="image1.webp" fetchpriority="high" alt="" /></li>
<!-- Subsequent carousel images with low loading priority: -->
<li><img src="image2.webp" loading="lazy" alt="" /></li>
<li><img src="image3.webp" loading="lazy" alt="" /></li>
</ul>
Support is already widespread. The fetchpriority attribute works in all modern browsers except Firefox. More info can be found on web.dev.
Preload (Increasing Priority in Document Head)
The <preload> tag works similarly to Priority Hints. It tells the browser to start downloading a resource as soon as possible. Preload is useful for preloading files like web fonts, which are crucial for the initial rendering of the visible page area:
<link rel="preload" href="/font400.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/font500.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/font600.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
You can preload web fonts, JavaScript files, or images with <preload>.
The advantage of the <preload> tag is its functionality across all browsers.
When using preload on images with srcset, you need to define sources in the exact order for all widths and source images. This makes using the fetchpriority="high" attribute on the <img> tag much simpler, as the browser decides for you which source to download with priority.
Another downside is that <preload> must be placed in the <head> section as high as possible. Place font preload at the very beginning of the <head>, before the <link> that declares the path to CSS stylesheet files.
More information on correctly setting up <preload> can be found on MDN.
Native Lazy Loading
Using native "lazyload" is now standard practice, with full support across all modern browsers. Apply lazyloading to all <iframe> and <img> elements not in the first viewport to ensure the browser can efficiently manage the loading of these elements.
When using JavaScript lazy loading, where <img> tags don't have a src attribute, the browser is unaware of the source files.
<img src="image1.webp" loading="lazy" alt="" />
Images in WebP Format
Prepare images in the modern WebP format and use them throughout your website, including illustrative images. This format offers significant space savings compared to JPG or PNG, maintains quality, and improves page load speed.
Don't forget to optimize images from WYSIWYG sections prepared by web editors.
Manually fine-tune the compression of illustrative images using tools like Squoosh.
Squoosh Tool lets you experiment with various compression options.
Tip: At the time of writing, Google is introducing the Jpegli library, which can compress JPG images up to 35% better than previous libraries, potentially rivaling WebP in size.
Optimize Web Fonts
Before deploying web fonts, check their size and consider using subsetting to optimize the final size.
Whenever possible, prefer storing fonts locally on your server, which can significantly improve page load speed. To generate local files for Google fonts, you can use Google Font Helper.
Always use the WOFF2 format. Other formats are no longer necessary. WOFF2 is widely supported in all modern browsers.
Before deploying font files, inspect their content using tools like Wakamai Fondue to determine the number of characters, axes, and other information for optimal font selection and configuration on your website.
Before optimization, the font file size is 51 kB. Source: Wakamai Fondue.
After optimization, the font file size is 19 kB. Source: Wakamai Fondue.
Optimizing all font files saved approximately 100 kB in data transfer. Source: PageSpeed Monitoring.
JS Files and Inline Scripts
Always place JavaScript files in the footer before </body> or in the head before </head> on your pages. Ideally, use the defer attribute, which allows JS files to process after the browser completes parsing the HTML code.
<script src="app.js" defer></script>
Avoid embedding "ad-hoc" scripts directly into the page code. For example, the maps.google.com/maps/api/js file for map handling on the page should not be embedded in the middle of the HTML document. An improperly placed script can block the entire page rendering.
Proper Compression with Brotli or Gzip
When optimizing the website, it's crucial to check compression settings for text files like CSS, JS, SVG, and ICO. Ensure that Gzip or Brotli compression is enabled on the server.
- For Gzip compression, we recommend setting at least level 7, ideally 9 - 10. For Brotli, a compression level of 6 - 7.
- Proper settings ensure effective file size reduction and faster page loading for users.
- Also, remember to check that compression is correctly set for SVG files, which is often overlooked.
- Conversely, compression should not be enabled for the WebP image format, as these files are already compressed, and compression could increase their size.
To check compression settings, you can use the Gzip and Brotli Compression Level Estimator.
Further LCP Optimization Possibilities
- Utilize BF cache for instant page loading from browsing history.
- Add Speculation Rules to the website for instant page loading through background rendering.
- Ensure your LCP doesn't fall into cookie banners that may load later.
- Split CSS into smaller files.
- Organize your
<head>section properly.
What to Conclude About LCP Optimization?
Optimizing the LCP metric is crucial for achieving fast and user-friendly websites. Proper implementation of techniques like those mentioned in this article can assist you.
Monitoring LCP and speed in general daily and analyzing newly deployed code are key to maintaining high website performance.
In our PLUS tester, you can utilize daily monitoring. For selected URLs, we monitor and store Google's CrUX data and perform synthetic measurements using Lighthouse.
Display of Google CrUX data for our monitored URLs.
With the "Watchdog" function, we send performance metric deterioration outputs to Slack or MS Teams.
LCP metric deterioration in one of the automated synthetic tests in the app.pagespeed.cz tool.
Apart from general recommendations, we have detailed data from CrUX API available today in the Domain Report. You'll see not only whether your LCP is caused by an image or text element, but also exactly which part of image loading adds the most delay—server response, downloading itself, or rendering. This allows for much more precise targeting of LCP optimization, and results arrive faster.
We cover the topic of Core Web Vitals optimization in full breadth, read our other texts: