Optimize CMS Blocks Loading with Dynamic Blocks
Tags
configuration

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 reducing the size of images or disabling the JS bundling,  it is not always enough. 

So, today we want to drive your attention to the page element that always gets overlooked when it comes to speed optimization — CMS block. You'll learn how to optimize the loading of CMS blocks in Magento using Dynamic Blocks.

Post Contents [hide]

  1. The Uses of Ajax Requests
  2. How to Optimize Page Speed with Dynamic Blocks?

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

Param

Default

Ajax load on first scroll

Page Size

26.2kb

15.9Kb

Time To Load Page Content

783 ms

591 ms

DomContentLoaded

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 Dynamic Blocks?

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 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.

4. Change CMS block display mode to one of the following, just as the dynamic block settings 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.