The web 2.0 revolution has changed our understanding of the internet. Web sites are able to offer route calculations with high resolution maps, online-shops have real-time search delimitation and thousands of other services want to make our life easier.
Fact is, browsers have to handle more data and logic than ever. So it makes a lot of sense to optimize your web site for the end-user and start analyzing at the front-end! Programmers of the Yahoo Developer Group have invented a smart tool to analyze web pages: YSlow. It tells you why your web pages are slow based on the rules for high performance web sites.
Here are some samples:
Non-packed content can be optimized with a simple configuration in your Apache web server:
I recommend a whitelist-filter for the packed file types. According to the High Performance Web Sites book
gzip reduces the response by 66%.
Firefox renders the website after loading the style sheet file. This prevents progressive rendering.
An easy solution is to put the CSS up on the page and into the
large JS frameworks the best option is to put the JS at the bottom of your page and parse it after loading
the visual content. Minify and obfuscate the code are benefits, too. Minification removes unnecessary
characters like comments from your JS code. Obfuscation also renames variable and function names to
smaller strings which are faster to parse.
Caching counts a lot for the loading process and you may want to control the caching of your web site. To do this, set Expires headers and the Cache-Control feature in your Apache web server configuration:
ExpiresDefault "modification plus 10 years"
Header set Cache-control max-age=2592000
The browser caches the content and loads only modified content from the server.
However you mey wonder why caching doesn’t work very well for your content. That may depend on ETags which are unique identifiers
of a content file. The browser checks the cached content ETag with the one on the web server and
differs altered content. But ETags don’t match from one server to another with the default configuration.
Because of a different ETag the browser requests notherless the file. Just disable ETags for your
Apache web server:
If you have a large number of static content files like images on your web site you should use a Content Delivery Network (CDN) to distributes the static content on seperated servers. With this you may deliver you web site more efficiently because browsers
only load 2-4 requests of one server in parallel. A nice side effectis that you get rid of a lot of traffic.
Following the rules you may not only get a faster loading website but also a better understanding of how browsers handles modern web 2.0 pages. Once getting familiar with YSlow you start to analyze other web pages. That’s the point where you get addicted to this tool ;-) Have fun!