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.
Modern web sites are full of features: Client-site logic in the form of JavaScript (AJAX), eye-catching design as complex style sheets (CSS) and larger images with more details. All made possible with broadband internet connection. But what about slow dial-up connections? And how do browsers handle all the information?
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.
Once you’ve become familiar with the rules, you will realize that YSlow is a very powerful tool which gives you a lot of information about every single component of your site. It checks the structure of your CSS and JavaScript files, shows you the relevant HTTP header information and tells you whether your components are gziped and cacheable. A statistical summary and a printable report are two further features which complete this tool. The analysis includes the 14 rules. YSlow grades every rule based on your web site and also offers detailed information about every found disadvantage.
Here are some samples:
gzip content
Non-packed content can be optimized with a simple configuration in your Apache web server:
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
I recommend a whitelist-filter for the packed file types. According to the High Performance Web Sites book
gzip reduces the response by 66%.
CSS
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
JavaScript
JavaScript is treated completely different. Browsers want to parse the JS file just after loading. In times of
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
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:
ExpiresActive On
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:
FileETag None
CDNs
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!
Schreibe einen Kommentar