Lazy Loading in WordPress: 7 Steps to Fix Slow LCP Images

Your homepage looks sharp, but PageSpeed Insights says the main image loads too late. In many cases the cause is a feature that is meant to help: lazy loading WordPress.

WordPress adds loading="lazy" to images by default. That is great for images far down the page. It is a problem when the big hero image is lazy loaded too. This guide shows 7 clear steps to find the slow LCP image and fix it, for UAE business sites built with Elementor or WooCommerce.

What lazy loading WordPress really does

Lazy loading WordPress means the browser waits to download an image until the visitor scrolls near it. WordPress does this with the native loading="lazy" attribute on the image tag. No extra plugin is needed.

The benefit is simple. Pages with many images send fewer bytes at first, so the top of the page can appear sooner. Product grids, blog lists and long landing pages gain the most.

The catch is that the browser must decide when an image is “near” the screen. It only knows this after it has read the layout. So a lazy image always starts later than a normal one.

That small delay is harmless for a footer photo. For the main image at the top, it is exactly what you do not want. Good lazy loading WordPress means lazy loading the right images, not all of them.

Why lazy loading WordPress can hurt your LCP

Largest Contentful Paint (LCP) measures how long the biggest visible element takes to render. Google treats 2.5 seconds or less as good. You can read the full definition in the official LCP optimization guide.

On many pages the LCP element is an image: a hero banner, a slider photo or the main product picture. If that image has loading="lazy", the browser holds it back until layout is done. The page then looks empty for longer.

This is the most common lazy loading WordPress mistake. Teams enable lazy loading for speed, and the score gets worse. The fix is not to switch it off everywhere. The fix is to exclude the one or two images that sit above the fold.

Mobile makes it worse. A phone on a slower connection feels every extra delay. Since most UAE visitors browse on mobile, test lazy loading WordPress on mobile first.

7 steps to fix lazy loading WordPress and your LCP image

Follow these steps in order. Each one takes only a few minutes, and together they remove the most common LCP problems.

Step 1: Check the page source

Open your page, right-click and choose “View page source”. Search for loading="lazy". Then look at the first large image on the page. This quick check shows how lazy loading WordPress treats your most important picture.

If the hero image carries that attribute, you have found the problem. Check the mobile and desktop versions, because some themes print different markup for each.

Step 2: Find the real LCP image

Do not guess. Run the page in PageSpeed Insights and open the “Largest Contentful Paint element” item. It names the exact element and its URL.

You can also use Chrome DevTools. Open the Performance panel, record a page load and look for the LCP marker. Write down the image file name so you can match it to your source code.

Step 3: Exclude the LCP image from lazy loading

Now remove lazy loading from that image only. Recent WordPress versions already try to skip lazy loading for the first large image in the content. That automatic rule is only a guess, so always verify it on your own pages.

If the attribute is still there, you have three options:

• Set loading="eager" on the image or remove the lazy attribute from it.
• Use the exclusion field in your optimization plugin. LiteSpeed Cache and WP Rocket both let you skip images by file name or class, and some versions can skip the first images automatically.
• Ask a developer to filter the loading attribute for your template images.

Step 4: Add fetchpriority=”high”

Removing lazy loading stops the delay. The fetchpriority attribute goes one step further: it tells the browser to download this image before other resources. See the fetch priority guide for details.

Use it for one image only. If every image is “high”, none of them is.

<img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="Your hero image description">

Recent WordPress releases add this attribute to the main image automatically in some cases. Still, check the source to confirm it is there.

Step 5: Set width and height on every image

Each image needs width and height attributes. They let the browser reserve space before the file arrives, so the layout does not jump. That protects your Cumulative Layout Shift score.

WordPress also uses these values when it decides how to handle lazy loading WordPress. Images without sizes are easy to get wrong, so fix them first.

Step 6: Compare each template

Your homepage, blog posts, product pages and category pages usually use different templates. The LCP image can change from one to the next.

A homepage might have a slider. A product page has a main gallery photo. A blog post has a featured image. Test one URL of each type and repeat steps 1 to 4 for each. Lazy loading WordPress can behave differently on every template.

Also compare mobile and desktop. A large desktop banner can be replaced by a smaller image on phones, and the lazy attribute may only appear on one of them.

Step 7: Clear cache and test again

Caches keep the old HTML, so your fix will not show until you purge them. Clear the page cache, the CDN cache and any minified or optimized files.

Then run PageSpeed Insights again on the same URLs to confirm the lazy loading WordPress fix worked. Compare the LCP time, not just the score. If the number dropped and the hero image has no lazy attribute, you are done.

Lazy loading WordPress with Elementor

Elementor sites add a few special cases to lazy loading WordPress. Standard image widgets print a normal image tag, so the steps above apply. Background images set on sections or containers are different. They are loaded by CSS, so the loading attribute does not apply to them.

Hero sections built with a background image can also be the LCP element. Check the “Largest Contentful Paint element” item to see if yours is a CSS background. If it is, a plain image widget with fetchpriority is often the faster choice.

Sliders and carousels deserve extra care. The first slide is usually the LCP image, so it must load right away. Later slides can stay lazy.

Last, look at Elementor performance settings and any optimization plugin. Two tools can both add lazy loading, and one may override the other. Keep one source of truth for lazy loading WordPress on the whole site.

Lazy loading WordPress on WooCommerce

Online stores face a different pattern. Category pages show a grid of products, and the first row sits above the fold. Lazy loading the later rows helps. Lazy loading WordPress product images in the first row slows the page.

On product pages the main gallery image is usually the LCP element. Make sure it is not lazy and that it has the right size. Thumbnails below it can stay lazy.

Many UAE stores run a slow theme, extra plugins and heavy images at once. Better lazy loading WordPress will not fix all of that, but it is one of the fastest wins. For deeper checks, use our technical SEO checklist for WordPress.

Common lazy loading mistakes to avoid

These errors appear again and again in real audits:

• Lazy loading everything. The first visible image should load at once.
• Using two lazy load tools. A theme setting and a plugin can clash.
• Missing image sizes. No width and height means layout shifts.
• Oversized files. Even a perfect attribute cannot save a 3 MB hero image. Use WebP and sensible dimensions. Proper lazy loading WordPress settings cannot fix a heavy file.
• Testing only the homepage. Other templates have their own LCP images.
• Forgetting the cache. Old HTML hides your fix.

Also remember that speed is only one part of site health. A fast site still needs updates and protection, so review the WordPress security checklist too. For a faster build from the start, see our notes on high speed website design in Dubai.

After each change, measure again. Good lazy loading WordPress is a test-and-confirm habit, not a one-time setting.

Final verdict on lazy loading WordPress

Lazy loading WordPress is a helpful default, and you should keep it for images below the fold. The one thing to protect is the LCP image. Find it, exclude it, give it high priority and size it correctly.

Do this per template, clear every cache and measure again. These small changes often move the LCP result more than any large redesign.

Lazy Loading WordPress FAQ

Summary

Keep lazy loading WordPress for images far down the page, but never for the hero or main product image. Check the page source, find the real LCP element, remove the lazy attribute, add fetchpriority high and set image sizes. Test each template and clear the cache before you measure.