I have no doubt that every single Internet user likes to visit fast loading websites. Strangely not everyone likes to make and own them. :)
This blog is not my first experience of handling website but it is first I had established from scratch and for myself. Which gave me excellent playground to try and improve it. And web tech being not really my field madе it more interesting.
Almost accidentally I stumbled into YSlow which is provided by Yahoo to help people optimize their web sites (and seems that they have a lot to say about it).
YSlow is plugin for Firebug Firefox plugin… Yes, plugin for plugin, I hope no one makes another one for YSlow. :)
It provides information on “weight” and contents of any web site and list of 13 suggestions to improve. Depending on number of suggestion fulfilled performance score (F to A, 0 to 100) is calculated. Yahoo has page with explanations which YSlow links to and I won’t repeat them. Instead I want to focus on how to fulfill them since existing info on YSlow optimizing seemed very fragmented to me.
Note - I have Apache-based hosting which seems to allow me setting plenty of options freely so methods listed are those worked with my configuration. Also a lot of .htaccess editing is required, always backup it and don’t touch if unsure.
1. Make fewer HTTP requests That was the hardest part. Every html, css, js, image or whatever is separate file and thus requires separate HTTP request from browser to server.
I edited my CSS to get rid of small eye-candy background images. I removed tabs in top sidebar (never liked them) - allowed me to cut two scripts and one css file. I removed contact form - YSlow showed me that form was using two scripts (60Kb size in total) and made them included on every page! I CSS-scaled AddThis “plus” image and used single file for it in different places.
Also I noticed that images in posts were relatively heavy - took some cropping and heavy optimizing (going to have separate post on this) to lower their size.
2. Use a CDN
This one requires some configuration, look here for instructions. After that this showed me external elements I had, served as hint to move AddThis images to my hosting instead of hotlinking them as default.
3. Add an expires header
Adding following to .htaccess worked for me. It’s not far-future like Yahoo sugests, but my blog is not Yahoo-sized either. :)
ExpiresActive On <br></br>ExpiresByType image/gif "access plus 1 month" <br></br>ExpiresByType image/png "access plus 1 month" <br></br>ExpiresByType image/jpeg "access plus 1 month" <br></br>ExpiresDefault "modification plus 1 week" <br></br><Files index.php> <br></br>Header append Cache-Control "public, must-revalidate" <br></br></Files> <br></br>
4. Gzip components
This one also took a lot of time. There are numerous ways to implement this and I had got at least 10 different pieces of code to enable it from googling. Adding following to .htaccess worked for me.
<br></br>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css <br></br>php_flag zlib.output_compression On <br></br>
Also it seems that WP Super Cache plugin breaks gzip compression at times. Makes sense if its’ goal is to reduce server CPU load even at the cost of bandwidth.
5. Put CSS at the top Almost default for web.
6. Move scripts to the bottom
Since I cut all JS except AdSense one I had nothing to improve.
7. Avoid CSS expressions I had none. If you do - get rid of them. :)
8. Make JS and CSS external
Almost default for web.
9. Reduce DNS lookups
I moved (or cut) everything external (again except AdSense) so had nothing to improve.
10. Minify JS
Nothing to improve yet again.
11. Avoid redirects
Had none.
12. Remove duplicate scripts
And again everything was perfect.
13. Configure ETags
Sounded rather scary but took only following in .htaccess to implement.
FileETag MTime Size
I was very impressed with final result. Things like expire and etags are not really noticeable but my index page went from more than 150+Kb size and 30+ HTTP requests to 32Kb and 20 requests. Without much visual difference I significantly reduced size and load time.
YSlow is very nice tool. Clearly not all of suggestion really matter for small-to-medium sites but it makes easier to find “fat” parts of site and other choke points.
My final YSlow score is A(90). Slightly spoiled by external AdSense script and that I couldn’t make server gzip my CSS (installed CSS compress plugin to make up for it).
What is your score? :)