Speed up Sites with .htaccess, Using mod_headers or mod_expires implement caching |
Speed up Sites with .htaccess, Using mod_headers or mod_expires implement caching |
askapache |
Jan 9 2007, 12:59 AM
Post
#1
|
Newbie Group: Members Posts: 18 Joined: 29-December 06 From: USA Member No.: 1,407 |
Original Article: Speed Up Sites with htaccess Caching
Implementing this method will save you incredible amounts of bandwidth and drastically speed up your site for your site visitors. Basically most images, css, javascript, and other files can be optimized for faster download by telling your site visitors to cache them for a certain period of time. The default behaviour is to check the last-modified and/or the Etag headers of the file EVERY time it is requested. So a user goes to /home/index.html, and the browser caches all the images and files. Then the user leaves the site and comes back later, and the browser has to send If-Modified-Since conditional GET requests for every cached item, basically to see if the file has been changed and if they should update their cache. When you implement the caching method described in this article, you can specify that certain files or filetypes be cached for a specific amount of time. These files are then cached by your site visitors and they do not send the If-Modified-Since until the set cache time has completed. CODE #=============================================================================# # TIME CHEAT SHEET #=============================================================================# # 300 5 M # 604800 1 W # 2700 45 M # 1814400 3 W # 3600 1 H # 2419200 1 M # 54000 15 H # 14515200 6 M # 86400 1 D # 26611200 11 M # 518400 6 D # 29030400 1 Y (never expire) The first solution is the Apache Module mod_expires 1.3|2.0|2.2 CODE ExpiresActive On ExpiresDefault A300 ExpiresByType image/x-icon A2592000 ExpiresByType application/x-javascript A2592000 ExpiresByType text/css A2592000 ExpiresByType image/gif A604800 ExpiresByType image/png A604800 ExpiresByType image/jpeg A604800 ExpiresByType text/plain A604800 ExpiresByType application/x-shockwave-flash A604800 ExpiresByType video/x-flv A604800 ExpiresByType application/pdf A604800 ExpiresByType text/html A300 The second solution is mod_headers 1.3|2.0|2.2 CODE # YEAR <FilesMatch "\.(flv|gif|ico)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> # WEEK <FilesMatch "\.(pdf|swf|js|css)$"> Header set Cache-Control "max-age=604800" </FilesMatch> # NEVER CACHE <FilesMatch "\.(html|cgi|php|htm)$"> Header set Expires "Thu, 01 Dec 2003 16:00:00 GMT" Header set Cache-Control "no-store, no-cache, must-revalidate" Header set Pragma "no-cache" </FilesMatch> NOTE: Using FilesMatch and Files in htaccess Here is what the Headers look like when downloading a JPEG image, with this caching scheme implemented, and without. JPEG WITHOUT CACHING CODE Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT ETag: "b57d54-45e7" Accept-Ranges: bytes Content-Length: 17895 Connection: close Content-Type: image/jpeg WITH CACHING CODE Cache-Control: max-age=2592000 Expires: Tue, 28 Mar 2006 16:23:52 GMT Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT ETag: "b57d54" Accept-Ranges: bytes Content-Length: 17895 Connection: close Content-Type: image/jpeg Content-Language: en Many more examples and detailed information available here. You may also enjoy this Webmasters Caching Tutorial. |
WebKing |
Feb 15 2007, 09:30 AM
Post
#2
|
Group: Members Posts: 2 Joined: 15-February 07 Member No.: 1,911 |
That's a great helpful information for webmasters, who want to save their resources / bandwidth and also speed up the site. Thanks
|
askapache |
Feb 17 2007, 08:41 PM
Post
#3
|
Newbie Group: Members Posts: 18 Joined: 29-December 06 From: USA Member No.: 1,407 |
That's a great helpful information for webmasters, who want to save their resources / bandwidth and also speed up the site. Thanks Thanks WebKing! Heres the updated .htaccess caching code that I'm using. CODE # 1 YEAR <FilesMatch "\.(ico|pdf|flv)$"> Header set Cache-Control "max-age=29030400, public" </FilesMatch> # 1 WEEK <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> # 2 DAYS <FilesMatch "\.(xml|txt|css|js)$"> Header set Cache-Control "max-age=172800" </FilesMatch> # 1 MIN <FilesMatch "\.(html|htm)$"> Header set Cache-Control "max-age=360, private, proxy-revalidate" </FilesMatch> |
Nick |
Feb 21 2007, 07:08 PM
Post
#4
|
Member Group: Members Posts: 32 Joined: 29-September 06 Member No.: 268 |
wow...
quickie. What if all your images are on a difference server. I did this to save bandwith, so I have pages on www.blah.com and all the images are on images.blah.com ... where does this stuff go then? |
Darin McGrew |
Feb 22 2007, 01:40 PM
Post
#5
|
WDG Member Group: Root Admin Posts: 8,366 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
You'll need to configure each server separately.
|
John Pozadzides |
Feb 23 2007, 07:20 PM
Post
#6
|
WDG Founder Group: Root Admin Posts: 529 Joined: 3-August 06 From: Magnolia, TX Member No.: 2 |
How is all of this affected by dynamically generated pages, for example using Wordpress?
|
Brian Chandler |
Feb 23 2007, 11:21 PM
Post
#7
|
Jocular coder Group: Members Posts: 2,476 Joined: 31-August 06 Member No.: 43 |
QUOTE How is all of this affected by dynamically generated pages, for example using Wordpress? As far as I can see (the original post doesn't actually make much sense), the standard browser behaviour is that if an image (etc) is in the cache, it asks the server if the image has been updated, and downloads the new version if so, uses the cached version if not. This seems to be the ideal arrangement in general - if you know images won't change, you can specify that the browser doesn't even ask until some set period has elapsed, but this is only ever going to save the housekeeping overhead, and it's hard to believe this will ever be an "incredible" saving. The same applies to html pages - since they may be updated at any time, you don't want to tell the browser to ignore the updates until some fixed period has elapsed, do you? |
askapache |
Mar 5 2007, 07:42 AM
Post
#8
|
Newbie Group: Members Posts: 18 Joined: 29-December 06 From: USA Member No.: 1,407 |
What if all your images are on a difference server. I did this to save bandwith, so I have pages on www.blah.com and all the images are on images.blah.com ... where does this stuff go then? Actually if that is the case then you are already way ahead of the pack. Not only does using a second server help because of the obvious reason, but it also makes a HUGE difference because Internet Explorer is limited to only making 2 connections to 1 server at a time. So this way IE can make 4 connections at 1 time. The other thing that is so good about using a 2nd domain is when you are using cookies. Normally the cookie headers will be sent back and forth for everything but if you only use it on 2nd domain you save a lot of requests and headers. This code can go in an htaccess file but preferreably would go in your main configuration... So if you have 2 servers (i'll use i to represent images) /sites/ /sites/blah.com/htdocs/ /sites/i.blah.com/htdocs/ Then you could place an .htaccess file in each of the 2 web servers DOC_ROOT targeting the specific filetype, or better would be to put this code in your main configuration for /sites/ maybe. How is all of this affected by dynamically generated pages, for example using Wordpress? The headers from mod_headers and mod_expires are not set on dynamically generated files. So basically wordpress is setting the headers now. I use wordpress a lot these days and I just try to cache everything else besides dynamically generated files.. Heres my wordpress sites .htaccess for caching. CODE # 1 YEAR <FilesMatch "\.(flv|ico|pdf)$"> Header set Cache-Control "max-age=29030400, public" </FilesMatch> # 1 WEEK <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=60800, public" </FilesMatch> # 3 HOUR <FilesMatch "\.(txt|xml|js|css)$"> Header set Cache-Control "max-age=10800, public, proxy-revalidate" </FilesMatch> The plugin WP-Cache is an excellent WP plugin (though I haven't gotten it to work with WP 2.1 yet) that basically does the exact same thing as mod_headers and mod_expires does, only it first has to save the generated page to a static file. If you understand that plugin than you understand web caches. To see the basics of caching dynamically generated pages check out Speed Up Sites with php Caching This seems to be the ideal arrangement in general - if you know images won't change, you can specify that the browser doesn't even ask until some set period has elapsed, but this is only ever going to save the housekeeping overhead, and it's hard to believe this will ever be an "incredible" saving. The same applies to html pages - since they may be updated at any time, you don't want to tell the browser to ignore the updates until some fixed period has elapsed, do you? Wrong, and Right! It really is a more of a dramatic boost in speed and bandwidth then you would think. On a normal Apache Server, a smart implementation of a cache not only eliminates unneccesary 304 requests for every request, but it also eliminates having to check the md5 of the Etag or filesize. And again, back to the point about connections. If your clients are making half as many connections to the server, they will be able to initiate new connections for stuff they do need much faster. And generally you are right in that you should almost always keep your .html cached but always revalidate by adding the "must-revalidate" to the cache-control header. |
Lo-Fi Version | Time is now: 26th September 2024 - 07:33 PM |