Lazy loading delays the loading of images, videos, and iframes until a visitor scrolls near them. The browser does not download everything at once, so your page opens faster. This helps most on pages with many images.
In this article, you will learn how to turn on lazy load in Breeze, how it works for each media type, and what to check when something does not lazy load.
Note:
This guide is for beginners who use WordPress on Cloudways with the Breeze plugin.
How to Enable Lazy Load Images
Log in to your WordPress Dashboard.
Go to Settings > Breeze > Basic Options.
Check the box for Lazy Load Images.
Click Save Changes, then purge the cache.
Important:
Always purge the cache after you turn this on. Old cached pages still have the original image tags.
Breeze handles images, videos, and iframes as separate features. Each one can be controlled and fixed on its own. Breeze also supports WebP images in the same way as JPEG and PNG images.
JavaScript Lazy Load and Native Lazy Load
Breeze can lazy load in two ways:
JavaScript lazy load: Breeze swaps the image address for an empty placeholder. The real image loads when it is within 300 pixels of the screen. This distance is fixed and cannot be changed.
Native lazy load: Breeze adds the
loading="lazy"attribute, and the browser decides when to load the image. Images already visible when the page opens load right away. (An attribute is an extra piece of information inside an HTML tag.)
You choose between them with the Enable native browser lazy load setting.
Breeze has moved toward native lazy load over time. It also uses a lighter library, Vanilla LazyLoad, which adds less JavaScript to your site. (A library is a ready-made set of code that a plugin uses.)
How Lazy Load Works for Videos and Iframes
Videos
Breeze lazy loads only <video> tags that have the src attribute directly on the tag:
<video src="video.webm" type="video/webm" controls></video>
A video that uses a <source> child tag is not lazy loaded:
<video> <source src="movie.mp4" type="video/mp4"> </video>
This is a common reason why a video does not lazy load, even when the setting is on. Some themes and video plugins create this kind of code.
Iframes
An iframe is a frame that shows content from another website, such as an embedded video.
JavaScript lazy load: Breeze delays only iframes from a built-in list of domains. These include YouTube, Vimeo, Dailymotion, Facebook video, Wistia, Brightcove, Twitch, BitChute, TikTok, Amazon S3, and Cincopa. Other iframes are left as they are.
Native lazy load: Breeze adds
loading="lazy"to every iframe that does not already have it.
A developer can add a domain to the list with the breeze_iframe_lazy_load_list filter. There is no setting for this in the dashboard.
Why Are Some Images Not Lazy Loaded?
Check these points in order:
Lazy Load Images is on, and you purged the cache after turning it on.
The image is a normal
<img>tag in the HTML. Images added later by JavaScript, or set as a CSS background, are not changed.In JavaScript mode, Breeze skips an image when:
both
widthandheightare on the tag and each value is 1 or less.the tag has a quoted skip attribute, such as
data-no-lazy="1".the image address contains
wpcf7_captcha/orwoocommerce/assets/images/placeholder.png.
In native mode, the browser decides. Images already on screen load right away.
The page is in Never Cache URL(s), or it is a feed or a preview. Breeze applies lazy load only when it saves a page into the page cache.
Why Do My Images Show the Wrong Size or Cause Layout Shifts?
A layout shift happens when page content jumps because an image loads late and changes the space on the page.
This happens with JavaScript lazy load. The placeholder uses the width and height already on the <img> tag.
If these attributes are missing, the placeholder is 0×0, and the layout jumps when the real image loads.
If they are wrong, the image shows at the wrong size until it loads.
To fix this, add correct width and height values to your images. Native lazy load does not create this placeholder, so it avoids the problem.
Frequently Asked Questions
Can I turn off lazy load for one post or page?
No. Lazy Load Images applies to the whole site. You can add a URL to Advanced Options > Never Cache URL(s). That page is then not cached, so Breeze does not change its images either. It is served without Breeze page cache.
Can I turn off lazy load for one image?
Not from the dashboard, because there is no exclude box. In JavaScript mode, you can add a quoted attribute to the image tag, such as data-no-lazy="1". An attribute with no value is not skipped. In native mode, these skip rules are not used. Breeze adds loading="lazy" to every image that does not have it, even if the tag says loading="eager".
Can I exclude one iframe from lazy load?
No. Iframe lazy load is on or off for the whole site.
Can I skip the first few images at the top of the page?
No. There is no setting to skip a set number of images. Native lazy load comes closest, because images already visible when the page opens load right away.
Can I change the lazy load distance?
No. The JavaScript loader starts loading an image at 300 pixels from the screen. This value is fixed in the plugin.
Does Breeze add a fade-in effect to lazy-loaded images?
No. There is no fade option.
What is Cross-Origin Safe Links? Is it part of lazy load?
No. It is a separate setting in the same area of the dashboard. When it is on, Breeze adds rel="noopener noreferrer" to links that open in a new tab. This is a security best practice for external links. It does not affect SEO or your affiliate links, and it does not change how images or videos load.
That’s it! We hope this article was helpful.