YouTube Playlist Player, Core Web Vitals & Website Performance

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

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%.

👋 Added by Ciprian on Wednesday, February 3, 2021 in Blog. Last modified on Wednesday, February 3, 2021.

Contribute!

Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy