Magento 2 Lazy Loading for Images and iframes
SKU: LAZYLOADINGIMAGES1
- images and iframes load as you scroll
- LCP image and first images stay excluded
- placeholders and fixed dimensions against layout shifts
- exceptions by CSS class, page or area
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 lazy loading: load fast without slowing the most important image
With Magento 2 lazy loading from Mironsoft, images and iframes of your shop load only once the visitor has almost reached them. That saves data and speeds up the first display. The most important image above the fold, the LCP image, stays excluded and is even loaded with priority. The module complements what Hyvä already does in the template with content from CMS, blog and third-party blocks.
Defer images
Images outside the visible area load only when the visitor is about to reach them.
iframes and videos
Embedded maps and videos load once they come into view and save requests.
LCP exception
The largest image on the first screen loads immediately and is delivered with high priority.
Placeholders
Until the image arrives, a placeholder in colour or as a frame holds the intended format.
Fixed dimensions
If width and height are missing on an image, the module adds them so the text does not jump.
Rules and exceptions
Define exceptions by CSS class, page type or layout handle.
Why Magento 2 lazy loading noticeably relieves the load time
Product lists, blog posts and CMS pages often contain dozens of images. If the browser loads all of them at once, they compete for the same bandwidth as the most important image and the page scripts. Visitors on mobile wait longer although they do not even see the lower images yet. That is why merchants look for Magento 2 lazy loading, for a way to defer Magento 2 images or for solutions to load time problems in Google PageSpeed.
The order matters. Anyone who defers everything across the board also delays the LCP image and worsens the very value that lazy loading is meant to improve. Magento 2 lazy loading with exception rules therefore separates clearly: what is visible immediately loads first and everything below follows later.
Magento 2 lazy loading for images: load only what becomes visible
The module adds the matching deferred-loading behaviour to images in the output HTML. In the normal case it sets the native browser attribute and adds a margin so that the image starts loading shortly before the viewport. This applies to content from CMS blocks, blog posts, page builder elements and product descriptions that a theme does not handle itself. Browsers without support show the image immediately; a noscript fallback makes sure it never goes missing.
- Native browser feature, no extra script needed
- Lead distance in pixels adjustable
- Fallback for browsers without support
Exclude the LCP image from Magento 2 lazy loading
Largest Contentful Paint is usually a large image in the upper part of the page. It must never be deferred. The module therefore skips the first images of every page, a number you define, and can additionally give the most important image a high fetch priority. Where the LCP image is not the first one, mark it with a CSS class. An exception per page type, such as home page or product page, is possible as well.
- First N images per page load immediately
- High priority for the most important image
- Exception by CSS class or page type
Defer iframes and embedded content with Magento 2 lazy loading
Embedded maps, videos and forms often pull more data than the whole page layout. The module switches iframes to deferred loading and shows a placeholder with the desired aspect ratio until then. For videos from third-party portals a click on the placeholder can load the player first. That protects the load time and prevents connections to foreign servers from opening on page load. Whether consent is needed for that is for the shop owner to assess.
- iframes load in the viewport
- Placeholder in a fixed aspect ratio
- Optionally only after a click on the placeholder
Magento 2 lazy loading placeholders and fixed dimensions against layout shifts
If text jumps because an image claims space afterwards, the layout stability score suffers. The module reads width and height from the image file, adds missing values and reserves the space. A neutral colour or a frame serves as the placeholder. If loading fails, the placeholder stays and the page does not shift. The rules apply per store view and can be limited to single page types.
- Width and height are added if missing
- Neutral colour or frame as placeholder
- Configuration per store view and page type
Where Magento 2 lazy loading helps in daily shop work
Typical pages with many images and embedded content.
Category pages with long lists
With Magento 2 lazy loading product images far down load only on scrolling. The first rows appear immediately and the page feels faster.
Blog and guides
Long articles with many images and embedded videos relieve the first page load without readers missing anything.
CMS pages with page builder
Banners, teasers and galleries from the page builder get deferred loading even if the theme does not treat them itself.
Pages with maps and videos
An embedded map in the footer loads only when the visitor scrolls there and does not block the start.
Magento 2 lazy loading compared: without and with the module
The difference to loading everything at once or deferring everything across the board.
| Topic | Without the module | With Mironsoft Lazy Loading Images |
|---|---|---|
| Images below | Load at once and slow things down | Load when reached |
| LCP image | Blanket deferral delays it | Excluded and prioritised |
| iframes | Load on page open | Load in viewport or after click |
| Layout shifts | Image pushes text down | Space reserved |
| Control | All or nothing | Exceptions by class, page or count |
How we set up Magento 2 lazy loading for you
The process after your order.
Measure
We record the current load time of the most important page types as a baseline.
Installation
We install Magento 2 lazy loading and set exceptions for LCP images.
Placeholders
We agree placeholder colour, aspect ratios and iframe behaviour with you.
Test
We check category, product, home page, blog and mobile view for missing images and shifts.
Handover
Your team gets the list of settings and knows where exceptions are added.
Scope: image optimisation and caching
Magento 2 lazy loading only controls when an image is loaded. It changes neither the format nor the size of the file and replaces no image compression, no WebP and no CDN. The page cache remains unchanged as well; the module works together with the Magento full page cache and creates no caching of its own.
The combination brings the most: small files, a fast cache and targeted deferral. The module runs without jQuery and without extra scripts in the Hyvä theme.
No download, but personal setup
Lazy Loading Images is not listed here as a finished download file for self-installation. The purchase is a commission: after the purchase we get in touch, install the module in your shop and agree exceptions, placeholders and iframe behaviour with you.
Frequently asked questions
Everything important about deferral, LCP, iframes and how the purchase works.
How can I enable lazy loading for images in Magento 2?
How can I exclude the LCP image from lazy loading in Magento 2?
How can I lazy load iframes in Magento 2?
Does Magento 2 lazy loading prevent layout shifts?
What happens in browsers without support?
Are images from CMS blocks and the blog deferred as well?
Can I switch off Magento 2 lazy loading per store view or page type?
Does Magento 2 lazy loading work with Hyvä?
Does the module replace image compression?
Can I download and install the module myself?
Recently Viewed Products
Magento 2 Lazy Loading – Mironsoft Lazy Loading Images