Optimize Page Speed with Magefan CMS Display Rules

When it comes to purchasing decisions, customers pay attention to a lot of things in your store, loading speed being one of the most important ones. And while you can improve website speed by reducing the size of images or disabling the JS bundling,  it is not always enough. 

Correspondingly, today we want to drive your attention to the page element that always gets overlooked when it comes to speed optimization — CMS block. In this article, you'll learn how to optimize page speed with the CMS Display Rules Extension.

The Uses of Ajax Requests

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 product included in DOM

CMS Block - Products Included In DOM

CMS block products loaded via Ajax request

CMS Block - Products Loaded Via Ajax Request



Ajax load on first scroll

Page Size



Time To Load Page Content

783 ms

591 ms


1.43 s

1.11 s

Page Load

3.13 s

2.58 s

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 Optimize Page Speed with CMS Display Rules?

You can improve the loading speed easier than you think. You just need to take a few simple steps.

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

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

Note: you can enable template path hints to find the templates faster.

3. Recreate this element in a CMS block. You can call the phtml file in CMS static block 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.

4. Change CMS block display mode to one of the following, just as the CMS display rules configuration suggests:

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

CMS block Display Mode Configuration

These methods do separate requests to load CMS block content. Thus, it is one of the easiest and fastest ways to optimize 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 optimize the loading of CMS blocks content there might be some other things to tackle to speed up Magento 2.