beleaf

Josh

<p>Videos are one of the largest assets that can be loaded on a webpage, and as such are one of the largest contributors to slow performance and high carbon emissions.</p>
<p>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%. 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.</p>
<p>The Lazy Embed plugin defers the loading of any resource required for playing the video until the video is requested to be played. It does this by adding a srcdoc attribute to the iframe which shows in place of the normal iframe content.</p>
<p>Currently the following third parties are supported</p>
<ul>
<li>Youtube</li>
<li>Vimeo</li>
<li>Dailymotion</li>
</ul>


Lazy Embed

Improves the performance and reduces the emissions of your website by only loading embeds (youtube, vimeo, etc) when they are clicked.

Eneko Garrido

<p>The Website Carbon widget Gutenberg block, made with the Interactivity API.</p>
<h3>Yes, websites have a carbon footprint</h3>
<p><a href="https://www.websitecarbon.com" rel="nofollow ugc">Website Carbon</a> is a service made by <a href="https://wholegraindigital.com/" rel="nofollow ugc">Wholegrain digital</a> to help inspire and educate people to create a zero carbon internet. Provides an easy way to check the carbon footprint of your website.</p>
<p>They provide a official badge to put on your website, and with this plugin, you can have that badge as a reactive Gutenberg block, thanks to the new <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/" rel="nofollow ugc">Interactivity API</a></p>
<h3>How it works</h3>
<p>This plugin adds a new block to the Gutenberg editor, called “Carbonbadge”. You can add it to any post or page, and it will show the carbon footprint of the current page.<br />
The block will render a badge with the carbon footprint of the current page, and a link to the Website Carbon website.<br />
The data is fetched from the Website Carbon API, with a client side call, and it’s updated every time the page is loaded. The result for a concrete page is cached for 24 hours, client side.<br />
More information on the Website Carbon badge can be found <a href="https://www.websitecarbon.com/badge/" rel="nofollow ugc">here</a> and on the website FAQ page <a href="https://www.websitecarbon.com/faq/" rel="nofollow ugc">here</a><br />
The privacy policy of the Website Carbon service can be found <a href="https://www.websitecarbon.com/privacy-policy/" rel="nofollow ugc">here</a><br />
The Website Carbon service is provided by <a href="https://www.wholegraindigital.com" rel="nofollow ugc">Wholegrain digital</a></p>
<h3>The code on GitHub</h3>
<p>You can find the code of this plugin on <a href="https://github.com/garridinsi/carbonbadge-block" rel="nofollow ugc">GitHub</a></p>


Carbonbadge Block

The Website Carbon widget Gutenberg block, made with the Interactivity API.

Lazy Embed vs Carbonbadge Block