After attending Chrome Dev Summit 2019 in San Francisco I started to think a lot in contribute to open source. I already translate docs before (for Meteor), strings for Ubuntu, and just started to help translate the Web Almanac to Brazilian Portuguese, but I felt incomplete without make a “code contribution”.

After see Elizabeth Sweeny and Paul Irish’s “Speed tooling evolutions: 2019 and beyond” as a big Lighthouse fan (and adept of LDD - Lighthouse Development Driven). They profiled a simple site and identified YouTube iframe was a blocker for the main thread. He shared an elegant solution: Lite YouTube Embed. A web component to fast render YouTube iframes (224x more faster!). Since I got the same problem presented in the talk, I was eager to use in my work, where I’m the technology coordinator at a media company in Brazil.

So I reserved some time to create a port as a React component and publishing at npm: React Lite YouTube Embed. And here, is the repository on GitHub.

My benchmarks for performance don’t share the same performance from the original library, but I can see small network usage and other gains such a better control of cover display and just load more in case the user has this intent, in the “Adaptive Loading” philosophy and techniques, from another talk at the Chrome Dev Summit from “Addy Osmani”, “Adaptive Loading — improving web performance on slow devices

Feels great to give something, as small it is, to the community, and also a some fear in case I ship some bug. I think the code can be improved a lot, since I decide for the first version to use as little dependencies as possible, I had to be creative in some strategies dealing with preconnect and preload. Looking forward to get some feedback, evolve this component and be a more active member in the open source community.