Lazy Embed: Reducing emissions and improving performance for 43% of the internet

As of January 2023, WordPress is the most popular Content Management System (CMS) on the internet, representing over 63% of all websites using a CMS, and one of the most popular ways to build a website in general (43.1%). With such dominance in the web space, it is no wonder that more and more sites are built every day using WordPress, and that any change that can be made to improve the performance, accessibility, and sustainability of a WordPress site, has an impact on a massive scale.

Videos are one of the largest assets (in terms of the amount of data transferred) that can be loaded on a webpage, and as such are one of the largest contributors to high carbon emissions and slow performance.

In fact, adding a YouTube embed to a page using the latest default WordPress theme, increased the page transfer size from 21 kb to 973 kb, and loaded an additional 27 resources. That’s an increase in transfer size of 4533% and enough of an increase in data to change the carbon emissions from 0.005 grams of C02 per page load to 0.244 grams of CO2 per page load. Adding a Vimeo video increased the transfer from 21 kb to 276 kb, an increase in transfer size of 1214%, and loaded an additional 7 resources. Keep in mind that these numbers are before the video has even been watched!

WordPress makes it a trivial exercise to add a video to your site. More often than not, you can simply copy the URL of the video, paste it into the editor where you would like it to appear, and magically the video now appears. What happens behind the scenes is that an HTML element called an iframe is added to the page which uses the URL of the video you provided to load all the required resources to play the video. By adding a video using this method, you also open up the site to load additional resources which you can’t control, including tracking, that further bloat the size of the page.

We could finish the article here and conclude that Vimeo should be used instead of YouTube, but instead, we have developed a simple solution called Lazy Embed.

The Lazy Embed plugin for WordPress defers the loading of any resource required to embed or play a video until the user has requested the video to be played. It does this using a simple trick that is not commonly known and even less commonly used, adding a srcdoc attribute to the iframe which shows in place of the content that would be shown without it. In layman’s terms, the Lazy Embed plugin adds a placeholder image for the iframe.

Google even recommends such a practice now! As part of the audits that Lighthouse runs on a site when it is tested, Lighthouse will check for third party embeds and recommend that a facade be added for supported embeds to improve the performance.

It would be remiss of me to not mention that the technique implemented is not new. There are articles and libraries available that explain and implement the same or a similar approach. What we have seen in the WordPress space is that optimisations for videos only target one video provider, not several, and most load resources into the site to achieve the reduced emissions and performance. Lazy Embed loads no external frontend resources, keeping the page efficient and fast.

After adding the Lazy Embed plugin to a site using the default theme, and a page that has a YouTube embed, the transfer size was reduced from 934kb to 35kb, and the emissions reduced from 0.244 grams per page load to 0.008 grams per page load.

Getting started with Lazy Embed is easy, simply install the plugin in your WordPress dashboard and YouTube, Vimeo, and Dailymotion videos will be optimised automatically.

At Beleaf, we actively work on products and tools that help deliver more efficient, accessible websites for our clients, and also for the industry as a whole. Take a look at some of the other projects we’re working on over on our projects page.

Or, if you want to see some of the low emissions, high-performance work we have been doing, head to our work page.

If you have any questions about Lazy Embed or any of our other projects, do get in touch or give us a call on (03) 4050 7773