An Architect's View

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

An Architect's View

Improving site performance with YSlow

July 25, 2007 ·

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!

Tags: apache · coldfusion

17 responses

  • 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.