YouTube Playlist Player, Core Web Vitals & Website Performance

đź‘‹ Ciprian on Wednesday, February 3, 2021 in Blog
Last modified on Wednesday, February 3, 2021

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

YouTube Video Cover

My YouTube Playlist Player plugin got an update today and it speeds things up considerably.

1. First of all, I have fixed my Google Developer API key, as it was a legacy one and I could get the demo running.

2. Second, I combined the 2 included JavaScript files, I have combined all DOMLoaded events and implemented event delegation. This is a huge plus to the overall plugin performance.

3. Third, I have removed the JavaScript implementation of fluid videos (for a proper YouTube iframe aspect ratio) and opted for the new CSS aspect-ratio property.

Aspect Ratio

MDN Web Docs | Web.dev: Core Web Vitals

Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio.

Another great feature of aspect-ratio is that it can create placeholder space to prevent Cumulative Layout Shift and deliver better Web Vitals.

4. Fourth, I have minified all JS/CSS assets.

All these four improvements sped up the plugin load time by more than 40%.

Buy me a coffee to support my work!

đź‘‹ Added by Ciprian on Wednesday, February 3, 2021 in Blog. Last modified on Wednesday, February 3, 2021.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy