Hacker News new | past | comments | ask | show | jobs | submit login

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.




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.


This is often a very useful hack indeed! <3




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: