Static Content Optimization

All methods that i will introduce below can be combined. To perform your static file optimization with “best practice” you have to use all methods. Best practice, in this case, means that you have a minificated file, that was merged (contains more than one file) and was responded with a good compression and the cache headers were set. If you do so, than you have a good understanding of how to optimize static files.

Merge

Usually, every web application needs more than one javascript file. Most web2.0  applications need more than 3-4 scripts. In addition to that, they need cascading stylesheets and also more than one. To sum up, you have 7-9 files, that your browser must request from the web server.  Furthermore every request brings a lot of overhead in form of the HTTP header. You can minimize the overhead with merging all the files together. To do so is a bit tricky, because you need a version of your javascript files to continue developing. After the development stage, you have to merge the files to one file. To avoid inconsistencies be aware of something like a versioning number. It is possible to increment a number of your script with every release. For instance, the file main-v003191.js contains the jquery framework, your ajax controller and a form input validator. You can perform this task also with cascading stylesheet similiar to the javacript files. One possible option would be to use the lightscript, that i published on this blog.

Minification

Minification means to remove all comments, whitespaces and carriage returns from your scripts (js/css). You can find obvious improvements on performance, after minifying your scripts. An example file with 120 KB can be reduced to 80 KB. You can use the YUI compressor or minifycss to minify your scripts.

Modify headers

To decrease the load on your web servers set the cache & expires header in a useful way. Set the cache-control header to public and define max-age. To use the Expires header is often called the best practice. Set this header far in the future. Note: If you develop a new version of your scripts, you have to increment something like a version number to avoid cache inconsistency problems. Read more about modifying headers for Lighttpd and Apache2.

Spread hosts

Earlier in the history of the world wide web, web browsers supports just 2 file transfers from the same host. Nowadays, the number of requests from the same host varies from 2 up to 8. To respond all pictures and script as fast as possible you have to serve the picture from more than one host. You can generate sub domains like aa.static.example.com, ab.static.example.com, ac.static.example.com and so on. This idea works very well, if you have a lot of pictures on your website.

Compression

Compressing files is very useful to safe bandwith and to respond faster. On the other hand, compressing files need cpu power and time. It’s just useful to compress file with 10 KB or more. You can control this minimum compression size in nearly all compression modules that web servers offer.  Read more about compression with specific web servers in the web server performance chapter.

3 thoughts on “Static Content Optimization

Leave a Reply

Your email address will not be published. Required fields are marked *