NitroPack’s HTML Lazy load removes HTML DOM elements from the initial HTML payload. Then, it loads them asynchronously as fragments in the background when the user scrolls on the page. You can use regular CSS-like selectors to configure which elements will be lazy-loaded.
Removing the elements from the original HTML cache reduces the page weight and massively improves the initial page load time.
Typical candidates for HTML Lazy Load are below-the-fold sections or large grids/stacks of repeating elements that take up space on the page but are not immediately visible on page load.
For example:
A blog post that has a lot of comments - The comment section can be lazy loaded
Shop pages - Sections of products below the fold can be lazy loaded
Pillar Blog Posts - Paragraphs below the fold can be lazy loaded
And more
What are the results after applying HTML Lazy load to a page?
The example below is from a blog post page with many comments under the post.
By configuring HTML lazy load, we reduce the HTML Document size by 60%, making it easier for the browser to initially parse the content and render the page quicker.
When running the control page versus the page where HTML Lazy Load is configured, the results in https://pagespeed.web.dev/ are obvious.
In the example below, HTML Lazy Load contributes to lowering the Total Blocking Time from 1300ms to 160ms.
Also, the warnings about Avoid an excessive DOM size ot Minimizing main thread work are completely gone on the improved page.