3 ms·
Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badl
by dceddia 6y ago
Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badly.
It turned out that embedded YouTube videos were pulling down something like 1mb of JS, just to show the thumbnail, before the user even clicked Play.
I ended up making a static thumbnail with a hover-over "play" icon that would replace itself with the real embed when it was clicked. Got the Lighthouse score up and saved all those unnecessary downloads. But it was pretty amazing to me that while one arm of Google is pushing for web performance, another is building this YouTube player that auto-downloads a megabyte of JS just to show a thumbnail.
- leerob 6y agoTwitter embeds are equally bad. Ended up remaking them to output static HTML + CSS to improve perf (https://leerob.io/tweets https://leerob.io/tweets).
- recursive 6y agoAs a user, I hate twitter embeds. If I select text inside them, they redirect my user agent location. That's never what I want.
- umaar 6y agoSame, I get ~500 tweets displayed with: - No JavaScript necessary - All profile images turned into one massive sprite - Minimal payload size Here are what the tweets look like when rendered: https://umaar.com/dev-tips/feedback https://umaar.com/dev-tips/feedback Here's the code to achieve that: https://github.com/umaar/better-twitter-embed https://github.com/umaar/better-twitter-embed
- winrid 6y agoYou can also use lazy loading with iframes.
- pabe 6y agoThis is often a very useful hack indeed! <3