This site now uses lazy-loading for the Youtube video embeds. Meaning, a preview image is loaded, and only when you click that is the actual video embed requested.

After posting a few Youtube videos to this site recently, I noticed this was loading a whole lot of quite large third-party resources. And this was happening without even playing a video – very likely resulting in visitors having to download a non-trivial amount of megabytes of no use. The site was slow to load. My Lighthouse score went way down.

So I fixed it.

To lazy load the videos I wrote a Jekyll plugin for a custom Liquid tag, that will take a Youtube video URL as parameter and spit out an iframe tag that uses its srcdoc attribute to at first only load the video’s preview image and display a “Play” button.