Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store Framework
Lazy loading components

In this guide, you’ll learn how to use the __fold__ and __fold__.experimentalLazyAssets blocks to optimize component loading and improve store performance. Below is an overview of these blocks:

BlockDescriptionInstructions
__fold__Determines the loading priority of interface components, and defines which elements load first and which load dynamically as users scroll down the page.Using the __fold__ block
__fold__.experimentalLazyAssets(Optional) Keeps specified components statically loaded until the user's first interaction, offering additional flexibility in load management.(Optional) Using the __fold__.experimentalLazyAssets block

By implementing these blocks effectively, you can enhance store initial loading time and overall user experience.

Using the __fold__ block

Add the __fold__ block to any store theme templates you want, 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
},

In this configuration:

  • Components above __fold__ (for example, carousel#home) will load immediately.
  • Components below __fold__ (for example, shelf#home, info-card#home) will load dynamically as the user scrolls.

Use __fold__ only on scrollable pages. Non-scrollable pages don’t benefit from this optimization.

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 configuration:

  • On mobile, only carousel#home loads initially.
  • On desktop, both carousel#home and shelf#home load initially.

SEO considerations: Google may not index content under the __fold__ block. Ensure all critical SEO-relevant components are placed above the __fold__ block.

(Optional) Using the __fold__.experimentalLazyAssets block

This block is experimental and may cause unexpected effects, such as failing to render an interactive component in the storefront.

Add the __fold__.experimentalLazyAssets above the blocks you want to defer. Consider adding this block to the store homepage 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
},

Make sure __fold__.experimentalLazyAssets is below interactive components (for example, carousel) to avoid rendering or navigation issues.

Best practices

  • Prioritize above-the-fold content: Make sure that critical components, such as banners or carousels, are placed above the __fold__ block so they load quickly and are indexed by search engines.
  • Optimize for different devices: Use __fold__.mobile and __fold__.desktop blocks to adjust the loading sequence based on the device, optimizing the experience for both mobile and desktop users.
  • Monitor store performance: Use tools like Google Lighthouse to evaluate the impact of lazy loading and fine-tune your configuration. Learn more in Performance.
  • Ensure SEO visibility: Position essential SEO elements, such as metadata and key textual content, above the __fold__ block to ensure they are indexed by search engines. Learn more in SEO.
  • Use __fold__.experimentalLazyAssets carefully: This block is experimental and may cause rendering or interaction issues. Always test thoroughly before deploying to production.
  • Lazy load images and product information efficiently: For scenarios where you need to lazy load images and product information in a slider, consider building a carousel using Slider Layout.
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
See also
Enabling performance settings
Guides
Contributors
2
Photo of the contributor
Photo of the contributor
On this page