How to speed up your website's homepage video
Lazy load third-party resources with facades and speed up your website's homepage video, improve SEO and boost overall performance.
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.
Keep it simple
lazyframeA nice little dependency-free library for lazyloading iframes
Add a YouTube video in React
react-lite-youtube-embedA nice little module that's simple, well maintained with a few dependencies
Lazy-load a chatbot
Chose a .webm file format
WebM is an open video format introduced by Google for multimedia content, such as audio and video.
It's like .webp for images but for video and a great was of reducing your video
Read more: Google - Lazy load third-party resources with facades
Back to blog