Lazy render is a simple technique which can help you improve the load of your website by rendering HTML elements lazily. So in this post we will help you On how to Lazy Render HTML elements.
To do it you will need to write a single line of CSS. Yes that’s all you need to reduce the render time of your website.
You can bring down the rendering time of your website from 1400ms(1.4seconds) to 300-400ms(0.3s). That’s in my opinion a massive gain.
So all these elements which will be rendered Lazily will be rendered once that element comes inside the viewport.
This technique will be more effective for complex or big websites, as it can help in improving Largest Contentful Paint.
A great use-case is lazy rendering comments of you get a lot of comments on your posts, as comments can get complex.
CSS code for Lazy Rendering HTML Elements
#element_id{content-visibility:auto;contain-intrinsic-size:1px
That’s it the element will Lazy load now. You just need to replace the #element_id with the elements you want to lazy render.
To lazy Render multiple elements you can follow something like this.
#element_id, .some-class, input{content-visibility:auto;contain-intrinsic-size:1px
Or you can use other CSS operators too like the following.
#section > .comments-section{content-visibility:auto;contain-intrinsic-size:1px
Note:- This CSS code will not work on Safari browser as content-visibility is not supported by Safari. But Chromium browsers like Chrome, Edge, Brave all support it.
Choosing the right theme is essential when you want good page speed, as the theme is the foundation of your WordPress site. You can read our simple guide on How to Choose a WordPress Theme.
Lazy render HTML elements does not affects Google Search Crawlers in any way so its safe to use and enjoy the faster render speed.
Do let us know in comments if it helped you or not, you can test the improvements in the Performance tab in Chrome to go there right click in the browser and click on Inspect and then go to Performance, there click on reload icon and it will start the test. The improvements won’t reflect in Lighthouse