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.

Posted on

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

  • lazyframe A nice little dependency-free library for lazyloading iframes

Add a YouTube video in React

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
🚀 On a mission to reduce the carbon footprint of the Internet! 🌎
EcoPing logo - tracking website carbon emissionsbeta

© EcoPing 2020-2023