YSlow recommendations. How necessary are they?

Question

So I've just downloaded yslow for firebug and have taken a look at the results for a site I am building.

I'm seeing recommendations, for example, to use ETags, cookie-free domain for my static components, and add expires headers.

I'm thinking, well I could go off and fix these but there's more likely a bunch of other optimizations I could do first, e.g caching results from database calls or something similar.

I don't think this site will get 'that much' usage to warrant YSlow's recommendations.

I know that you should never optimize before you know you need to, but I'm thinking things like ETags and expires headers surely only come into play on sites with really heavy traffic.

If for example, I've written a poor implementation that makes 5 (relatively small) calls to the database per request, and YSlow is telling me that my 14 images are not on a cookie-free domain, then which of those two optimisations should be tackled first?

Answer 1

In no YSlow our .htaccess guru. But I recently built a Joomla website and used YSlow to find areas of improvement. The two areas of YSlow that you asked about above -- "Add Expires headers" and "Configure entity tags (ETags)" -- I addressed via an .htaccess file on the root of my domain.

Add Expires headers

Yahoo says: "Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash."

To address this, I found and added the following code block to my .htaccess file (note: change OPENANGLEBRACKET to "<" and CLOSEDANGLEBRACKET to ">"):

    ########## Begin - Expires Headers
    #
    OPENANGLEBRACKET IfModule mod_expires.c CLOSEDANGLEBRACKET 
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 week"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/ico "access plus 1 month" 
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/html "access plus 1 day"
    ExpiresByType text/plain "access plus 1 week"
    ExpiresByType video/x-flv "access plus 1 month"
    OPENANGLEBRACKET /IfModule CLOSEDANGLEBRACKET
    #
    ########## End - Joomla! core SEF Section

Configure entity tags (ETags)

Yahoo Says: "Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser's cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server."

I decided to remove all Etags, which gave me an A Grade, by adding this to my .htaccess file:

    ########## Begin - Remove Etags
    #
    FileETag none
    #
    ########## End - Remove Etags

These two changes to my .htaccess file gave me A Grades for these two YSlow categories.

Answer 2

YSlow is good to check the "User Experience" that you users are seeing. Its recommendations are to help make the page appear to load quicker. E.g. 14 images to 1 image and spriting is purely a visual thing. The rule is because browsers can only download a few images in parallel at any one time.

I would always tackle backend optimizations first as they can help you towards making your site scalable, if it ever gets that big.