Lazy load third-party resources with facades
Published on
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.
A facade is a static element which looks similar to the actual embedded third-party, but is not functional and therefore much less taxing on the page load.
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.
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:
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. 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)
There are some tradeoffs when lazily loading third-parties with facades as they do not have the full range of functionality of the actual embeds. For example, the Drift Live Chat bubble has a badge indicating the number of new messages. If the live chat bubble is deferred with a facade, the bubble appears when the actual chat widget is loaded in after the browser fires requestIdleCallback. For video embeds, autoplay may not work consistently if it's loaded lazily.
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.
Updated on • Improve article