We are the Website Speed Experts!

01274 985905


Javascript Optimisation

116 Views
Posted on September 1st, 2015 by

When we talk about Javascript optimisation here at Website Speed Experts, we aren’t talking about making Javascript run faster, we are talking about making your Javascript become less of a burden on your page loading speeds.

Javascript files typically weighed in at 276Kb back in 2013 (source) and today’s Javascript files have only gotten larger and larger. This is thanks in part to newer frontend frameworks and libraries which take the hassle out of common tasks for the web developers, even if they do slow the website down that becomes dependant on them.

Most websites have some Javascript optimisation they can do to improve things as far as Javascript is concerned and we’ve taken the time to craft a list of the common techniques which will help minimise the impact of the bloated Javascript.

1. Combine the Javascript files into as few files as possible

Merge all the Javascript files into as few files as possible – ideally one file. This will save HTTP requests and round trips to and from the server.

2. Minify the Javascript file(s) so that they are as small as possible

By reducing the file size by removing all the white space, replacing long variable and function names with shorter ones and removing unnecessary characters, you can typically reduce most files in some way

3. Serve them compressed using HTTP compression

Serving the files using HTTP compression will further reduce the payload downloaded from the server and ensure that you’re getting a speedy site!

4. Put them at the bottom of the page (just before the closing body tag)

This is to prevent them from blocking the downloading and rendering of other assets so that your site can display as fast as possible.

5. Replace Libraries with Custom Code

Only really practical if your only using a specific subset of functionality from a specific library. If all your doing is DOM traversal with jQuery, do you really need the full jQuery library? Could you re-factor your JS code to use document.getElementById(‘nodeId’) and document. getElementsByClassName() instead and drop the library dependency entirely?

Like our articles? Like us on Facebook or Tweet about us to spread the word!
About the Author
Stephen Bailey has a passion for making websites fast and believes that the web should be faster for everyone. He is a freelance web designer & developer of 5 years experience in the trade and has helped to run and build several online communities and helped them grow and flourish.
Visit Stephen Bailey's Google+ page.


Comments

There are no comments currently for this post!

Leave a Reply

Your email address will not be published. Required fields are marked *