Automatic LCP optimization for WordPress
WP Core Web Vitals learns from your real visitors which image is the LCP element on every page and every device. That image loads first, with a preload and high priority, and the images below the first screen load lazily. There's nothing to set up.
Which image should a WordPress plugin preload?
The image that is your visitor's LCP element, and that changes per template and per device: the hero on a phone, the featured image beside the text on a laptop. A plugin that guesses "the first large image" is wrong often enough to lazy load the LCP image itself. In my own crawl for State of CWV, 14.5% of WordPress sites lazy load their LCP image. WP Core Web Vitals measures which image it is and preloads that one.
Built on your real visitors
Your visitors' browsers report which element was their LCP, the same measurement Google uses for the Core Web Vitals. That's real user monitoring (RUM): the image that gets the preload is the one your visitors wait for, on their kind of device. A new post gets it right from the other pages of its template, before anyone has opened it.
The image settings
Find the LCP image automatically
The image your visitors wait for, the LCP element, loads first with high priority, and nothing in the first screen gets lazy loaded (LCP). Which image that is, the plugin learns from your visitors' own browsers, separately for each screen size. A new post doesn't have to wait for visitors: the plugin already knows where the LCP image sits on pages with the same template. If it picks the wrong image, enter yours under Your own LCP element. Keep this on either way: with neither, the plugin can't tell your hero image from the others, and Lazy load images may make it lazy too. On
Lazy load images
Images below the first screen get loading="lazy": the browser fetches them only when the visitor scrolls near them. While the page loads, the connection stays free for your LCP image (LCP), and a visitor who never scrolls down never downloads the ones far down the page. The LCP image and the other images in the first screen load right away, even when WordPress or your theme marked them lazy. On
Fine-tuning
- Your own LCP element: for when the automatic detection picks the wrong image. Enter the class of your hero image, or of an element around it, one per line, for example
hero-image. On every page with that class, that image loads first with high priority on every device and is never lazy loaded; other pages keep the automatic detection. A hero in a<picture>works too. - Decode images asynchronously (On): turning a large image into pixels takes the browser a moment. With
decoding="async"on your images it can paint the text and the rest of the page in the meantime. Leave it on. - Add missing width and height (On): stops the text from jumping down when an image arrives (CLS). Images on your own server that have no
widthorheightget them from the image file, so the browser keeps their space free before they load. If an image looks stretched afterwards, addimg { height: auto; }to your CSS. - Hold back background images (Off): background images set in your CSS wait until the browser has read all of the HTML and run your scripts, so the normal images, your LCP image among them, download first (LCP). That goes for every background image, the one behind your header too, so they appear a moment later. It helps a page with many decorative backgrounds and a normal image as its LCP element. Leave it off when your LCP element is a background image, because that one would wait as well.
When the LCP image stays slow
A preload starts the download earlier. It doesn't make a 900 kB hero smaller: serve it as WebP or AVIF, at the size it's shown. A hero that a slider builds with JavaScript only exists once the slider script has run, and no preload fixes that: make the first slide a normal <img> in the HTML.
Questions about the LCP image in WordPress
How long does it take before the LCP image is found?
After the first visit, per type of device: a visit on a phone sets up the page for phones, a visit on a desktop for desktops.
Why is my LCP image still lazy loaded?
Check it logged out first: logged in, you see the page unoptimized. On a kind of page nobody has visited yet, only the first three images are kept from lazy loading, so a hero after a logo and two icons waits for that first visit. Another plugin or the theme can also lazy load it after this plugin is done, with loading="lazy" or a script: turn off lazy loading there. When it stays wrong, add the image's class under Your own LCP element.
Does the measurement slow down my pages?
No. The script is small and waits until the page has loaded and the browser is idle. Only pages that still need measurements get it.
My hero image is in a <picture> element. Does that work?
It isn't lazy loaded, but it gets no preload, because the browser picks the source and a preload could fetch the wrong one. Put its class under Your own LCP element and the plugin preloads the sources of the <picture> instead.
The background: optimize the LCP image, preload the LCP image and "Largest Contentful Paint image was lazily loaded".
