Improve page performance and user experience by lazy loading any WordPress block. Don’t let video embeds and newsletter signups delay the critical assets required for rendering your site!
How it Works?
It uses the render_block filter to wrap the block output with the following markup:
<div data-lazy-block="...">
<noscript>...</noscript>
</div>which hides the block output for all browsers with Javascript enabled while allowing search engines to crawl the block content.
It then relies on the Intersection Observer browser API to fully replace the placeholder <div> with the markup inside the <noscript> tag when the block is a full viewport height away from the placeholder.
Web Vitals and Layout Shift
Lazy loading blocks improves the Web Vitals (and the PageSpeed metrics), and doesn’t impact the layout shift (CLS) when the lazy loading is triggered as shown in this browser performance trace:
Usage
Use the block controls to enable the lazy-load of any WordPress block:
Demo
View this demo page with a video and a paragraph being lazy-loaded.
Get it Now
Get it for a special price of $5/month (billed annually) during this pre-launch phase:
Support
Support is provided directly by the plugin author and developer over email — simply send your question or suggestion to support@wpelevator.com
Roadmap
- Delay loading any JS scripts and CSS styles registered with the lazy-loaded blocks to ensure their init logic works when the DOM elements are not present initially.
- Add a filter to specify block types that should support lazy load.
- Consider storing the aspect ratio of the block in the editor and use it for the lazy-loading placeholder height.