Improving Audio Streaming Performance

1

Hi everyone,

I’m currently working on a website project hosted on Strato server, with a primary focus on audio streaming. The site is available at: https://outerwoman.xyz.

Tech stack in use:

  • Kirby CMS (4.1.0) with the KQL plugin
  • React for the frontend

The backend is used to store audio tracks, each typically ranging between 35–45 minutes. Unfortunately, I’ve been experiencing some performance issues related to audio playback, particularly when users seek different time points within a track. These issues seem to occur more frequently when the network connection is slow, and include:

  • Long pending times before playback resumes
  • Seek requests sometimes get canceled
  • Multiple canceled requests when dragging the seek bar

Strato’s support suggested that these issues might be related to how Kirby handles files.

Steps I’ve taken to improve performance so far:

  1. Edited the .htaccess file to enhance caching and support range requests for better seek functionality:

    jsx
Copy code
# Enable browser caching for static assets
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    ExpiresByType audio/mpeg "access plus 1 month"
    ExpiresByType audio/mp3 "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
</IfModule>

# Enable Range Requests for audio/video
<IfModule mod_headers.c>
    <FilesMatch "\.(mp3|mpeg|ogg|mp4|webm)$">
        Header set Accept-Ranges bytes
    </FilesMatch>
</IfModule>

  2. Tried using a CDN (Cloudflare) to reduce server load, but Cloudflare doesn’t seem to work properly with Strato: Cloudflare DNS error with Strato.

  3. Tested the site on another server to see if the performance improves: dev.sophiamsaoubi.net. The same issues occasionally occurred, but they are not always present.

My question:
Does anyone have advice on how to improve audio streaming performance on a website, working with Kirby CMS? Has anyone else experienced similar issues or had success in optimizing audio files and playback? Any tips or solutions would be greatly appreciated!

Thanks in advance for your help!

Sophia

2

Hi Sophia,

On the first request to a file, Kirby copies the file to the media folder. The file URL then points directly to the published file inside the media folder. This means that Kirby no longer handles the file serving after the initial request. We do this on purpose to avoid exactly such issues as you describe. Web servers are much better at serving files than PHP is – avoiding that extra step increases performance and improves reliability.

What you can try to verify this is to upload an audio file to a simple static directory of your web server (outside your Kirby installation). You can then embed this file on your page and test if the same issue occurs. If it still occurs, you can prove Strato’s support that the issue is not related to how Kirby handles files. However if this fixes it, you know that it must be something in the setup of the site itself, be it an issue in Kirby or the server config. We can help you with that then.

1 Like
3

One addition to what I wrote above: If a file gets requested for the first time (= if the automatic copy is not yet available in the media folder), Kirby serves the file via PHP. This means that your server config rules don’t yet take effect and things like the Range header (often used for audio and video files) are not supported. We have an issue about this here:

For subsequent requests after the initial copy, this is no longer an issue as your web server takes care of serving the file directly.

1 Like