The WordPress Audio Shortcode is Slow – Use HTML5 Instead

The WordPress Audio Shortcode is Slow – Use HTML5 Instead

Two years ago, I’d written an article about embedding audio into WordPress. At that time, I had suggested inserting the audio shortcode that was so easy to use and took up just one line. However, since then HTML 5 was introduced and has now become a lot more prominent. All of the major browsers support it. Amongst the many interesting new features, we have a new <audio> tag that natively plays sound files in a webpage. In this article, I’m going to do a side-by-side comparison of the new HTML 5 way of playing audio versus the older audio shortcode method.

Testing the Audio Shortcode

Let’s say I have a simple MP3 file in the wp-content folder of my WordPress installation. To play this in a blog post, I can easily use the shortcode:

[audio src="http://www.webhostingshed.com/wp-content/kid.mp3"]

When my post goes live, the audio player will render like this:

with shortcode preview

As you can see, this is definitely a neat and convenient solution to playing audio files in WordPress. You don’t need to worry about the format or whether or not the target browser supports it. However, it incurs a cost on your webpage in terms of loading speed. To test this, I ran it through webpagetest.org. You can see in the screenshot below that the media player inserted by WordPress loads four related files:

four files downloaded

This comprises of two JavaScript and two CSS files. You can see the total number of files downloaded when using the audio shortcode method here:

files with shortcode

So a total of 17 JavaScript files and 7 CSS files.

Moreover, the load time of this completely unoptimized page was 4 seconds.

load time with shortcode

Now let’s perform the same test with the HTML 5 audio tag and see what happens.

Using the HTML 5 Audio Tag

To play an audio MP3 file like the one above using HTML 5, I use the following code:

<audio controls="controls">
   <source src="http://www.webhostingshed.com/wp-content/kid.mp3" type="audio/mpeg" />
   Your browser does not support the audio element.
</audio>

Since this is an MP3 file, the “type” element is “audio/mpeg”. Similarly, an OGG file would have been “audio/ogg” and a WAV file would take the form “audio/wav”. Unlike the audio shortcode however, I need to go into the “Text” tab of the WordPress editor to paste this code. After I’ve saved my changes and reload the page, this is what the new audio control looks like:

html 5 player

Now let’s perform the same tests on the HTML 5 audio tag that we previously did with the audio shortcode. To start off with, the page load time has decreased by one second.

load time with html5 tag

That’s quite a huge bump in performance! Hardly surprising since we are loading fewer files. No JavaScript and CSS scripts need to be downloaded. You can see in the screenshot below that there are fewer files required to render the page:

files with audio tag

This is because the second technique makes use of native browser capabilities to render the audio player compared to the former method which constructs it on its own. So unless you have a specific reason for using the WordPress audio shortcode method, it is now a much more efficient idea to use HTML 5 instead. What’s more, it also exposes a complete set of JavaScript functions for play, pause, loading the next track etc.

In short, you can do just about everything you want with HTML 5 instead of relying on a third-party solution. The only potential drawback is browsers that don’t yet support the standard. But close to two years after HTML 5 first came out, it’s pretty much a universal thing by now so you don’t have much to worry about!

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.