Lighthouse: Lazy load third-party resources with facades
Lazy loading your third-party resources with facades basically means delaying the loading of your actual third-party embeds and replacing them with static elements. The actual third-party embed is only loaded when the user interacts with the facade.
In doing so, you can reduce the browser's time spent on processing extra scripts during the initial phase of the page load, resulting in an overall faster loading page.
How does your site score on this audit?
How does lazy loading third-party resources with facades affect page performance?
Lazy loading third-party resources with facades defers the loading of resources that would otherwise slow down your page and make it less usable.
By default, third-party resources are loaded as soon as the page loads. In general, they can slow down your page due to a number of reasons, including slow server response times, slow DNS lookups, server response errors, and scripts blocking your main-thread, among others.
However, if your third-party embed is non-critical (e.g., ads, videos, social media widgets), you can reduce its impact on your page's performance by replacing the embed with a facade, which is essentially a placeholder.
Loading a facade only takes a small fraction of the time required to load the third-party embed itself, allowing the browser to load other critical content first.
The facade looks similar to the actual third-party embed, but has a minimal impact on performance, because scripts only get downloaded and executed when the user interacts with the lazy loaded element.
This improves your page experience as it loads faster, and users can interact with the overall page sooner.
How does GTmetrix trigger this audit?
GTmetrix identifies the third-party embeds on your page that can be lazy loaded like social media widgets, ads, video embeds (e.g., YouTube embedded player).
This list of third-party embeds is then cross-referenced with the Third Party Web library, which tracks the performance impact of known third-party scripts.
Third-party scripts that are included in the Third Party Web library are then flagged.
How to lazy load third-party resources with facades?
To lazy load third-party resources with a facade, load the page with a static element/placeholder that looks similar to the actual third-party embed. You can do this in a few ways:
1) Using CMS Plugins (For WordPress or other CMS)
CMS users can use plugins that offer out of the box functionality to replace third-party embeds with placeholders.
Here are some free plugins that offer this functionality:
Consider using a premium plugin like WP Rocket to not only lazy load third-party resources with facades, but apply other important web performance best practices as well.
2) Using Google's recommended facades
3) Manually creating facades on your page
If you're tech-savvy, you can manually create your own facade to reduce the impact of third-party embeds on your page performance. Here's the recommended workflow:
- Display a facade instead of the third-party embed during the initial page load.
- Preconnect to the third-party resource's domain when a user scrolls or hovers over the facade.
- Replace the facade with the actual third-party embed when the user clicks on it.
Caveats for lazy loading third-party embeds with facades
While lazy loading third-party embeds with facades can improve your page's performance, you should be wary of some potential tradeoffs.
1) Lazy loading your third-party embeds may sacrifice some functionality
If your site uses chat/social media widgets, and/or ads, your visitors likely won't be able to immediately interact with them until the embeds are loaded. This means functionality like live message updates for chat widgets or dynamic ads may not function as designed.
2) Lazy loading videos could interfere with autoplay functionality
If your website depends on autoplay functionality, you may have to consider alternatives or refrain from lazy loading the videos.
3) Importing dynamic third-party content may not be straightforward
As third-party content is out of your control, designing a facade to match the visuals rendered by your third-party embeds may not be possible, particularly for dynamic content, such as ads and social media widgets.
4) CMS plugins may break your site
Lazy loading plugins may be incompatible with other plugins on your site, or may break your site entirely. Check with the plugin developer for known incompatibilities and potential issues.
Regardless of the method chosen, it is recommended to test lazy loading third-party embeds on a staging site to ensure that it doesn't break your site. You should also weigh the performance benefits against any potential limitations in functionality.