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.
Written by Oscar de la Hera Gomez
First published on 12/30/2023 at 16:24
Last Updated on 12/30/2023 at 16:40
Add the loading="lazy" property to the HTML syntax of the image, video or iframe.
SubscribeLazy 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.
SubscribeContact UsVisit our BlogView our ServicesView our Work