Lazy load third-party resources with facades

Third-party resources are often used for displaying ads or videos and integrating with social media. The default approach is to load third-party resources as soon as the page loads, but this can unnecessarily slow the page load. If the third-party content is not critical, this performance cost can be reduced by lazy loading it.

This audit highlights third-party embeds which can be lazily loaded on interaction. In that case, a facade is used in place of the third-party content until the user interacts with it.

An example of loading YouTube embedded player with a facade. The facade weighs 3 KB and the player weighing 540 KB is loaded on interaction.
Loading YouTube embedded player with a facade.

How Lighthouse detects deferrable third-party embeds

Lighthouse looks for third-party products which can be deferred, such as social button widgets or video embeds (for example, YouTube embedded player).

The data about deferrable products and available facades is maintained in third-party-web.

The audit fails if the page loads resources belonging to one of these third-party embeds.

Lighthouse third-party facade audit highlighting Vimeo embedded player and Drift live chat.
Lighthouse third-party facade audit.

How to defer third-parties with a facade

Instead of adding a third-party embed directly to your HTML, load the page with a static element that looks similar to the actual embedded third-party. The interaction pattern should look something like this:

  1. On load: Add facade to the page.

  2. On mouseover: The facade preconnects to third-party resources.

  3. On click: The facade replaces itself with the third-party product.

In general, video embeds, social button widgets, and chat widgets can all employ the facade pattern. The list below offers our recommendations of open-source facades. When choosing a facade, take into account the balance between the size and feature set. You can also use a lazy iframe loader such as vb/lazyframe.

YouTube embedded player

Vimeo embedded player

Live chat (Intercom, Drift, Help Scout, Facebook Messenger)

Writing your own facade

You may choose to build a custom facade solution which employs the interaction pattern outlined above. The facade should be significantly smaller in comparison to the deferred third-party product and only include enough code to mimic the appearance of the product.

If you would like your solution to be included in the list above, check out the submissions process.

Resources

Source code for Lazy load third-party resources with facades audit.