How Does Reducing JavaScript Requests & Minifying JavaScript Impact Site Performance?
When optimizing your site for performance, there are three main types of front end optimization techniques you want to use:
- Techniques that reduce the number of requests
- Techniques that reduce the overall size of the content
- Techniques that promote parallelization (i.e. simultaneous download of assets)
In this post I’ll cover the impact of one technique that reduces the number of requests for JavaScript files and another that reduces the size of those files.
But first, let’s set the stage by defining these techniques.
Reducing JavaScript Requests By Concatenating JavaScript
The first technique reduces the number of requests by combining (?concatenating?) multiple JS files into as few files as possible. Reducing the number of requests is effective in optimizing a site because no matter how small the file is, every single request the browser makes takes at least 20 ms, and could take upwards of 100 ms or more.
That’s not very long, but most websites are made up of hundreds of images, scripts, stylesheets, and other assets. An event repeated dozens or hundreds of times, even if only 20 ms, adds up to a serious impact on performance. But you cannot simply concatenate all the files and expect it to be the most efficient result. It is often helpful, depending on the size of the individual files, to group them into a few files which can then be downloaded in parallel.
There are many tools you can use to help concatenate JavaScript files automatically. One of my favorites is CodeKit on the Mac. The cross-platform Yeoman is another wonderful tool that provides this funcationality. Both CodeKit and Yeoman do far more than just concatenation and will be valuable tools in your collection.
Reducing File Size By Minifying JavaScript
The second technique reduces the sizes of JavaScript files by eliminating the wasted space that tends to be in most files created by a developer. This wasted space helps the developer organize the code into structured blocks, enabling them to more easily debug the code and for others to understand the code. As with concatenating files, there are many tools for minifying JavaScript as well as CSS. But my two favorite tools are the same ones I mentioned above: CodeKit and Yeoman.
The Testing Procedure
To test out the impact of JavaScript on the overall performance of a site, I decided to run five tests. Each test is performed using
https://websitetest.com with 10 samples collected from ten different locations around the world, resulting in a total of 100 samples for each test.
- Baseline Website Test – This is looking at the raw, unoptimized site.
- Website Test with JavaScript Files Added (it got a lot slower)
- Website Test of the site optimized except for JavaScript minification and reduction of requests (performance improved)
- Website Test of the site optimized with reduction of requests, but no minification (performance continued to improve)
- Final Website Test with reduction of requests and minification (performance improved yet again)
Test 1 – No JavaScript, No Optimizations
In order to demonstrate this feature, I used my test site running at https://latituding.com. This site recreates some of the slowest sites we have seen, including far too many JavaScript, CSS, and other files. Before I added any extra JavaScript to the site, I examined its performance using Yottaa?s Website Test. You can take a look at the results of that test here. Overall I saw the Time to Interact (the amount of time elapsed before a user can interact with the site) averaging about 4.1 seconds across 10 testing locations around the world.
Test 2 – Javascript Files In Place, No Optimizations
Next I ran a test on the site with the JavaScript files in place. Their impact was obvious, as Time to Interact increased to just over 5 seconds on average across the 10 locations.
Test 3 – Optimized Except for Javascript Optimizations
The next step was to turn on the Yottaa Site Optimizer but disable the Reduce JavaScript Requests and Minify Javascript techniques. This replicates the process of following the suggestions provided by YSlow and others on optimizing a website except for the two techniques mentioned.The reason for doing it this way is that I want to separate the benefits of JavaScript-specific optimizations from the benefits of Optimizer in general.
With Optimizer on, minus the JS techniques, the site averaged 3.5s, a 30% reduction in page load time.One of the big reductions here is in image size. The size of my images was reduced from 1.7MB down to 11KB. This is a result of our Progressive Image Loading optimization which defers loading of images ‘below the fold’ until when the end user actually scrolls down to that portion of the page. This allows for a great experience at the beginning, and since we further optimize the images, downloading them as they are needed is also very speedy.The Time to Interact is also reduced by the fact that we are hosting the assets on our global CDN network automatically. As your customers get further away from your web server, this results in a huge performance gain.
Test 4 – Optimized with Reduce Javascript Requests Enabled
Already we see a big improvement, but the next stage is to re-run the test including the Reduce JavaScript Requests technique that I turned off in Test 3. This will automatically reduce the number of JavaScript files by concatenating them together in the same order as they appeared in your site?s source code.
The result is a Time to Interact of 2.6s, an improvement of 25% on the optimized version of the site.
Perhaps even more dramatic is the fact that it reduced the number of requests for my JavaScript libraries from 18 down to 5 (there were 4 JS files already in use before this experiment). In the image below you can see the resulting source code implemented by Yottaa.
Test 5 – Optimized, with Reduced JavaScript Requests & Minification
The final step is to go throught the last of the JavaScript optimization techniques: Minify JavaScript. Minification reduces the amount of space taken in each JavaScript file. The result is usually a significant drop in file size and that?s exactly what I saw here. The Time to Interact for this final test came down to 2.2 seconds, an extra 15% reduction.
Impact of JavaScript Optimizations on Site Performance
As you can see, adding multiple JavaScript files to a site can have a significant impact on the Time to Interact. By signing up for a Yottaa account and enabling the Optimizer with the JavaScript features, which are enabled by default, I was able to reduce that Time to Interact by 60%. I also reduced the number of JavaScript requests from 18 to 4, the number of CSS files from 36 to 11, and the overall download size from 1.9MB to 474KB. You can see a summary of the results in the graph below.
What benefits have you seen from optimizing the JavaScript on your own site? What roadblocks have you hit, if any? Let us know in the comments!