webzod
account

Make the largest element on the page load faster

perf.cwv.lcp_needs_improvement · effort: about an hour

Why it matters

Largest Contentful Paint is how long visitors wait before the main image or heading shows, and the value is above the good threshold. A few changes to the main image and caching usually bring it into the good range.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

  1. Find the element that counts as the largest. Run the page in PageSpeed Insights or the Chrome DevTools Performance panel and read the LCP breakdown, which splits the time into server response, resource load delay, resource load time and render delay. Fix the biggest part first.
  2. If the element is an image, make sure it is a normal img tag in the html (not set by JavaScript or as a CSS background), add fetchpriority="high", and never put loading="lazy" on it. Give it width and height, serve a size that fits the screen with srcset and sizes, and use AVIF or WebP at a sensible quality.
  3. If the image can only be found late (a CSS background or script-inserted image), preload it with a link tag in the head, using fetchpriority="high".
  4. If the server response is slow, cache the html at the server or CDN, avoid redirect chains, and fix slow database or backend work. If a text heading is the element, keep the font small and set font-display so text shows at once.
  5. Remove what delays the first paint, such as large render-blocking stylesheets and scripts in the head. Load scripts that are not needed for the first view with defer, then measure again after the change.
html 
<!-- The hero image: in the html, high priority, never lazy-loaded -->
<img src="/img/hero-1200.avif"
     srcset="/img/hero-600.avif 600w, /img/hero-1200.avif 1200w, /img/hero-1800.avif 1800w"
     sizes="100vw" width="1200" height="600"
     fetchpriority="high" alt="Describe the picture">

<!-- Only if the image is a CSS background or inserted by script -->
<link rel="preload" as="image" href="/img/hero-1200.avif" fetchpriority="high">

Read the documentation (opens in a new tab)

Related

Scan your domain to see whether this applies to you.