Image Lazyload

About

It’s important to lazyload all images that are not visible on initial page load. Breeze automatically uses background lazyload for all background images added using Magento Page Builder. Except the first background image since there is a high chance that it’s an above the fold promo banner.

Additionally you can define your own lazyload rules using XML layout update instructions.

Source Code:

Lazyload using XML layout update

With this powerful method you can lazyload images and backgrounds of any content generated by Magento or third-party module.

Let’s create a custom lazyload rules:

Create default.xml layout update in your theme:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.lazyImages">
            <arguments>
                <argument name="image_xpaths" xsi:type="array">
                    <item name="unique_name" xsi:type="string"><![CDATA[//div[contains(@class, "third-party")]//img]]></item>
                </argument>
                <argument name="background_xpaths" xsi:type="array">
                    <item name="unique_name" xsi:type="string"><![CDATA[//div[contains(@class, "third-party-wrapper")]]]></item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

That’s all.

Now, when Breeze will find the images inside <div class="third-party"> it will add loading="lazy" attribute to each matched element and add fetchpriority="low" attribute.

A few words about lazyload background images:

Lazyload backgrounds will work for styles declared in CSS styles:

<div class="third-party"></div>
<style>
    .third-party { background: "..."; }
</style>

If you have an element with inline background:

<div style="background-image: '...'">

do not try to use breeze.lazyImages. We do not support this case.