yslow-3 Network Gate - Enterprise Software Development - Network Gate - Enterprise Software Development
Tutorial

How to Enhance Your YSlow Grade by the using .htaccess

short Intro to Caching

Caching is a browser function that lets in storage of sure forms of web documents at the customer-side. In maximum cases, we need to have our clients cache our static documents like HTML and CSS in order that our website is faster after the primary request.

Browser caching specially depends on  things: the headers you send in an HTTP response and the browser your purchaser is the usage of 304 approach wasted time. There are a couple of factors a browser can do whilst caching depending on the headers used.

  • it may take a look at lower back on every request, and servers will respond with a HTTP status 304 (now not modified) if the report is certainly the equal.
  • handiest ask the server for the record when the cached one has expired.

The latter case is higher for overall performance due to the fact the browser would not even ask and therefore saves a variety of HTTP requests.

Setting the Expires Header

One of the best things we can do to ensure good cache-ability is set a far future Expires header:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
</FilesMatch>

Note here that if your site changes a lot, you'll need to rename/version your files or get clever with your ETags to keep users up-to-date. If you Firebug my site, ittuva.com, you'll see that I do just that. Stay tuned there for a script that can help you automate this.

Controlling Those ETags

ETags are difficult because they take precedence for caching in most browsers. You can change all the headers you want, but if the ETag associated with a file is always the same, caching will never work how you expect. In most situations, you should turn your ETag headers off.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>

Yes, you can combine the two snippets:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

Testing Your New Settings

The best way to see what's going on is to check the "Net" tab in Firebug. You can use a tool like the Live HTTP Headers Firefox extension (there's also one for IE) to verify what headers are being sent. NOTE: If you refresh the page instead of clicking a link, Firefox will recheck all files it has cached. This is not the test you're looking for.

You want to make sure everything is occurring exactly as you intended. Now is the time to bring out your inner control-freak.

Conclusion

These are just 2 simple ways to maximize caching (and therefore speed) of your site. There are lots of other headers to play with, but I find that these two give the biggest bang for your buck. Share your caching tricks in the comments!

Network Gate and ITTuva

Network Gate and ITTuva is a software design and development company that provides end-to-end development service for web and mobile development. We work on a wide range of technologies ranging from open source to proprietary and custom built solutions.

Follow Us

Subscribe Us

If you have a great new tip, are interested in development on Network Gate, thinking about possible partnership opportunities, want to find out more about our upcoming events, would like to write a guest post, or just want to say "hello," be sure to drop us a line.

Search

Address: Via Vittorio Emanuele, 196, 95131 Catania CT, Italia, Sicilia
Phone: (370) 689 01259

Cron Job Starts