Having a video on your website is an increasingly popular way to display content. It's also pretty notorious for slowing down a website's page speed if not done correctly, and is one of the largest contibutors to website carbon emissions. So what can we do about it? How can we leverage a facade to help.
Facade means "a deceptive outward appearance". This is what we're going to do but in code to lazy load third-party resources. We're going to fake the appearance of having loaded a YouTube video, but holding back the functionality until the user interacts with the player.
One in 20 pages now include a
<video>element, representing an increase of 18% year-over-year. - httparchive
Doing this on EcoPing reduced the initial load of the YouTube video by 11 requests or 580 kB, which is pretty darn awesome!
As EcoPing is a fancy Gatsby app, written in React, I chose to use
react-lite-youtube-embed; a great little module that worked great out of the box. But there are other ways to do it depending on your tech stack. You can see a few below.
lazyframeA nice little dependency-free library for lazyloading iframes
react-lite-youtube-embedA nice little module that's simple, well maintained with a few dependencies