If you have speed optimized images, removed unused styles from CSS files, and cleaned up your HTML code, often speeding up JavaScript load time is one of the few remaining pieces of the Website optimization process. There are typically two types of JavaScript I run into on pages. JavaScript hosted as part of the website and JavaScript hosted by a third party. Getting a third party to optimize their JavaScript almost never gets results in my experience. I’ll talk about some things to try in that regard, but primarily I’ll focus on four ways to speed up JavaScript load time of locally hosted JavaScript files.
One thing to keep in mind is that you should consider performing the steps here in the order I present them. The final step, moving your JavaScript to a CDN, will get you the single biggest performance boost, but by doing the other three steps first, you will be maximizing your impact.
I’m making the assumption that you don’t want to rewrite the code in presenting these steps – otherwise, my best suggestion is to write asynchronous JavaScript to replace existing code.
JavaScript speed tip #1: Minify your JavaScript. By removing unnecessary whitespace and compacting the code, you will reduce the overall weight of your JavaScript. Just be sure to save a human readable version if you ever need to edit the script later. The other gotcha here is you need to make sure you have semicolons in all the right places or you will break the code. Test before and after to make sure you haven’t broken any functionality.
JavaScript speed tip #2: Combine multiple scripts into a single .js file. Every HTTP request a browser makes for objects on your page slow down the loading of the page. If you can combine scripts, you can save HTTP requests for a net speed gain. This may require some minor tweaks to the way you call the scripts on your page, so if you aren’t comfortable with tweaking JavaScript function calls in your HTML, skip this step.
JavaScript speed tip #3: Compress your JavaScript files. You can set your web server to automatically compress text/javascript files, but depending on how you host them (see tip #4) you may need to compress the files in advance. Either way, by compressing the files, you reduce the overall payload of your HTML page.
JavaScript speed tip #4: Serve your compressed .js files from a CDN. Amazon CloudFront and RackSpace CloudFiles are both great options for this. You need access to your DNS to add a subdomain to serve the files from, but in general, this will get you the single biggest performance benefit for speeding up your JavaScript files. You can read my CDN comparison for pricing break down of the 3 most affordable CDN options for small business.
Bonus JavaScript speed tip: For third party JavaScript, in some cases you can consider hosting the .js files on your CDN instead of calling them from the third party. I would consider this for .js files like third-party web forms, or the popular AddThis button. I would definitely avoid this option for .js files from ad providers, because it may violate their terms of service causing you to not get paid. The downside to hosting .js files is that you need to update them if they change, but in most cases that rarely happens.