The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Speed up Sites with .htaccess, Using mod_headers or mod_expires implement caching
Rating  3
askapache
post 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.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
WebKing
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
askapache
post Feb 17 2007, 08:41 PM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 29-December 06
From: USA
Member No.: 1,407



QUOTE(WebKing @ Feb 15 2007, 09:30 AM) *

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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nick
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 22 2007, 01:40 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



You'll need to configure each server separately.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Pozadzides
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Feb 23 2007, 11:21 PM
Post #7


Jocular coder
********

Group: Members
Posts: 2,460
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?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
askapache
post Mar 5 2007, 07:42 AM
Post #8


Newbie
*

Group: Members
Posts: 18
Joined: 29-December 06
From: USA
Member No.: 1,407



QUOTE(Nick @ Feb 21 2007, 07:08 PM) *
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.



QUOTE(John Pozadzides @ Feb 23 2007, 07:20 PM) *
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


QUOTE(Brian Chandler @ Feb 23 2007, 11:21 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 08:32 AM