Preloading LCP images
About
It’s important to preload LCP images to improve your site performance. Breeze already does this efficiently for generic CMS, Category, and Product pages using the following approach:
CMS page
- Preload images and backgrounds having
class="data-preload"class name and custom rules from XML layout update. - If not found, then preload first background image assigned by Magento Pagebuilder.
- If not found, it tries to preaload first img tag found in the content area, and two product images from possible Product List widget.
Product page
- Preload main image from product gallery. Breeze doesn’t allow to modify this logic.
Category page
- Preload images and backgrounds having
class="data-preload"class name and custom rules from XML layout update. - If not found, preload main category image and first two product images from the product list block.
While this approach if great and doesn’t require coding from theme developers to make it work, sometimes you don’t have access to the markup, or the page is complex and you want to define your own rules.
Source Code:
Preload using CSS class
Product page always preload main gallery image only.
This method is very simple. Just add data-preload class name and Breeze will
preload the image:
<img src="..." class="data-preload"/>
<!-- OR -->
<figure class="data-preload">
<img src="..."/>
</figure>
Warning!
When using this approach, Breeze automatically disables it’s automatic detection.
Preload using XML layout update
Product page always preload main gallery image only.
With this powerful method you can preload images of any content generated by third-party module. You can also use it to create different rules per different layout update handles.
Let’s create a custom rule for category page that will preload first two third-party images when a third-party widget is added above product listing:
Create catalog_category_view.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.criticalImages">
<arguments>
<argument name="image_xpaths" xsi:type="array">
<item name="unique_name" xsi:type="string"><![CDATA[//div[contains(@class, "third-party")]//li[@class="item" and position()<=2]//img]]></item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
That’s all. Now, when Breeze will find the images inside <div class="third-party">
it will add fetchpriority="high" attribute to each matched element and add
preload links to the document head section.
If Breeze will not find the images, then it will use built-in logic for this page.