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#home
loads initially. - On desktop, both
carousel#home
andshelf#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.