Very bad performance on page with audio player

Support
#1

Hello,

I have a very bad loading performance on this page:

This is a list of small sized mp3-files.
I have built the page with cornerstone. As audio player I have used the cornerstone audio-player element.

The audio-elements are loading extremely slow. Especially on mobile devices the site breaks.
Do you know a solution to solve the issue?
Does the audio player cause the problem? I think the files are very small. This could not be the problem …

I hope you can help me!
Thank you very much!

Kind regards,
Alex

#2

Hello,

I have replaced the Cornerstone Audio Elements with the WordPress Audio Shortcode.
The performance is a little bit better now but still not good.

You can see that the style of the audio players is changing while loading the page. I think this could cause the problem.
How can I use the custom style of the audio player?

Thanks for your help!

Regards,
Alex

#3

Hey Alex,

Thanks for writing in! The size of the page itself is the problem. I would highly recommend to create a test page and insert only one audio file using the Cornerstone’s Audio element or the default WordPress Audio shortcode. You should see a slight difference between the audio player. What I see is that on this page: http://www.whiskytasters.de/die-richtige-aussprache-von-whisky-namen/, you have loaded several audio files. Imagine if each of the audio file is 50KB and you have loaded 25 audio files which will make it 1250KB. This size could possibly slow down the loading of the page itself. Will you please lessen the number of audio files on the page and see how it goes with the page performance?

Thanks.

#4

Hello,

thanks for your reply,
Isn´t it possible to display so many audio files on one post?
Is there a possibility to load/play the audio file when the user clicks on a button? (but still stays in the same window/tab)

I have seen that this action is loaded one by one:
GET flashmediaelement.swf
this takes a very long time.

The audio files are only loaded when the user clicks the “Play Button”.

Would it help to make several pages to the post with the

WP-action?

Thank you very much for your help!
Regards,
Alex

#5

btw.

when you load the page and scroll down quickly you can see that the audio player changes it´s style.
It seems that it is not loaded very fast.
Maybe this could be a cause of the issue.
How can we use the player without any styling?
So that it looks like wp-default?

Regards,
Alex

#6

I have found another solution.
I have used html5 audio code to insert files
now it works well.

X-Shortcode for audio does not work well with many audio files.

Regards
Alex

#7

Glad to hear you found a workaround.

Cheers!

#8

Yes the workaround works well.
But would it be a solution for you to optimize the audio element of X?

Regards,
Alex

#9

The page size is 10MB with over 200 requests, Ni optimization will hep you. Get the page size down and the amount of requests down and it will help. Use a CDN as well, thats going to boost your performance.

#10

@afinkdesign

The audio element is already optimized the best way we can.

We actually have created a guide to boost site performance, kindly refer to the link below.

@Bark201

Thanks for helping out. Cheers! :slight_smile: