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)
But first, let’s set the stage by defining these techniques.
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.
The Testing Procedure
http://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 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)
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.
The result is a Time to Interact of 2.6s, an improvement of 25% on the optimized version of the site.