Lazy Load Third-party Resources with Facades

We discussed asynchronous loading, or lazy loading, in a previous section, but this optimization focuses on what to do with external, third-party resources, such as ads and videos. What normally happens is that these resources are loaded at the same time as the page loads, however, this can also add additional delays. If the third-party content is not critical to the page load process, then lazy loading can be a great method to reduce page load time.

In this instance, a facade is simply an element that is meant to look like a dynamic embedded element, but instead, is just a static resource. For example, instead of embedding a video on a page, a facade would be a static image that linked to the video. In this way, you are not calling on those resources during page load and they are only accessed when the visitor selects to play or interact with the video. This can also be used for social media buttons or live chat widgets. However, just note that with certain widgets, especially for chat widgets, you may lose some functionality if you decide to make it a static resource. A Lighthouse report will detect elements like these and notify you if they can be lazy loaded with a facade.