For sites using Magento Klevu module versions 3.x or 2.x, please refer to this article. For version 4.x, kindly follow this link.
We provide the option to lazy-load our theme scripts. Enabling lazy-load will improve your lighthouse performance score, however, there is more to consider.
When using Klevu Js Theme for Search Results Page landing-page-theme.js or landing-page-theme.lazyload.js is required to render content.
When using Klevu Js Theme for Category Navigation catnav-theme.js or catnav-theme.lazyload.js is required to render content.
With lazy-load disabled, the initial script sizes are more prominent making the first-page load slightly slower, they are however cached by the browser making all subsequent pages loads faster.
With lazy-load enabled, the initial script sizes are tiny. These scripts then request more resources when required, which can slightly slow the display of products compared to when lazy-load is disabled, especially after the first-page load when none of the lazy-loaded scripts are cached.
We have included the option to enable/disable lazy-load so you may try both settings and determine which works best for your site. Configuration settings are located at:
Magento admin > Stores > Configuration > Klevu > Search Configuration > Developer Settings
- Lazy-load Quick Search JavaScript
- Lazy-load Search Results Landing Page JavaScript
- Lazy-load Category Page JavaScript
Options for each setting are Yes or No.
Note: Settings will only show if Magento admin > Stores > Configuration > Klevu > Search Configuration > Developer Settings > Theme Version is set to Klevu JS Library Theme (aka JSv2) & Can be set at the Global, Website or Store level.
Klevu's Recommended settings are:
- Lazy-load Quick Search JavaScript - Yes (this setting is not required to load products on the page and can be loaded in the background)
- Lazy-load Search Results Landing Page JavaScript - No
- Lazy-load Category Page JavaScript - No