Lazy loading should save work below the fold. When it is applied to the first meaningful image, however, the browser may wait too long to discover or request that file. The page can show an empty hero while less important resources load.
The repair is not to disable lazy loading everywhere. Identify the actual main image, confirm how it is being delayed and exclude only media that should load immediately.
Reproduce the delayed image on a cold visit
Open the affected page in a private window with the browser cache disabled. Apply mobile network throttling and reload from the top. Record which visual region remains blank.
In the Elements panel, determine whether it is an <img>, <picture>, CSS background or a JavaScript-created slider. Then inspect the network request. Note when it starts, its priority and what initiated it.
This separates a lazy-loading delay from a slow server, oversized file or late JavaScript rendering. An image that starts early but downloads slowly needs a different fix.
Look for overlapping lazy-loading systems
Modern WordPress can add native loading="lazy" to eligible images. Themes, page builders, CDN features and optimisation plugins may add their own data attributes or placeholder scripts.
Typical signs of a second system include:
<img
src="placeholder.svg"
data-src="/wp-content/uploads/hero.webp"
class="lazyload"
loading="lazy"
alt="Emergency WordPress repair"
>The real URL is hidden in data-src until JavaScript moves it into src. Adding native lazy loading as well does not make this faster. Establish which component owns the behaviour before changing exclusions.
Identify the likely LCP image
Run a browser performance trace or inspect the Largest Contentful Paint result in a lab test. Confirm the element rather than assuming every large hero is LCP.
If the first content image is LCP, it normally should not be lazy loaded. It should have an immediately discoverable src or <source> and correctly sized responsive candidates. For an important image, the markup may use:
<img
src="/wp-content/uploads/repair-team-1280.webp"
srcset="/wp-content/uploads/repair-team-640.webp 640w,
/wp-content/uploads/repair-team-1280.webp 1280w"
sizes="100vw"
width="1280"
height="720"
fetchpriority="high"
alt="WordPress repair specialist at work"
>Use fetchpriority="high" sparingly. Marking several images high priority makes the signal less useful and can compete with CSS, fonts or the true LCP resource.
Exclude the smallest possible target
Most optimisation tools can exclude an image by class, URL fragment, attachment ID or position. Prefer a stable, narrow selector assigned specifically to the hero. Avoid exclusions such as every image in the header if only one file is critical.
After configuring the owning system, inspect the final HTML received by a logged-out visitor. The main image should expose its real URL without waiting for a scroll event. Below-the-fold images should retain lazy loading.
If a page builder regenerates markup, document the exclusion. A future template edit may change the class or recreate the widget.
Check sliders and JavaScript-rendered heroes
A slider can delay the first slide even after loading="lazy" is removed. Some libraries initialise all slides after the document is ready, inject image URLs from JSON or wait for fonts before calculating dimensions.
Temporarily test a static first slide in a staging copy. If the static image becomes visible much earlier, the slider’s initialisation is the bottleneck. Do not preload every slide as a workaround; that transfers media visitors may never see.
Often the safest design is a real HTML image for the initial slide, with later slides enhanced after the primary content is usable.
Preserve dimensions and the visible crop
Removing a placeholder system can reveal missing width and height attributes. Add intrinsic dimensions or a stable aspect ratio so the layout reserves space before the file arrives.
Compare desktop and mobile crops. A theme may have used JavaScript to select a different file or apply object-fit. The performance fix must not stretch portraits, hide product details or introduce a layout shift.
Verify more than the PageSpeed score
Repeat a cold mobile test after clearing page, CDN and generated asset caches. Confirm:
- the critical image request begins earlier;
- its URL is visible in initial markup;
- only the true primary image receives high priority;
- below-the-fold images still wait;
- LCP improves without increasing layout shift;
- forms, menus and sliders still work.
Also inspect a few different templates. A global “first image” exclusion can accidentally preload a logo, tracking pixel or thumbnail instead of the content image.
When specialist repair is appropriate
Ask for a performance assessment when multiple plugins rewrite image markup, the first slide is generated by JavaScript or exclusions change across templates. Send the affected URLs, device conditions and any optimisation changes already attempted; do not send credentials through an enquiry form.
The repair should identify one owner for lazy loading, protect the actual LCP element, retain savings below the fold and verify the result on logged-out mobile visits.