How to defer the loading of images, videos and iframes
Add the loading="lazy" property to the HTML syntax of the image, video or iframe.
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed.
It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
Examples for the images, videos or iframes are found below.
Image
<img src="sample.jpg" alt="sample" loading="lazy" />
Video
<video src="video.mp4" poster="sample.jpg" autoPlay playsInline muted loop preload="preload" loading="lazy" />
iframe
<iframe title="title" src="url" loading="lazy" />
Looking to learn more about ReactJS and SEO ?
Search our blog to find educational content on learning ReactJS and SEO.
Any Questions?
We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.