Case Study: Website Optimization

Case Study: Website Optimization

As the website loading of the average website becomes bigger and bigger, file size becomes very important as far website optimization is concerned. With this case study I want to take a look at the potential of image compression, compressing CSS and JavaScript, reduction of HTTP-requests and GZIP compression in decreasing the website file size and thus the website loading time.

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:

website optimization website loading time

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

performance optimization website loading time

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:

  1. Image compression
  2. Minify JavaScript and style sheet files
  3. Reduce number of HTTP-requests
  4. Placing JavaScript files at the Bottom
  5. Enable Server Side Compression
  6. Enable Browser Caching

So let’s have a look where we start at and what kind of results we can achieve!

The starting point

In the table below you can see the website file size for all images, JavaScript and style sheet files plus the number for HTTP-requests and the average loading time (= fully loaded). The stats for the website loading time have been measured with

File Size (Images) File Size (Javascript) File Size (Stylesheets) FileSize (total) HTTP-requests Loading Time
1905 KB 193 KB 41 KB 2.14 MB
18 3.77s

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%!

File Size (Images) File Size (JavaScript) File Size (Stylesheets) Filesize (total) HTTP-requests Loading Time
925 KB (-52%) 193 KB 41 KB 1.16 MB (-46%)
18 2.11s (-44%)

2.) Minify JavaScript and Stylesheet files

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:
If you have any other suggestions for performance optimization feel free to share them in the comments!

Filesize (Images) Filesize (Javascript) Filesize (Stylesheets) Filesize (total) HTTP-requests Loading Time
925 KB 156 KB (-20%) 24 KB (-42%) 1.10 MB
18 2.13s

In relative terms this brought solid results!

3.) Reduce number of HTTP-requests

Performance Optimization – With this attempt I’m going to include all stylesheet markup in one stylesheet file and all the javascript code in one javascript file. This reduces the HTTP-requests by the number of three. Since every HTTP-request takes additional time in the process of loading the whole page it is worth the effort to try to keep the number of HTTP-requests as small as possible!

For small websites, and furthermore for static websites like landing pages, you can argue to place the stylesheet and javascript code inline. This saves you another two HTTP-requests and should not be a big deal when it comes to maintainability.

Filesize (Images) Filesize (Javascript) Filesize (Stylesheets) Filesize (total) HTTP-requests Loading Time
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.

4.) Placing JavaScript files at the Bottom

Website Loading Time and Performance Optimization – When putting all your links to your JavaScript files in the head of your website you block all other content to be loaded while the JavaScript files are being loaded. When you have numerous files included this ofter generates a bad user experience because the user sees a blank page. You can bypass that if you place your JavaScript referrals at the bottom of your page just above the </body> tag.

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).

Filesize (Images) Filesize (Javascript) Filesize (Stylesheets) Filesize (total) HTTP-requests Loading Time
925 KB 81 KB (-48%) 12 KB (-48%) 1.02 MB (-7%)
15 2.20s

Once again, speaking in relative terms the gZip compression has a huge impact on the filesize of the relevant javascript and stylesheet files!

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:

Filesize (Images) Filesize (Javascript) Filesize (Stylesheets) File size (total) HTTP-requests Loading Time
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:

performance optimization for faster website loading time

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
  • Grunt – a task runner that does image, stylesheet, javascript compression and many more things for you. This is a must read!
  • Using a Content Delivery Network (CDN)

If you have other suggestions for website optimization or performance optimization techniques feel free to contact us.