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
__fold__
blockAdd 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
__fold__.experimentalLazyAssets
block__fold__.experimentalLazyAssets
block to your store's home page (store.home
theme template) for better results.
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"
]
},
__fold__.experimentalLazyAssets
block, can be detrimental to the proper functioning of these interactive components, negatively impacting user navigation.
__fold__
and the __fold__.experimentalLazyAssets
in the template's block list is enough for improving your website's performance.
Updated 7 days ago