Why it matters
Telling the browser which image matters most lets it start downloading that image earlier — often saving several hundred milliseconds of LCP.
How to fix it in WordPress
- Find your LCP image in Maki's report (or the 'LCP request discovery' section in PageSpeed Insights).
- Use your performance plugin's 'preload critical images' option, or add fetchpriority="high" to that image in your theme or page builder.
- Make sure the same image isn't lazy-loaded.
- Clear your page cache.
Plugin-specific steps
Already using one of these plugins? Follow the exact steps for your setup.
Perfmatters
- 1Go to Settings → Perfmatters → Preloading.
- 2Set 'Preload Critical Images' to the number of images above the fold (usually 1 or 2).
- 3Under 'Fetch Priority', add the LCP image's filename or CSS class with priority 'high'.
- 4Go to the Lazy Load tab and set 'Exclude Leading Images' to the same number.
- 5Save and clear your cache.
WP Rocket
- 1Update WP Rocket to the latest version — 3.16+ automatically detects and prioritizes your above-the-fold images.
- 2Go to Settings → WP Rocket → Dashboard and click 'Clear and preload' so critical images are re-detected.
- 3If the image is a CSS background, add its URL to Media → 'Excluded images or iframes' so it isn't lazy-loaded.
Elementor
- 1Go to Elementor → Settings → Features and make sure 'Optimized Image Loading' is active.
- 2Avoid using a Section/Container background image for the hero — use an Image widget so the browser can discover it early.
- 3Regenerate CSS & data under Elementor → Tools and clear your cache.
How to verify the fix
- View the page source and confirm the LCP <img> has fetchpriority="high" (or a matching <link rel="preload">).
- Run Maki again and compare LCP.
