Case Study: Website Optimization
Status quo – Website Loading Time and Website File Size
What can we say about today’s average website? I think the fact that the average website becomes bigger and bigger is, at least for people having contact to the web on a daily basis, pretty obvious. Visual impressions and interactions are common for a “modern” website so there are more and more images on each website, more video content and more third party scripts involved.
The average website in February 2014 sums up to a size of approximately 1.6 MB of data. The composition of the data is shown in the following image:
And as we can see on the graph below, there is no evidence that this trend will decrease. If you draw an imaginary trend-line in the graph below, we are heading straight forward for the size of 2.0 MB per website.
Website Optimization and Statistics
Nov 2010 – Nov 2013
Website Loading Time Matters
Loading a website with 1.6 MB file size (or even bigger) on a GPRS connection can be very frustrating. For this, and various other reasons, performance website optimization is a very important factor!
What can be done?
Beside the fact that you can evaluate if you need all those scripts and images on your website you can optimize what you currently have.
For the purpose of this article I’ve built a small website which comes close to the average website. As a To-Do-List for Performance Optimization I have worked out six steps that are fast to implement in a lot of web projects:
- Image compression
- Reduce number of HTTP-requests
- Enable Server Side Compression
- Enable Browser Caching
So let’s have a look where we start at and what kind of results we can achieve!
The starting point
|1905 KB||193 KB||41 KB||2.14 MB
1.) Image Compression
Performance Optimization – For almost any website the compression of images is the most powerful option to reduce the overall website file size. The big plus is, that the reduction of the file size is most often achieved without affecting the perceptual image quality.
The are a lot of services available that allow you to compress your images. Here is a list of three services for the jpg/jpeg, png and gif format:
The results are quite impressive: the image filesize decreased by 52%!
|925 KB (-52%)||193 KB||41 KB||1.16 MB (-46%)
Website Loading Time – For a small website, as in this little case study, this might sum up to just a few kilobytes but remember, especially on a mobile connection, every kilobyte counts!
There are various tools out there to compress javscript and stylesheet files. This one I use fairly often and can recommend:http://refresh-sf.com/yui/
If you have any other suggestions for performance optimization feel free to share them in the comments!
|925 KB||156 KB (-20%)||24 KB (-42%)||1.10 MB
In relative terms this brought solid results!
3.) Reduce number of HTTP-requests
|925 KB||156 KB||24 KB||1.10 MB||15 (-3)||2.13s|
There was however no major change in the average website loading time.
This has no impact on the website file size or the website loading time of the website, but provides a better user experience.
5.) Enable Server Side Compression
Performance Optimization – With this step we activate the server side gZip compression for the apache server. This compresses html, css, xml, svg and a few other filetypes on the transfer from the server to the browser and thus reduces the total filesize. You can extract the relevant code from the .htaccess file from the HTML5Boilerplate (this goes for the browser caching as well).
|925 KB||81 KB (-48%)||12 KB (-48%)||1.02 MB (-7%)
6.) Enable Browser Caching
Website Loading Time and Performance Optimization – This step doesn’t enhance the performance for your first-time visitors but the browser of all your returning visitors, or the ones that visit another page of your website, will “remember” the ressources the browser has already loaded. Depending on the duration you set in the .htaccess file, the browser will cache files usually between 1 month and 1 year.
So this are the raw numbers for the final result:
|925 KB||81 KB||12 KB||1.02 MB||15||2.20s|
If we compare the filesize and the website loading time from the beginning with the final result we get the following results:
Acceptable! The image compression obviously leads to the biggest results in decreasing the file size and website loading time.
As a final conclusion it is important to say that performance optimization needs context! What is reasonable for my website might not be reasonable four your website. Use the methods if they make sense.
However, for the beginning the six steps above are easily integratable in your web projects and workflow. If your are using SASS for instance you can minify your stylesheets on the fly. However there are much more website optimization methods and tools out there to optimize the performance of your website and of your workflow.
Here is a list of a few things that came to my mind:
- RESS (Responsive Design with Server Side Components) – interesting article from the Smashing Magazine to serve responsive images on mobile devices
- Adaptive Images – small images for small devices
- “above the fold” – optimizing the rendering of visible content on the initial page load
- Using a Content Delivery Network (CDN)