Lazy load third-party resources with facades
Third-party resources are often used on websites to display videos or embed social media on the site.
It is common to load these resources as soon as the website loads, but loading them in this way can have a detrimental impact on the website's score.
One way to lessen the negative impact of using these resources is to lazy load them with a facade and only load them when requested (when the user interacts with the resource).
According to PageSpeed “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”. Therefore, the main idea behind this audit is to replace the third-party resource with a static and less weighty element as long as the user does not interact with the resource.
How WP Rocket can help.
WP Rocket can help you achieve this with our feature to replace YouTube iframes with a preview image, you can find this feature in Media tab on WP Rocket dashboard.
Let's take as an example this website where a YouTube video is being uploaded.
You can see the PageSpeed report following, as you can see the total transfer size is huge (1282KB) and the blocking time is more than 0.5s.
Let’s see what happen as soon we lazy load this resource with a facade:
As you can see the audit has disappeared and the improvement on the score is huge.
Additional information on how to lazy load other third-party resources with facades can be found in this article: