How to Lazy Load CMS Blocks in Magento?

When it comes to purchasing decisions, customers pay attention to a lot of things in your store. Loading speed is one of the most important ones. While you can improve website speed by enabling lazy load or images or disabling the JS bundling,  it is not always enough. 

In this guide, you'll learn how to lazy load CMS blocks in Magento using the  Magento 2 Dynamic Blocks and Pages Extension.

CMS Blocks Display Modes

We've created two CMS pages with the same content: a banner and a product slider. One page contains a CMS block with default display mode, second — a CMS block with display mode Ajax load on first scroll.

Now, let's compare display modes Default and Ajax load on the first scroll.

CMS Block - Products Included In DOM

CMS Block - Products Loaded Via Ajax Request

Page speed score is better if some elements like sliders, and widgets are loaded in separate Ajax requests. It saves time on content download and page rendering.

Moreover, it can significantly improve page speed, especially if the page contains sliders with many items or heavy blocks located outside the viewport.  

How to Lazy Load CMS Blocks in Magento?

You can improve the loading speed for content blocks more easily than you think. You just need to take a few simple steps to lazy load CMS blocks in Magento.

Step 1: Find widgets, sliders, video, blocks or some other elements that affect the speed score.

Step 2: Figure out how this element is added to the page (Layout/Widget/*.phtml).

Step 3: Recreate this element in a CMS block. You can call the CMS block in phtml file in Magento 2 in the following way:

{|{block class="Magento\Framework\View\Element\Template" template="Vendor_Module::template.phtml"}}

Besides, you can insert any widget in the CMS block.

Step 4: Change CMS block display mode to one of the following, after you enable dynamic blocks:

• Lazy load on scroll
• Ajax load on page load
• Ajax load on first scroll

These methods do separate requests to load CMS block content. Thus, it is one of the easiest and fastest ways to optimise the page speed of your website. All that you need to do is add your element to the CMS block and change the display mode.

Nevertheless, once you lazy load CMS blocks in Magento, you might need to optimise other things in order to speed up Magento 2.