Twitter embeds are equally bad. Ended up remaking them to output static HTML + CSS to improve perf (https://leerob.io/tweets).
Same, 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
Here's the code to achieve that: https://github.com/umaar/better-twitter-embed
Well done, thanks for sharing!
Nice job!
As a user, I hate twitter embeds. If I select text inside them, they redirect my user agent location. That's never what I want.
You can also use lazy loading with iframes.
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.