The html blog

8 practical tips to make your web pages faster

Filed under Javascript, Web

Yahoo’s Exceptional Performance team has compiled a list of 34 best practices to have faster web pages. In this post I’ll show you 8 tips which helped me to get a B grade in YSlow! for web pages that I develop. Currently YSlow’s web page analysis is based on 13 identified basic rules that affect web page performance. In decreasing order of priority they are:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

You can get more info by clicking on each item. Of course using a CDN is not affordable by everybody, including me. This didn’t prevent me to have a B grade though. I will guide you through some of the items which worked for me.

---

Make Fewer HTTP Requests
If you’re using the YUI library, the good news is that recently the team graciously offered a Combo Handler Service, served from their CDN. This helps us to eliminate HTTP requests by requesting a single file. For example, to use the Rich Text editor, it needed 6 separate HTTP requests:

Now with the Combo Handler service, it has been stripped to only 1 file:

If you’re not using the YUI library or not interested in using the Combo Handler service, you can try Minify!
Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.

Another tool which can be helpful is Dojo Shrinksafe which not only minifies your javascript code but also allows you to upload several javascript files and have them compressed in 1 single file.

Another way to make fewer HTTP requests is by using CSS sprites which are big images containing lots of smaller ones. An online tool which can make CSS sprites out of your smaller ones is the CSS Sprite Generator. You just have to upload your pics and it will generate your sprite together with the CSS code. More info about CSS sprites can be found on CSS Tricks.

---

Add an Expires Header
For this to work on Apache, you’ll need to have mod_expires enabled. Then create an .htaccess file or edit your httpd.conf with the following content:

ExpiresActive On
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType application/javascript "access plus 2 years"
ExpiresByTYpe text/css "access plus 2 years"

In the above listing, all images(jpg/jpeg/gif) will have an expires header 2 years in the future.

---

Gzip Components
You must have mod_deflate enabled and drop these lines in your httpd.conf file

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

---

Put CSS at the Top
All CSS must be between your head tag, like that :

---

Move Scripts to the Bottom
While the CSS are sitting at the top of your page, javascripts must be moved towards the lower part of your page, typically in the body tag. I usually put them before the closing body tag.

	
		
		
		
		...
		...
		
		
	

---

Reduce DNS Lookups
I don’t usually have more than 2 DNS lookups in my scripts, else YSlow will be removing some points.

---

Minify JavaScript
As I mentioned earlier on, Dojo Shrinksafe is an online tool which minifies your code.

Another great command line tool is Julien Lecomte YUI Compressor.

In order to use it you must have Java installed (>= 1.4).

Douglas Crockford also has something similar in JSMin

---

Configure ETags
Just drop this line in your httpd.conf:

FileETag None

;-)