What lazy loading does on a WordPress page
Lazy loading tells the browser to fetch an image or iframe only when it approaches the viewport. WordPress has done this by itself since version 5.5, using the native loading="lazy" attribute, so most sites already have it switched on.
- The browser fetches the first screen immediately and the rest as the visitor scrolls.
- WordPress adds the attribute only to images that carry width and height, plus iframes.
- Nothing is removed from the page: the image markup is still there for crawlers.
- CSS background images are not covered by the native feature.
What lazy loading does to LCP
LCP is the moment the largest visible element finishes loading. Deferring images below the fold protects that number by freeing bandwidth; deferring the hero image does the opposite, because the browser waits before it even requests the element that defines the metric.
WordPress core notes that in-viewport images with the attribute cost well under one percent of LCP in its own Chrome Android experiments, which is why the attribute ships enabled. The risk is layout: core cannot see the rendered page, so a small logo before a large hero can still leave the hero marked lazy.
The fix is one image, not a plugin. Mark the hero eager, give it fetchpriority="high", and preload it if it is a CSS background. Since WordPress 5.9 the first content image is skipped automatically, and wp_omit_loading_attr_threshold changes how many leading images get that exemption.
The native WordPress setup, with no plugin
There is no setting to switch on. The attribute is added at output time to post content, excerpts, text widgets, avatars and template images created through wp_get_attachment_image(). Three filters cover almost every adjustment.
wp_lazy_loading_enabled— return false to stop the attribute for a context, for example template images.wp_omit_loading_attr_threshold— raise the number of leading images that stay eager.wp_img_tag_add_loading_attr— change or drop the attribute for one specific image.
Put those in a child theme or a code snippets plugin, never in the parent theme, or the next theme update removes them.
When a lazy load plugin earns its place
A plugin is worth installing for control the core feature does not offer: excluding a hero by CSS class, lazy loading backgrounds from a page builder, and swapping YouTube embeds for a thumbnail that loads the player on click.
| Approach | What it adds | When to pick it |
|---|---|---|
| WordPress core | Native loading="lazy" on images with dimensions and on iframes | Default for every site |
| Perfmatters | Image and iframe exclusions, viewport threshold, CSS background selectors, YouTube preview thumbnails | A page builder site with a heavy hero or many embeds |
| WP Rocket | Lazy loading as part of page caching, with exclusions and video facades | A site already buying WP Rocket for caching |
| a3 Lazy Load | A simple free loader with basic exclusions | A small site that wants one toggle |
Run one loader, never two. A theme, an image optimiser and a performance plugin that each defer images will fight, and the visible result is images that stay blank until a second scroll.
Check in DevTools that it worked
You know it worked when the images below the fold have no network request until you scroll, and the hero has one from the start. Three checks prove it.
- Right-click a below-the-fold image, choose Inspect, and read the tag. It should show
loading="lazy"; the hero should not. - Open the Network tab, filter to Img, tick Disable cache, set throttling to Fast 4G, reload, and scroll. New image requests should appear only as each row enters view.
- Open Lighthouse or the Performance panel and read the LCP element. If it is the hero and its request starts late, the hero is still lazy.
PageSpeed Insights uses the same data. “Defer offscreen images” means too little lazy loading; “LCP request discovery” means too much of it in the wrong place.
Fix images that never load or jump
| Symptom | Cause | Fix |
|---|---|---|
| Images stay blank until a second scroll | two lazy loaders on one page | Disable all but one, then purge the cache |
| Content jumps as images arrive | width and height missing | Add dimensions, or let WordPress backfill them for library images |
| LCP got worse after enabling it | hero image is lazy | Exclude it, add fetchpriority="high" |
| Images never appear at all | JavaScript error before the loader runs | Read the console, then disable plugins one at a time |
What lazy loading cannot fix on cheap hosting
Lazy loading reduces the bytes a browser downloads on first paint. It does not reduce time to first byte, PHP execution time or database queries, so a page assembled slowly on the server is still slow with every image deferred.
If the PageSpeed report shows a high server response time while the image warnings are gone, the work moves to caching, PHP workers and the host. WordPress hosting and a speed optimization service address that layer; both are quoted by email before payment.
When to email WebJi about a slow WordPress site
Email support@webji.services with the page URL, the PageSpeed Insights report and the plugin list. Support is 24/7 by email in Hindi and English, and the average first reply is under 60 minutes. The office phone is business hours only and is not a support line.
Frequently Asked Questions
Is lazy loading on by default in WordPress?
Yes, since WordPress 5.5. The attribute is added to images that have width and height, and to iframes. There is no checkbox to enable it, and no plugin is required.
Does lazy loading hurt LCP?
Only when it is applied to the largest visible image. Off-screen images help LCP by freeing bandwidth. Keep the hero eager with fetchpriority set to high, and let everything below the fold stay lazy.
How do I check lazy loading in Chrome?
Inspect a below-the-fold image for loading="lazy", then watch the Network tab with cache disabled while you scroll. Requests should start as each image nears the viewport, not on page load.
Do I need a lazy load plugin?
Usually not. Install one when you need exclusions by CSS class, lazy CSS backgrounds or YouTube preview thumbnails. If you do, disable lazy loading in every other plugin and in the theme.
Will lazy loading hide images from Google?
No. The image URL stays in the HTML, and Googlebot renders pages with JavaScript. Only a JavaScript-only loader without a noscript fallback risks images being missed.