Performance issues with multiple episodes

Podlove Web Player
1

Hi,
I’m using Podlove WebPlayer 5.x and I have some performance issues if I show multiple Episodes on my website.

The implementation is following the documentation and I’m unsure how to improve the performance.
Here is my simplified source code: https://pastebin.com/ZZZNPmRq

I’m not using Wordpress.

In total I have 25 episodes on one page and that results in 300 HTTP requests to the podlove webplayer cdn. When I request the page via Shift+F5 (empty cache) it downloads the vendors.js 25 times (198kb each), the bootstrap.js with 92kb too and also small js files called 3.js, 4.js and so on.
Is there a way to load these resources only one time?

The ajax httprequests to “/podcast/GetEpisodeModel?eps=X” are not an issue, because the result in the backend is cached and it takes < 100 ms.

Thank you for your help in advance. :slight_smile:

2

Hey flixius,

since you have control over the implementation there are different options available to handle this issue:

  1. Use a Service Worker for Asset caching: Caching Files with Service Worker  |  Web  |  Google Developers
  2. Only bootstrap the players that are visible, the intersection observer might be very useful: Intersection Observer API - Web APIs | MDN
  3. Your use case might also benefit from one central player using the “Related Episodes” feature or programmatically initialise via the player API
  4. Orchestrate the loading sequence to benefit from the browser caching. You could wait until the first player is loaded (the promise get’s resolved)

Feel free to share some examples with me, I’m always interested in custom implementations :slight_smile:

3

Hi zusatzstoff,
thank you for your help. :slight_smile:

I followed approach 4. and reduced the transferred size of js files from 10.4 MB to 592 KB which is already a big improvement.

The last request has been reduced from 8 seconds to 4 seconds. To reduce the 4 sec seems to be impossible with my current approach. The only way I see is to implement a paging where more episodes are loaded via ajax requests. But now it’s okay for me.

The main issue (too much data downloaded) has been resolved by this trick.

Here is my code if anyone is interested in it: https://pastebin.com/PA7LAags

(The Code is in ASP.Net Core Razor)

1 Like