I'm going to share my favorite trick for speed optimization. This is part of our speed optimization series, and it's a tip that very few people know about: lazy loading third-party resources with facades.
What Does That Mean?
When you have heavy elements on your website—like YouTube videos, live chats, scripts, marketing tools, or pop-ups—you should only load them when you need them. Loading these heavy resources every time the page loads can slow everything down, especially if they're not immediately visible or needed.
So, what do you do in the meantime? You put up a facade. This is a temporary element that looks like the actual resource but doesn't carry the heavy load. Only when the user interacts with it does the real resource load.
A Real Example with a YouTube Video
Let's say you have a YouTube video embedded on your page. If you load it normally, it can significantly slow down your site. Here's what happens:
-
Standard YouTube Embed:
- Requests: 21
- Downloaded Data: 1.3 MB
- Processed Data: Unpacked to 3.8 MB
- Load Time: About 2.7 seconds
That's a lot for just one video!
Now, instead, you can load just the thumbnail of the video and replace it with the actual video player only when the user clicks on it.
-
YouTube Facade:
- Requests: 7
- Downloaded Data: 95 KB
- Load Time: 0.7 seconds
By doing this, you're reducing the initial load time and data usage significantly.
How to Implement Facades
I've created a script to handle this, and there are also open-source examples available. You can use these resources to lazy load your heavy elements. Here's a basic idea of how it works:
- Load a Placeholder: Display an image or element that looks like the resource.
- User Interaction: When the user clicks or hovers over the placeholder, trigger the loading of the actual resource.
- Replace the Facade: Swap out the placeholder with the real content seamlessly.
Resources and Examples
Google offers resources for some common third-party elements, and there are open-source projects you can reference. For example, I like to use this open-source script that's been well-tested. There are also versions for Vimeo, live chats, and more.
Keep in mind, this part is more developer-focused since you'll need to integrate code and test it.
Benefits of Using Facades
- Improved Page Speed: Your pages load faster, which is great for user experience and SEO.
- Reduced Server Load: Less data is requested initially, saving bandwidth and server resources.
- Better Scores: Tools like Google PageSpeed Insights will give you better scores.
For instance, a page with a standard YouTube embed might score 68/100 on mobile. With a facade, you could reach 100/100.
Things to Consider
Before implementing facades across your site, keep these points in mind:
- Test Thoroughly: Make sure you're not breaking any functionality. Use open-source code wisely and always test.
-
Potential Downsides:
- SEO Impact: Hiding elements like YouTube videos might affect SEO since search engines won't see the embedded content.
- Functionality Loss: Some elements, like live chats, perform actions on page load (e.g., tracking interactions). Hiding them might disable these features.
Ensure that hiding a resource won't interfere with essential functions.
Conclusion
If you don't need a heavy resource immediately, don't load it right away. Use a facade to improve your site's speed without sacrificing user experience.
