Enable Lazy Load in WordPress

What enabling lazy load changes on a WordPress page

Turning it on changes the moment the browser requests a file. Pictures and iframes under the first screen wait. The ones already in view should be requested with the document.

Largest Contentful Paint is the time until the biggest element in view finishes. If that hero is marked lazy, the score moves the wrong way. A plain definition of the attribute is on what lazy load in WordPress does.

• Images below the first screen wait until the visitor scrolls near them.
• The hero, the logo, and the first banner should stay eager.
• A CSS background is not covered by the native attribute.

Enable the lazy load WordPress has shipped since 5.5

There is no checkbox in Settings. From WordPress 5.5, core writes loading="lazy" onto images and iframes that already have width and height. From WordPress 5.9 it skips that attribute on the first content image, so a normal post does not defer its lead picture.

1. Open a published post while logged out, so a cache plugin is not showing you the admin view.
2. Inspect an image you must scroll to reach. The tag should include loading="lazy". That means native lazy load is already on.
3. Inspect the hero the same way. It should say loading="eager", or it should have no loading attribute at all.
4. If no image has the attribute, a theme or plugin is stripping it. Look for a disable-lazy-load switch in the theme and turn that switch off before you add another plugin.

Missing width and height means core skips the attribute, and the layout jumps when the file arrives. Images from the media library already have dimensions. An img tag pasted without them will not lazy-load.

Enable lazy load in LiteSpeed Cache when you need exclusions

Use LiteSpeed Cache when the hero is still lazy, or when a page-builder image never receives the attribute. If LiteSpeed Cache is not in the wp-admin menu, leave the native attribute in place. Do not add a second loader beside it.

1. In wp-admin open LiteSpeed Cache, then Page Optimization, then Media Settings.
2. Set Lazy Load Images to ON. Set Lazy Load Iframes to ON only when embeds sit below the fold. Save.
3. Open Media Excludes. Under Lazy Load Image Class Name Excludes, add the hero CSS class, one class per line. Save.
4. In the admin bar choose Purge All. Reload the post in a private window and inspect the hero again.

A separate lazy-load plugin is only for a CSS background or a video thumbnail that loads the player on click. Turn every other loader off, including the theme. Two of them on one page leave images blank. Accounts that show this menu are described on WordPress hosting.

There is no ranking of plugins on this page. Core is the start. A second plugin is a replacement, not an extra. Do not run A3 Lazy Load, a cache plugin's image loader, and LiteSpeed Cache at the same time.

Exclude above-the-fold images from lazy load

Exclude the largest image in the first screen, the header logo, the top banner, and the first slide of a carousel. Those files are on screen before anyone scrolls. Everything under that line can stay lazy.

On a single image in the block editor, set that image to load eagerly. In the HTML the attribute is loading="eager". Add fetchpriority="high" on the same hero if PageSpeed still says the LCP image was found late.

Skipping the first image in the HTML is not the same as skipping the largest image on the screen. A small logo can be first, and the hero second, so the hero stays lazy. That is the case the exclusion list is for.

Lazy-load iframes and videos in WordPress

A YouTube, Vimeo, or map iframe downloads its player even when it sits at the bottom of the post. WordPress adds loading="lazy" to iframes that have width and height, so the request waits until the frame nears the viewport.

A click-to-play thumbnail goes further: the player script starts only after a click. LiteSpeed Cache's Lazy Load Iframes switch only defers the frame. A thumbnail swap belongs in one performance plugin, and that plugin should be the only one doing it.

Do not lazy-load a video that is the first thing on the page. That file is the LCP element. Leave it eager.

Test lazy load in Chrome and in PageSpeed

It worked when pictures under the fold make no network request until you scroll, and the hero request starts with the document. Chrome already honours loading="lazy". You do not flip a Chrome flag to enable it.

1. In Chrome, open DevTools, choose Network, filter by Img, and tick Disable cache. Reload and count the image requests before you scroll.
2. Scroll the post. New image requests should start as each picture nears the screen.
3. Run the same URL in PageSpeed Insights with mobile selected. An offscreen-images warning means those files still downloaded up front. If LCP got worse, the hero is still lazy.

Smaller files still matter once the request starts. Converting images to WebP cuts those bytes. A higher lab score with a blank hero is a fail.

When not to enable lazy load in WordPress

Leave it off for a page with one picture, for a hero that is the only image, and for anything inside the first screen. Eager loading is the better choice there, because the browser should request that file immediately.

To stop LiteSpeed Cache, set Lazy Load Images and Lazy Load Iframes to OFF, save, and choose Purge All. To stop core as well, add the line below in a child theme or a snippets plugin, then purge again.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

For one image, set loading="eager" and leave the rest of the site lazy. Turn the same switch off in every other performance plugin. Images that stay blank usually mean one loader is still on.

Lazy load does not shorten the time the server takes to build the HTML. If PageSpeed still shows a long server response after images are deferred, the next job is caching and the host. That work is the WordPress speed optimization service, and it is quoted by email before you pay.