Lazy Loading Images, Iframes, and Videos

  5 min read 

Lazy loading delays loading media until it is needed, so the top of your page appears sooner. This guide covers xSpeed Cache’s lazy-load settings and how to use them.

What this does

xSpeed Cache rewrites media tags in your rendered page content so the browser does not download everything at once.

Images get loading="lazy" and decoding="async" so they load as the visitor scrolls. The first images on the page get loading="eager" instead, so your main hero image is not delayed.
Iframes get loading="lazy". This helps with heavy embeds like YouTube, Vimeo, and map widgets.
HTML5 videos get preload="none". Browsers do not support loading="lazy" on <video> yet, so preload="none" is the closest equivalent. It stops the browser from fetching the video bytes until playback is requested.
Missing image dimensions can be filled in automatically to prevent layout shift (CLS).

Lazy loading is applied to frontend page renders only. Admin screens, feeds, cron, AJAX, and REST requests are left alone. Content inside <script>, <style>, <noscript>, <pre>, and <code> blocks is also left untouched.

Why use it

The visible top of the page loads faster because off-screen media waits.
Less data is downloaded for visitors who do not scroll the whole page.
Filling in missing image sizes reduces layout shift, which improves CLS scores.

How to set it up

Go to the xSpeed Cache dashboard in your WordPress admin.
Open the Lazy Load panel.
Turn on the media types you want to lazy-load.
Adjust the eager-load count and exclusions if needed.

Settings explained

Setting	What it does	Default
Lazy-load Images	Adds `loading="lazy"` + `decoding="async"` to `<img>` tags in content	On (`true`)
Lazy-load Iframes	Adds `loading="lazy"` to `<iframe>` tags	On (`true`)
Lazy-load HTML5 Videos	Sets `preload="none"` on self-hosted `<video>` tags	On (`true`)
Eager-load First N Images	How many top images load eagerly instead of lazily	1
Add Missing Image Dimensions	Fills in missing width/height from the media library	On (`true`)
Excluded Images	Substring patterns that skip lazy-loading	Empty

Lazy-load Images. Adds loading="lazy" and decoding="async" to <img> tags in post content. The first images on the page get loading="eager" so the main image is not deferred. Default on. Leave it on for most sites.

Lazy-load Iframes. Adds loading="lazy" to <iframe> tags. This is useful for YouTube and Vimeo embeds and map widgets that pull a lot of bytes. Default on.

Lazy-load HTML5 Videos. Sets preload="none" on self-hosted <video> tags. Browsers do not yet support loading="lazy" on video, so preload="none" is the closest equivalent. Default on. If a video tag already declares a preload value, xSpeed Cache leaves it as is.

Eager-load First N Images. Sets how many images at the top of the post get loading="eager". The default of 1 is usually right, since it covers the main hero image (your likely LCP element). Set it to 0 to lazy-load every image. The allowed range is 0 to 10.

Add Missing Image Dimensions. When an <img> carries a wp-image-N class but has no width and height, xSpeed Cache looks the values up from the media library and adds them. This prevents the layout shift that hurts CLS. Default on. If the dimensions cannot be resolved cheaply, the tag is left unchanged rather than guessing.

Excluded Images. A list of substring patterns. If a pattern is found anywhere in an <img> or <iframe> tag (often a class or filename), that element is exempt from lazy-loading. This is useful for hero, logo, or sprite images. Default empty.

Note: Excluding an image from lazy-loading does not strip its dimensions. If Add Missing Image Dimensions is on, the excluded image still gets its width and height filled in. That is intentional, since excluded above-the-fold images are exactly the ones where keeping dimensions matters most.

Excluding individual elements

You have two ways to skip lazy-loading for a specific element:

Add a matching pattern to Excluded Images (matches part of the tag, such as a class or filename).
Add data-skip-lazy directly to the <img>, <iframe>, or <video> tag. Images also recognize data-no-lazy.

Best practices

Keep Eager-load First N Images at 1 for a single hero image. Raise it only if several images sit above the fold.
Add your hero or logo class to Excluded Images if it should never lazy-load.
Leave Add Missing Image Dimensions on. It is one of the better CLS wins and only acts when dimensions are missing.

Troubleshooting

A YouTube or Vimeo embed loads too eagerly. Make sure Lazy-load Iframes is on. Most embeds render as <iframe> tags and will get loading="lazy".
My hero image is lazy-loading and appears late. Raise Eager-load First N Images, or add a pattern that matches the hero image to Excluded Images.
An image in a code sample got rewritten. Tags inside <script>, <style>, <noscript>, <pre>, and <code> blocks are skipped, so example markup in those blocks should be safe.
Running another lazy-load plugin. Running two lazy-loaders can double-rewrite tags. xSpeed Cache warns about Smush and refuses to run alongside the dedicated a3 Lazy Load plugin. Disable the other lazy-loader first.

FAQ

Does xSpeed Cache lazy-load images outside post content? It processes post content, post thumbnails, avatars, and text widgets. The eager-load budget is shared across all of these on a single page render.

Why do my videos still not say loading="lazy"? Browsers do not support loading="lazy" on <video>. xSpeed Cache uses preload="none" instead, which stops the browser from fetching the video until play is requested.

Will it set wrong image sizes? No. If xSpeed Cache cannot resolve the correct dimensions cheaply, it leaves the tag unchanged rather than adding incorrect values.

Font Optimization
Disabling Bloat

Back to documentation Need more help? Contact support →