Improve Your YSlow Grade Using .htaccess

Discussion

1. Stefano Giordano

   Thank you for hosting such a good article, Dave, another thing difficult to find a tutorial around is about gzipping resources (js, css) …any hint about this topic?

   I have googled around but nothing good came out: did you successfully try to gzip the site resources or do you know a good article about this?

   Thanks for your interesting work though!

   Stefano
2. Eric Wendelin

   @Stefano: Yes, GZipping is the last step here.

   Here are a few lines from my .htaccess that WOULD do this if my hosting provider let me :(

   # Compress JS and CSS
   <Files *.js.gz>
   AddEncoding gzip .js
   ForceType text/javascript
   </Files>
   <Files *.css.gz>
   AddEncoding gzip .css
   ForceType text/css
   </Files>
   <IfModule mod_deflate.c>
   <FilesMatch "\.(js|css|html|jpg|jpeg|png|gif)$">
   SetOutputFilter DEFLATE
   </FilesMatch>
   </IfModule>
   
   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule \.(gif|jpg|js|css)$ - [F]
   RewriteRule \.(css)$ - [F]
   RewriteRule ^(.*)\.css $1.css.gz [QSA]
   RewriteRule ^(.*)\.js $1.js.gz [QSA]
   </IfModule>
   
• test

  I have added this in my htaccess file.

  ExpiresActive On
  ExpiresDefault A1209600
  
  # 2 weeks
  ExpiresDefault A1209600
  Header append Cache-Control "public"
  
  
  # 2 hours
  ExpiresDefault A7200
  Header append Cache-Control "proxy-revalidate"
  
  
  # 3 days
  ExpiresDefault A259200
  Header append Cache-Control "proxy-revalidate"
  
3. Eric Wendelin

   @Stefano: Yes, Gzipping is the last step here.

   I tried to post code for it, but it was eaten by David’s spam protector :(

   My hosting provider doesn’t allow Gzipping so you might check with yours if you’re unsuccessful.
4. Chris

   Interesting article, I didn’t know ETags issues at all! I’ll take a look to gzipping too.
   Thx Dave and Eric.
5. Jade Robbins

   Wow I didn’t even know there was two types of caching! Cool article Eric!
6. xrado

   @eric

   it is not advised to deflate binary content like images
7. Monkeytail

   Technique works nice. Thanks!
   Websitewent from a 51 score to 74 points
8. Eric Wendelin

   @xrado: Good note. If anyone uses my GZip stuff above remove the binary extensions like jpg, png, etc.

   @Monkeytail: There you go! Nice!
9. Mark Sanborn

   My blog’s speed has improved a lot from this script. Thanks Eric!
10. Michael

    thank you very much for that!

    but i work with a lot with dynamic generated images (ie. .png?scale=200×400)
    so i modified your regex to match also uri’s with parameters:

    \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?(\?.*)?$

    HTH
11. Eric Wendelin

    @Michael:
    You’re entering the asteroid field there. It’s uncharted. IIRC IE will never cache anything with a query string. I can’t say for certain what FF or the others will do. If you know more about this I’d love to hear it!
12. Patrick Lin

    This is my .htaccess snippet that I use on all my sites that run on servers that support it:

    ################ Expires Control ################
    ExpiresActive On
    ExpiresDefault A0
    <FilesMatch “\.(gif|jpg|jpeg|png|swf)$”>
    # 2 weeks
    ExpiresDefault A1209600
    Header append Cache-Control “public”
    </FilesMatch>
    <FilesMatch “\.(xml|txt|html)$”>
    # 2 hours
    ExpiresDefault A7200
    Header append Cache-Control “proxy-revalidate”
    </FilesMatch>
    <FilesMatch “\.(js|css)$”>
    # 3 days
    ExpiresDefault A259200
    Header append Cache-Control “proxy-revalidate”
    </FilesMatch>
13. Makis

    If i paste the code given here on my .htaccess file i get a 500 error after refreshing
• Waleed Barakat

  Hello Makis
  When you copy and paste the code form Here your code is getting changed specially for the closing double quotation. In respect with all replies regarding how to fix your web server and running HTTP server are wrong.

  Try to replace the “…” start and end double quotation with your hand and it will work. because when you copy and paste it it turned to ؛؛…؛؛ and you cannot notice that.
14. David Walsh

    @Makis: Your server may not have some of the functionalities above enabled or installed.
15. Eric Wendelin

    @Makis: David is right. I’m sure you’ve double-checked that everything was copied perfectly, too. Some hosts might not allow this functionality
16. Makis

    Thanx for the fast replies.
    I m on a dedi server so i can change whatever is possible.
    Do you know how can i enable these functions?

    Thank you once more!
17. Eric Wendelin

    @Makis: Which HTTP server are you running?
18. Makis

    Hi Eric!
    I m using Apache: 2.2.9
19. Eric Wendelin

    @Makis:
    Try adding or un-commenting this in your httpd.conf file:

    LoadModule headers_module modules/mod_headers.so
    AccessFileName .htaccess

    Hope that helps :)
20. Eric Wendelin

    @Makis:
    Try adding or un-commenting this in your httpd.conf file:

    LoadModule headers_module modules/mod_headers.so

    AccessFileName .htaccess
21. Pierre

    Hi Eric,

    i’ve seen with YSlow that you are able to deflate “js” file with parameter (eg. http://davidwalsh.name/wp-includes/js/tw-sack.js?ver=1.6.1). On my dev site i can do this only with js without parameter. As soon as i have a parameter with my javascript file the deflate compression doesn’t works :( .

    I use this syntax (but i’ve tried too, the code from Michael without any success)

    <IfModule mod_deflate.c>
    <FilesMatch “\.(js|css|htm|html|pdf)$”>
    SetOutputFilter DEFLATE
    </FilesMatch>
    </IfModule>

    Could you help me with that weird problem ?

    TIA,

    Pierre.
22. Rolf

    Good article..

    So, what do we do when we setup caching methods like this (e.g. for images) and you replace an image (jpg) on a website with a newer version (let’s say a better cropped one for example). Do I have to wait 2 weeks (if I set ExpireDate to that) before I see the new picture on the site, or can I somehow force the browser of the client to d/l the new version (even without adding a @timestamp to the image src=”” in the code)…?

    Versioning js/css files seems like an option, though a lot of work (renaming, updating files that include the versioned file, etc.).. but they do change a lot for projects usually.

    Rolf
23. Pierre

    Ok, i found by myself…
    It’s because i use GoogleGears so YSlow was a little missed :).

    Thanks anyway

    Amicably,

    Pierre
24. Eric Wendelin

    @Rolf: In your case I think it’s best to rename the file.
25. Eric Wendelin

    I’ve posted this with improvements for gzipping and cache-control to GitHub: http://gist.github.com/188105
26. kasap

    I have a question:
    Setting off Etags is going to affect the grade on the “Configure entity tags (ETags)” category on Yslow?
27. Eric Wendelin

    @kasap: Yes. ETags being off will improve your YSlow score. ETags should be turned off unless you really know how to use them.
28. Kardeno

    Great optimization tip. I’m going to try it straight away.

    Thanks Eric.
29. Dave

    Hi,
    The code for .htaccess contains – Header set Expires “Thu, 15 Apr 2012 20:00:00 GMT” which means that all the images will expire on 15th April 2012 at 20:00:00 .
    But how can i change the expire date to something like the cache shud become stale always after 14days. i mean i want to implement something like this ->

    $expires = 60*60*24*14;
    header("Cache-Control: maxage= $expires");
    header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');
    

    How can i do this?

    One more thing, setting Expires is enough, or we also need to set Cache-Control, becoz Expires is something related to HTTP/1.0 and Cache-Control is related to HTTP/1.1

    Thank You,
    Dave
30. Michael Hettwer

    Thanks for this nice article. – I improved my Yslow Grade with your tipps!

    Many thanks from Germany.

    Michael
31. Abhimanyu

    Thanks very much for giving such a great detail..!!
    I’m really impressed by this way..!!
    It reduces load time of my site really up-too great extent..!!
    Thanks..!!
32. Jim

    These snippets seem to be worth placing on the sites but I am so new to this I haven’t any ides of where they would be placed, sounds dumb ha, tell me where would they go and how to be placed.
33. Sigit

    My blog loading speed has increased, thank you very much.
34. Elijah Clark

    thanks for the info. It moved my grade up 1 point, but everything helps.
35. Jeanette

    After going over a number of the articles on your blog, I really like your technique of blogging.
    I book marked it to my bookmark website list and will be checking back
    in the near future. Take a look at my web site too and tell me how you feel.
36. nick

    This perhaps could make a VERY SMALL difference.

    You need to min all your JS and put it in the footer. Min all your CSS and put it in the header

    Make sure your site is gzipped.

    You do those 3 things and your actually going to see a difference. For example this blog has 28 JS files in the head of the document tsk tsk tsk
37. joapen

    thank you so much for the nice explanation,
38. Hidayat Mundana

    Why using W3TC my test results are still F
    Whereas the existing htaccess settings similar to those you share
39. Yousuf

    One more thing, setting Expires is enough, or we also need to set Cache-Control, becoz Expires is something related to HTTP/1.0 and Cache-Control is related to HTTP/1.1
40. Bhumi

    Getting error on yslow that “Add Expires headers”. How can i add for external urls?
41. Plum Goose

    Thanks for the summary. These tips work exceptionally well for a Magento installation. We implemented these tweaks recently and saw a nice boost in speed.
42. RESEP MASAKAN

    I have used the code to disable ETag, but does not function
43. merans

    Hope this helps!

    RewriteEngine On
    # BEGIN Mod Header
    
    ExpiresActive On
    # Turn on Expires and set default expires to 10 years
    # END Mod Header
    
    # BEGIN Cache Control
    
    Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
    Header unset ETag
    FileETag None
    
    #END Cache Control
    
44. Renovasi Malang

    After read this, my speedtest result show C. Thanks
45. joshin

    Increase page loading speed

    # Turn on Expires and set default to 0
    ExpiresActive On
    ExpiresDefault A0
     
    # Set up caching on media files for 1 year
    
    ExpiresDefault A29030400
    Header append Cache-Control "public"
    
     
    # Set up caching on media files for 1 week
    
    ExpiresDefault A604800
    Header append Cache-Control "public"
    
     
    # Set up 1 week caching on commonly updated files
    
    ExpiresDefault A604800
    Header append Cache-Control "proxy-revalidate"
    
     
    # Force no caching for dynamic files
    
    ExpiresActive Off
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
    Header set Pragma "no-cache"
    
    
    
    
    
       
    	AddType application/x-javascript .js
    	AddType text/css .css
       
       
    	AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/plain text/xml application/javascript
    	
    		BrowserMatch ^Mozilla/4 gzip-only-text/html
    		BrowserMatch ^Mozilla/4\.0[678] no-gzip
    		BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    	
        
        Header append Vary User-Agent env=!dont-vary
    		
    
    KeepAlive On
    MaxKeepAliveRequests 60
    KeepAliveTimeout 3
    
    Header set Expires "Thu, 15 Apr 2018 20:00:00 GMT"
    Header unset ETag
    FileETag None
    
46. Nate Balcom

    I’ve tried several variations of updating my ETags, but when I check my Yslow grade it doesn’t change. I did go from a D to a C initially, but I seem to be at a stand still now. Just curious if anyone else is running into the same issue.