- Published on
Native Lazy Loading YouTube Video
- John Siwicki
The Chrome team has announced that in Chrome 75, they will ship a feature that will allow you to native lazy load images and iframes right in the browser. Now, there is no need for extra scripts or strange plugins to be able to delay loading those assets until they are in the viewport.
If you have ever run a Lighthouse test on a site, there are always a few products that pop up as committing bad acts and that is Google Analytics and Youtube Videos. GA I can understand to some degree for tracking pixels there might be some underlying need for it. But, Youtube embeds can start to get beefy and really slow down your JS processing time, especially since we don't need it if the user will ever watch your video at all.
The code to add is just the attribute loading="lazy" to your iframe code. So, the full embed code would look something like this.
<iframe src="video-player.html" loading="lazy"></iframe>
Updated: Clever Method over at CSS Tricks: