How to resolve the “Lazy load third-party resources with facades” issue for WordPress sites
This guide will provide the steps for resolving the “Lazy load third-party resources with facades” issue when testing your site for performance on Lighthouse. It is an important issue to address because third-party resources like embedded YouTube videos directly affect page load time.
Videos are a great way to add information to your page. However, they can slow down the loading of the page if the videos are immediately loaded. It is recommended to lazy-load these videos by showing a facade, such as a thumbnail, then loading the video upon user interaction, such as upon click.
While there are recommended facades by Google, they are yet to add one for WordPress sites, so I built a block called that lets you add a YouTube Video and the desired thumbnail:
The block is simple. It needs the YouTube URL and the thumbnail you would like to use. Just add the two and you are done!
To add this block to your site:
- Download the latest version of the plugin here – https://github.com/Rick-Labs/video-facade-for-youtube/releases.
- Install and activate the plugin
- Edit the page or post with the WordPress editor
- Click on the Insert Block (plus sign) from the top-left corner, or simply type
/on the editor to show the list of available blocks - Look for the Video Facade for YouTube block
- Select the block
- Add the YouTube URL on the URL field
- Then click on Add Thumbnail to add the thumbnail you would like to use. (Note: Compressing the image and converting it to WebP would be recommended. This reduces the file size and would make the page load even faster. I recommend using a tool like Optimole’s Compress and convert to WebP tool)
- Save your post and preview.
To see the block in action, here is a YouTube Video embedded using this block:
Apologies for the Rick Roll, though.
Please let me know what you thought about the block. If you have questions or want me to optimize your site for speed, feel free to reach out through the following:
LinkedIn – https://www.linkedin.com/in/rick-labs/
Upwork – https://upwork.com/freelancers/ricklabs (Top Rated)