template

Lazy load YouTube embeds and preload placeholder image

Repo Release Link Client Features Developer
repo 16/12-24 link RoomSketcher embedlazy loadvideo Stian

Functionality

Using the normal YouTube embed block can really affect the load time of your page. This is because YouTube appends a lot of scripts just to display the embed player even if the embed is out of view. By adding the Lazy Load for Videos plugin only the video placeholder image is displayed. In some cases we’ve seen drop of almost 3.5 MiB on pages with just a single video.

If you’d like to take it even one step further, and get even better score, you can preload the placeholder image by adding a <link rel="preload" as="image" href="%s" /> to the page header. Have a look at how we’re preloading the placeholder image for the first YouTube block on a page on RoomSketcher.