Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Lazy load third-party resources with facades

Overview

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 Lazy load third-party resources with facades audit
You can reduce your initial load footprint drastically by lazy loading third-party resources with facades

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).

The Lazy load third-party resources with facades audit
GTmetrix identifies the third-party embeds that can be lazy loaded with facades.

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:

2) Using Google's recommended facades

You can use any of the open-source facades recommended by Google. Some of these facades involve inserting code in your page's HTML, while others involve importing JavaScript plugins and libaries onto your page.

Read more on these open-source facades here.

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.

Summary

7.0.0
 ***