Terribly slow mobile performance. Round trip JavaScripts / Too many sound elements loading at once.

[Timothy Danielson]

Dear fellow designers,

I am working on a sound effect soundboard. I am an artist, and sound effect engineer... and right now, I am overjoyed that I can make my own mobile friendly sound effect website!!

http://www.tauempiresoundboard.com

There is an issue however...  the website loads extremely slow on a mobile device (which is the intended medium). I've asked a friend to take a peek at the HTML to help narrow down the issue:

1. A very large number of individual files (almost 100). There are many css/javascript files loaded before the page can render. Each load is a roundtrip to the host. All of the css and js files must be downloaded before the page can be rendered. The .js files and .css files that are being hosted by your site (not the external ones) should be combined together into single files which are then referenced in the html page. There are a number of tools that can do this. One excellent mac app that can automatically do this for you is CodeKit. You can tell it your project directory what files to combine and it can auto-combine css and javascript files for you as you edit in whatever editor you are using. You can then replace all the individual javascript files/css file links in the index.html with just the links for the combined javascript and css files. This is particularly noticeable on mobile loads since mobile caches are small and bandwidth less, so a high number of files required to render a page is even more noticeable.

 

2. Caching of assets. This is not controlled in your html. Adding max-age attributes in your html does nothing. Max-age is a value set at the host. I don’t know where you host your site, but that is where you would be setting the max-age attributes of the pages and assets being delivered. But again, even with these set properly and caching taking place on the client, the large number of files being retrieved to render the page is going to mean that on mobile, where caching is at a minimum, it is likely that not all items will remain in the cache due to the high number of files.

 

3. Sound files. You have a large number of sound files. The way these are referenced in the page is as individual audio elements. As a result, all of these elements are downloaded when you load the page. Looking at the profiling, the audio files are a significant portion of the overall download size for the page (almost 16MB), which over mobile in particular is a lot. Not only that but the loading of the audio files, compete with the loading of the image files, therefore visually, the site is being held up from rendering fully as images are competing against audio files. The way the site is set up, there is an image associated with each sound file and clicking the image is associated with an imagetap handler (I’m assuming a drop-in element from the Google Designer toolkit library), which then plays an associated audio element with a specific ID.

 

What you should be doing to optimize the page is:

1) have a single audio element on the page whose source element is blank (“”)

2) setting a custom attribute on the tap element that is the url of the sound file you wish to play.

3) when the tap item is clicked, set the src attribute of the audio element to the url of the sound file, and play the audio element.

 

The above will ensure that no audio files are downloaded during page load. They are only downloaded when you play. This will have a significant impact on the rendering time of the page since the images won’t have to compete with the audio files when loading.

I downloaded CodeKit.... but let's face it, its meant for programers. I honestly don't know the rules I'm playing with in the first place.

My friend has made some good suggestions, and I would like to implement them properly. However, I am a newbie and I'm not making any progress after 4 hours. I'm not learning anything online, I'm just getting frustrated now.

All I want is for the website to load faster, so that a user sees something ANYTHING on their mobile device when seeking my website (Preloader "Component" that is drag and timeline drop would be great gwd feature). Right now they get there, and the screen is blank for 15 seconds. Then is loads. 90% of the users have left by then.

Please help!!

Thank you in advance for your advice

[Timothy Danielson]

Anyone?

How do I set the audio element to blank, and then use the click event to activate the audio stream on the fly?