Improving site performance with YSlow

July 25, 2007 · 17 Comments

If you haven't already heard, Yahoo! has released YSlow for Firebug, a Firefox plugin that analyzes your site for ways to speed things up in terms of HTML, CSS and JavaScript. I installed it an hour ago and it gave my site a performance grade of D with a score in the low 60's. After a few small tweaks, my grade is B and my score is 83. My blog should be noticeably faster to load. The first thing it recommended I do (an "F" on Reduce DNS lookups) was to strip a number of the third-party JavaScript features I'd added over time in order to reduce the number of domains my site referenced. I removed the Technorati, Skype and Twitter JS calls because, well, they really don't add much value. I changed my Site Meter code to use the non-JavaScript version - which also had the benefit of removing attempts to ping specificclick.net which sets a third-party tracking cookie (Google for more details - some people feel Site Meter should have been more open about this change). I also got an "F" for ETags. Reading the Yahoo! site (linked from the YSlow plugin) gave me the Apache magic necessary to disable those (in my .htaccess file):

FileETag none

I have a "B" now because the Developer Circuit widget still has an ETag. An "F" in Expires header scoring became a "D" after I enabled Expires headers for CSS and images (again, in .htaccess):

ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"

My Gzip components scored improved to a "B" by adding a directive to deflate CSS:

AddOutputFilterByType DEFLATE text/css

Another tweak I made that seemed to help was adding defer="defer" to the Developer Circuit JavaScript include - the only third-party JS left on my site now. The only remaining "red flag" - my one remaining "F" - is the recommendation to use a CDN which isn't really available for free to folks like you and me. If Developer Circuit adds a few Expires headers, enables Gzip and disables ETags then my site will get faster still but I'm impressed with what I've been able to do in a short space of time. Thanx Yahoo! p.s. Also thanx to John Farrar who was the first person to notify me about YSlow!

View count: 1761

Tags: apache · coldfusion

17 responses so far ↓

1 Rick Mason // Jul 25, 2007 at 6:23 PM

Sean,

Your page isn't displaying in IE7. It comes up for a millisecond and then displays the jobs widget in the upper left.

Looks OK though in Firefox
2 Sean Corfield // Jul 25, 2007 at 6:35 PM

@Rick, thanx... I didn't bother firing up a Windows image to test my changes because I didn't think that just removing JS could possibly break anything, even stupid ol' Internet Exploder!

Guess I'll have to prod Vista into action and see what has broken... *sigh* ...I *hate* Microsoft's incompetence and shoddy software.
3 Scott Stroz // Jul 25, 2007 at 7:07 PM

I got a D (62), but I find it funny that this url

http://developer.yahoo.com/performance/rules.html

Which explains the criteria being used scores a 67
4 Peter TIlbrook // Jul 25, 2007 at 8:20 PM

Yep! Definately faster - I would even be tempted to say much faster (am using FF 2.0.0.5) so might give YSlow myself.
5 Sean Corfield // Jul 25, 2007 at 8:28 PM

@Rick, OK, fixed. Turns out the defer="defer" can completely break a page in IE7. What a stupid p.o.s. browser!
6 Cutter // Jul 25, 2007 at 11:43 PM

@Sean, any idea if YSlow plays well with ColdFire? I was going to ping Ray yesterday, but got a little loaded down...
7 Michael Sharman // Jul 25, 2007 at 11:56 PM

Looks quick especially considering the page size is almost 400K!
8 Patrick Whittingham // Jul 26, 2007 at 3:28 AM

Sean -

How would one use 'Expire headers' for JS/CSS for IIS 5-7, so I can tell my Sys Admin?
9 Sean Corfield // Jul 26, 2007 at 6:31 AM

@Cutter, not sure what you're asking here? They're both add-ons for Firebug and they do completely different things.

@Patrick, I never use IIS so you'll have to do what I did to learn about Expires headers in Apache: use Google. Did you read my post about asking questions the smart way? :)
10 Damien McKenna // Jul 26, 2007 at 8:23 AM

I got my sites from low 40's to ~78 by doing some global settings in my httpd.conf :-)

# disable ETags
FileETag none

# mod_deflate - GZip compression
# Insert filter
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xhtml+xml application/xslt+xml application/xml application/xml-dtd
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
#BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpeg|jpg|tiff|tif|png|mov|wmv|mp3|zip)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

# content expiration
ExpiresActive On
# css - don't cache for very long!
ExpiresByType text/css "access plus 10 minutes"
# media formats
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 month"
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/mpeg "access plus 1 month"
ExpiresByType video/x-msvideo "access plus 1 month"
ExpiresByType video/x-ms-wmv "access plus 1 month"
ExpiresByType video/x-ms-wvx "access plus 1 month"
# javascript
# production: custom libraries
<Directory ~ "/Production/(.*)/(js|plugins)/">
   ExpiresByType application/x-javascript "access plus 1 week"
</Directory>
# production: common libraries
<Directory ~ "/Production/(.*)/(js|plugins)/(prototype|script\.aculo\.us)">
   ExpiresByType application/x-javascript "access plus 1 month"
</Directory>
# development: custom libraries
<Directory ~ "/Development/(.*)/(js|plugins)/">
   ExpiresByType application/x-javascript "access plus 10 minutes"
</Directory>
# development: common libraries
<Directory ~ "/Development/(.*)/(js|plugins)/(prototype|script\.aculo\.us)">
   ExpiresByType application/x-javascript "access plus 1 day"
</Directory>

Don't forget to activate mod_deflate, mod_expires and mod_setenvif to be able to use the above.
11 jorge // Jul 26, 2007 at 8:36 AM

Thanks you for the url. Despite of the CDN is a great tool. But it is funny that the download page gets a D.
12 Matt Osbun // Jul 26, 2007 at 9:11 AM

I'm starting to really love this plugin.

I can't get GZip to work for anything, but since I'm playing with this on a Windows XP box with a cut-down version of IIS 5.1, this does not surprise me much. The Expires header and ETags are hit and miss, but ditto on the likely reason why.

I did, however, minify my Scriptaculous .js files, which is showing a nice performance boost. If anyone's interested, I put the minified files and a quick blog post on www.pteradactylcry.com.
13 zuborg // Sep 11, 2008 at 8:47 AM

I would also recommend this online free tool: http://Site-Perf.com/

It measure loading speed of page and it's requisites (images/js/css) like browsers do and shows nice detailed chart - so you can easily spot bottlenecks.

Also very useful thing is that this tool is able to verify network quality of your server (packet loss level and ping delays).
14 Sean Corfield // Sep 11, 2008 at 9:29 AM

@zuborg, that's nice - thanx! Shows that connecting to and retrieving headers from my site is very slow right now but actual rendering / delivery is very fast. Something to talk to my hosting company about I guess :)
15 Mikhailov Anatoly // Dec 16, 2008 at 8:13 PM

Mod_deflate in apache2 is pretty much the same as mod_gzip in apache1.3, and mod_deflate is included with the apache2 source package. Both modules allow compressing of the apache server on the fly

http://railsgeek.com/2008/12/16/apache2-httpd-improving-performance-mod_deflate-gzip
16 Sherman Boyd // Feb 21, 2009 at 12:01 PM

@Damien McKenna

Thanks for posting your configs! That was really helpful. I found you can shorten them using this syntax:

ExpiresByType image/* "access plus 1 month"
17 Jessi Hance // May 26, 2009 at 3:25 PM

Can you really use wildcards? I didn't think mod_expires supported them, at least not in general.

An Architect's View

CFML, Clojure, Software Design, Frameworks and more...