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:
| Block | Description | Instructions |
|---|---|---|
__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#homeloads initially. - On desktop, both
carousel#homeandshelf#homeload 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__.experimentalLazyAssetsis 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__.mobileand__fold__.desktopblocks 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__.experimentalLazyAssetscarefully: 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.