Third-Party Facades.

Performance Core Web Vitals & Page Load

Lazy-load third-party embeds (YouTube, maps) until user interacts

What does this check test?

A facade is a lightweight static placeholder that looks like an embedded third-party widget but does not load any of the third party's JavaScript until the user interacts with it. This check identifies third-party embeds (YouTube videos, Google Maps, social media posts, chat widgets, Disqus comments) that could be replaced with facades to defer their heavy JavaScript payloads. A YouTube embed alone loads 500KB-1MB of JavaScript and several network requests — a facade replaces this with a static thumbnail and play button until the user clicks to play.

Why does it matter?

Third-party embeds are among the heaviest resources on a page. A single YouTube iframe loads the entire YouTube player JavaScript, CSS, and multiple tracking scripts before the user has even considered watching the video. Most users never interact with every embed on a page, so loading all of them eagerly wastes bandwidth and blocks the main thread. Facades provide a massive performance improvement — deferring a YouTube embed saves 500KB+ of JavaScript and 10+ network requests, directly improving TBT, TTI, and page load time.

Who is affected?

Content sites with embedded videos, blogs with YouTube tutorials, documentation sites with interactive demos, pages with Google Maps embeds, and sites with comment systems (Disqus) or chat widgets (Intercom) benefit the most from facades. Any page with more than one third-party embed should strongly consider facades for all but the most critical embed.

Where does this apply?

Look for `<iframe>` elements loading third-party content (YouTube, Vimeo, Google Maps, social media embeds), inline `<script>` tags that initialize chat widgets or comment systems, and any third-party widget that loads its own JavaScript framework. Lighthouse's 'Lazy load third-party resources with facades' diagnostic identifies specific embeds that have known facade alternatives.

How to fix it

For YouTube videos, use the `lite-youtube-embed` web component instead of a full iframe embed. Use lite-youtube-embed for YouTube:

html

<script type="module" src="/lite-youtube-embed.js"></script>
<lite-youtube videoid="VIDEO_ID" playlabel="Play video"></lite-youtube>

Implement a click-to-load facade for any iframe:

html

<div class="facade" onclick="this.innerHTML='<iframe src=&quot;https://maps.google.com/...&quot; loading=&quot;lazy&quot;></iframe>'">
  <img src="/map-preview.jpg" alt="Map preview" />
  <button>Load interactive map</button>
</div>

For chat widgets like Intercom, load only the launcher icon initially and defer the full widget until the user clicks it. For Google Maps, display a static Maps image (Static Maps API) and load the interactive map on click. The `@next/third-parties` package provides optimized facades for Google Maps and YouTube in Next.js.

References

AppVet checks Third-Party Facades automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks