Make the largest element on the page load faster on WordPress

Why it matters

Largest Contentful Paint is how long visitors wait before the main image or heading shows, and a poor value means many of them wait too long. Google counts this in its page experience signals and slow pages lose visitors.

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. Update WordPress. Since version 6.3 it adds fetchpriority="high" to the image it expects to be largest and leaves lazy loading off for it. Check your theme or page builder has not overridden that, and exclude the first image from any lazy-load setting of an optimisation plugin.
2. Add page caching, with a caching plugin or your host's built-in cache, because uncached PHP pages are the commonest cause of a slow server response. Use one caching layer, not several.
3. Compress images. Upload the hero image no larger than needed, use an image optimisation plugin to convert to WebP or AVIF, and pick a sensible image size in the theme or block settings. Avoid sliders as the first element, because they usually delay the largest element.
4. Remove plugins that load scripts and styles on every page that do not need them, and test again.

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Core Web Vitals check
• Make the largest element on the page load faster
• Stop the page layout from jumping while it loads
• Stop the page layout from jumping while it loads
• Make the page respond faster to clicks and taps
• Make the page respond faster to clicks and taps
• Reduce the JavaScript that blocks the page while it loads
• Reduce the JavaScript that blocks the page while it loads
• Collect real-user speed data for your site