Using the Fold blocks

In the VTEX IO Store Framework, there are two key blocks responsible for improving your website's performance.

The first one is the __fold__ block, responsible for defining which interface components will be loaded first for rendering and which will be loaded together with the user's scrolling.

The second, called __fold.experimentalLazyAssets, defines which components will be loaded statically until the first interaction with users.

Both are strategic, since they directly impact the initial loading performance of the page on which they are configured, improving your store's UX.

The good news is that these two block can and should be used together to ensure maximum impact in terms of website performance. Check out the step by step below.

Step by step

Adding the __fold__ block

Add the __fold__ block to your theme's desired templates, such as store.product and store.home. For example:

"store.home": {
  "blocks": [
    "carousel#home",
+   "__fold__",
    "shelf#home",
    "info-card#home",
    "rich-text#question",
    "rich-text#link",
    "newsletter"
  ]
},

Once added, all blocks below it will get their components loaded only with user scrolling. Therefore, it's crucial for this block to be used only in scenarios in which your page is scrollable.

When using the __fold__ block, you can also define different scenarios for mobile and desktop mode, adding __fold__.mobile and __fold__.desktop instead:

"store.home": {
  "blocks": [
    "carousel#home",
+   "__fold__.mobile",
    "shelf#home",
+   "__fold__.desktop",
    "info-card#home",
    "rich-text#question",
    "rich-text#link",
    "newsletter"
  ]  
},

This configuration by device is very useful, since components are viewed differently on desktop and mobile.

In the example above, both the Carousel and the Shelf will be displayed with the first meaningful paint on desktop mode. However, for mobile users, only the carousel will be loaded first.

Adding the __fold__.experimentalLazyAssets block

In the template's block list, add the __fold__.experimentalLazyAssets above the blocks whose loading will be static until the user's first interaction. For example:

"store.home": {
  "blocks": [
    "carousel",
+   "__fold__.experimentalLazyAssets", 
    "flex-layout.row#homeBrands",
    "flex-layout.row#homeBanner",
    "__fold__",
    "tab-layout#home",
    "tab-layout#home2",
    "carousel#homeFooter"
  ]
},