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)
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
- 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)
Many of the sites that I look at on the web include several frameworks, and quite a few sliders even though they may only need one. In the image below, you can see the portion of the source code where I include those scripts.
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.
Want to see how fast your site could be with optimizations like those we outlined above? find out with a free trial of Yottaa!