Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store Framework
Managing performance
Lazy loading components

Store Framework provides two key blocks, __fold__ and the __fold__.experimentalLazyAssets, designed to enhance your website's performance. These blocks significantly influence the initial loading performance of the configured page, ultimately enhancing the overall user experience on your storefront.

  • __fold__: determines the priority of loading interface components, specifying which ones render first and which load concurrently with user scrolling.
  • __fold__.experimentalLazyAssets (optional): specifies components that remain statically loaded until the initial user interaction occurs, offering flexibility in optimizing the loading strategy.

This guide will walk you through the effective use of these blocks.

Using the __fold__ block

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


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

Once added, all blocks below the __fold__ block will load components only with user scrolling. Hence, this block should be used only when your page is scrollable.

Device-specific configuration

You can customize scenarios for mobile and desktop modes using __fold__.mobile and __fold__.desktop:


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

In this example, the carousel and the shelf will be displayed with the first meaningful paint on desktop mode, while for mobile users, only the carousel will load initially.

Google may not track content under the __fold__ block for SEO purposes. Hence, make sure to place all SEO-relevant information above the __fold__ block.

Optional: Using the __fold__.experimentalLazyAssets block

Use the __fold__.experimentalLazyAssets block with caution as it's experimental and may cause side effects, such as failing to render an interactive component in the storefront. For scenarios where you need to lazy load images and product data in a slider, consider building a carousel using Slider Layout.

In the template's block list, add the __fold__.experimentalLazyAssets above the blocks whose loading will be static until the user's first interaction. Consider adding this block to your store's home page for optimal results. For example:


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

Ensure adding it below blocks with interactive components like the carousel to prevent potential issues with proper functioning and user navigation.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Contributors
1
Photo of the contributor
+ 1 contributors
On this page