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.
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.
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:
- On load: Add facade to the page.
- On mouseover: The facade preconnects to third-party resources.
- On click: The facade replaces itself with the third-party product.
Recommended facades
In general, video embeds, social button widgets, and chat widgets can all employ
the facade pattern. When choosing a facade, take into account the balance
between the size and feature set.
The following list offers our recommendations of open-source facades. 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)
Write your own facade
You may choose to build a custom facade solution
which employs the interaction pattern outlined previously. 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, check out the
submissions process.
Resources
Source code for Lazy load third-party resources with facades audit.
