search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.58k stars 799 forks source link

Better handle podcast player dependencies #17873

Open asafm7 opened 3 years ago

asafm7 commented 3 years ago

When adding a podcast player to a page, the file "components.min.js" is being enqueued.

77% percent of this file is not used, and this is a pretty big file. According to the DevTools coverage tool, more then 0.5MB of this file is not being used: image

It makes it the first opportunity to come up in the Lighthouse report.

Maybe there is a more efficient way for enabling the podcast player?

jeherve commented 3 years ago

The Podcast block does indeed rely on WordPress components on the frontend: https://github.com/Automattic/jetpack/blob/f3eb42a8c23de8ab43b1a818eee9c42dcef50751/extensions%2Fblocks%2Fpodcast-player%2Fview.js#L11

We've opted for this approach in order to leverage the tools made available in WordPress (instead of bundling our own components), but it does have its disadvantages as you've discovered.

An alternative approach could be to rely on external dependencies instead of WordPress'. That's something we may consider for a future iteration.

asafm7 commented 3 years ago

Thanks @jeherve for your response!

It seems like a big hit to performance (although I'm not an expert) so it might be worth considering.

I think it is an excellent approach to re-use dependencies. Maybe the problem is with WordPress core? Maybe "components.min.js" should be more modular by itself? I guess you guys can make this suggestion if you believe it makes any sense.

Thanks again.