homepage Welcome to WebmasterWorld Guest from 204.236.254.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Apache Web Server
Forum Library, Charter, Moderators: Ocean10000 & incrediBILL & phranque

Apache Web Server Forum

    
Leverage Browser Caching
Trying to get Leverage Browser Caching to work on Apache server.
AnthonysItalianFood




msg:4433599
 5:11 pm on Mar 26, 2012 (gmt 0)

I am hoping someone can help me with this perplexing animal called "Leverage browser caching".

I have contacted my web host provider; shared hosting using apache server. (verio) and they were not willing to help me with this, quite sad really. I'm fairly certain Verio's shared web hosting packages use Apache servers.

The server is working great and the .htaccess file is working great as well ( /www/htdocs/.htaccess). In this file I have a 301 and a 404 redirect which are working perfectly and I also have recommended lines of code in there for "Leverage browser caching", but after seeing speed test results seems the caching is still not working. I was hoping someone who understands this stuff can help me and let me know if there is something I'm doing wrong in the code I have in the .htaccess file for the Leverage browser caching.

I have been working hard at speeding up my website and have been trying to nail down "Leverage browser caching", but I cannot seem to get this caching stuff to work properly via the .htaccess file.
I have been working with the .htaccess file, seems I have made some headway, but speed tests still show the images not having "Leverage browser caching"

According to tests I perform with these two services:
[developers.google.com ]
results from this tool:
"The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:"

[gtmetrix.com ]
results from this tool:
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:"

and same with this one:
[tools.pingdom.com ]

Some Google rules on Leverage Browser Caching"
[code.google.com ]

The "Leverage browser caching" is still a high priority for me to fix. After much research on this, I have tried several different methods using the .htaccess file. I have placed 4 examples below. All seem to work. I've tried others but get internal server errors. The 4 listed below cause no errors and appear to speed up things, however still showing all the image file to have short freshness lifetime when using the testing tools listed above. I want to make the time much longer with the .htaccess method shown below using the expire by type method. Can someone look at what I'm doing and offer suggestions?

At present I am using option #1 shown below in the .htaccess file and has no errors, but seems not to work completely.

example 1

## EXPIRES CACHING ##
<IfModule mod_expires.c>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType application/pdf "access plus 2592000 seconds"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##



example 2

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##


example 3

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/jpg A15552000
ExpiresByType image/jpeg A15552000
ExpiresByType image/gif A15552000
ExpiresByType image/png A15552000
ExpiresByType text/css A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/x-javascript A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType image/x-icon A2592000
ExpiresDefault A2592000

</IfModule>
## EXPIRES CACHING ##

example 4

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/js "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType application/javascript "access plus 1 years"
ExpiresByType application/x-javascript "access plus 1 years"
#ExpiresDefault "access plus 1 days"
</IfModule>

 

phranque




msg:4433603
 5:31 pm on Mar 26, 2012 (gmt 0)

i would try using a tool such as Live HTTP Headers to see what Cache-Control response header (if any) is provided as well as the value of the If-Modifed-Since request header for the listed resources.

AnthonysItalianFood




msg:4433619
 6:23 pm on Mar 26, 2012 (gmt 0)

@phranque, I installed the firefox add on file HTTP live header and ran it on a lot of my pages. It's spits out a whole lot of information I don't fully understand. There is one line in there that seems promising:

"If-Modified-Since: Tue, 05 Feb 2008 14:45:42 GMT"


For the purposes of not showing my domain here this is what it shows for one of the images as a typical example: (same info for all my images on all pages)

-------------------------------------------------------
[mydomain.com...]

GET /images/myimage.gif HTTP/1.1
Host: mydomain.com
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: mydomain.com
Cookie: __qca=P0-1940534042-1298044094301; __utma=16574836.1857117754.1312997219.1312997219.1332784426.2; __utmb=16574836.9.10.1332784454; __utmz=16574836.1332784454.2.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmc=16574836
If-Modified-Since: Tue, 05 Feb 2008 14:45:42 GMT
If-None-Match: "1168a84-231e-47a87696"
Cache-Control: max-age=0

HTTP/1.1 304 Not Modified
Date: Mon, 26 Mar 2012 18:13:37 GMT
Server: Apache/1.3.42 (Unix) mod_auth_tkt/2.1.0 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.8r
Connection: Keep-Alive, Keep-Alive
Keep-Alive: timeout=15, max=99
Etag: "1168a84-231e-47a87696"
-------------------------------------------------------

So am I on the right track? Maybe just the speed tools I'm using not showing the correct information? Or something else I have wrong? Any insights on this?

Thanks for your help.

Tony

phranque




msg:4433654
 8:20 pm on Mar 26, 2012 (gmt 0)

well "access plus NNNNNNN seconds" should show an If-Modified-Since some time in the future.
on the other hand "304 Not Modified" is the response you want to see for a requested resource with a cached period that has not expired.
so i'm not sure how that validates.

what you really want to do is clear your browser cache so you can see what response headers are provided with a fresh copy of the requested resource.

it would also be interesting to know if you have any other cacheing mechanisms in your configuration such as a proxy or gateway.

AnthonysItalianFood




msg:4433672
 8:46 pm on Mar 26, 2012 (gmt 0)

Well I thought the "if modified" made sense to me because in this case: "If-Modified-Since: Tue, 05 Feb 2008 14:45:42 GMT" ... the date of Tue, 05 Feb 2008 was the last time I modified the actual graphic. So if I change the graphic the bots will noticed that the graphic has been changed and then and only then actually download a new version of the graphic. Am I correct with this logic?

I have no other caching mechanisms setup, just a 404 redirect as follows:
-----------------------------
ErrorDocument 404 /404.html

RewriteEngine on
RewriteBase /
-----------------------------


and a 301 redirect as follows:
-----------------------------
RewriteCond %{THE_REQUEST} ^.*\/index\.html\ HTTP/
RewriteRule ^(.*)index\.html$ /$1 [R=301,L]

RewriteCond %{http_host} !^mydomain.com$ [nc]
RewriteRule ^(.*)$ [mydomain.com...] [r=301,nc,L]
-----------------------------
The redirects are working perfectly :-)


The order in which I have things setup in my .htaccess file is:

1.) 404 redirect
2.) 301 redirect
3.) Expires caching

This is all I have in the .htaccess


I cleared the cache and ran again on one of the simpler pages and get this:

-----------------------------------------

[mydomain.com...]

GET /mypage.html HTTP/1.1
Host: mydomain.com
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cookie: __qca=P0-1940534042-1298044094301; __utma=16574836.1857117754.1312997219.1312997219.1332784426.2; __utmz=16574836.1332784454.2.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

HTTP/1.1 200 OK
Date: Mon, 26 Mar 2012 20:37:53 GMT
Server: Apache/1.3.42 (Unix) mod_auth_tkt/2.1.0 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.8r
Last-Modified: Fri, 23 Mar 2012 23:16:40 GMT
Etag: "1168432-980e-4f6d0458"
Accept-Ranges: bytes
Content-Length: 38926
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html
----------------------------------------------------------
[mydomain.com...]

GET /mystyle.css HTTP/1.1
Host: mydomain.com
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: [mydomain.com...]
Cookie: __qca=P0-1940534042-1298044094301; __utma=16574836.1857117754.1312997219.1312997219.1332784426.2; __utmz=16574836.1332784454.2.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

HTTP/1.1 200 OK
Date: Mon, 26 Mar 2012 20:37:54 GMT
Server: Apache/1.3.42 (Unix) mod_auth_tkt/2.1.0 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.8r
Last-Modified: Wed, 21 Mar 2012 11:55:13 GMT
Etag: "116855c-47d-4f69c1a1"
Accept-Ranges: bytes
Content-Length: 1149
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/css
----------------------------------------------------------
[mydomain.com...]

GET /images/myimage.gif HTTP/1.1
Host: mydomain.com
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: [mydomain.com...]
Cookie: __qca=P0-1940534042-1298044094301; __utma=16574836.1857117754.1312997219.1312997219.1332784426.2; __utmz=16574836.1332784454.2.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

HTTP/1.1 200 OK
Date: Mon, 26 Mar 2012 20:37:54 GMT
Server: Apache/1.3.42 (Unix) mod_auth_tkt/2.1.0 FrontPage/5.0.2.2635 mod_ssl/2.8.31 OpenSSL/0.9.8r
Last-Modified: Fri, 28 Oct 2011 12:42:40 GMT
Etag: "11688e5-c848-4eaaa340"
Accept-Ranges: bytes
Content-Length: 51272
Keep-Alive: timeout=15, max=99
Connection: Keep-Alive
Content-Type: image/gif
-----------------------------------------

Live http headers also gives info on all the other graphics which are similar to the .gif reference above, google ads, social buttons I have on the site, google analytics, etc....

phranque




msg:4433865
 10:33 am on Mar 27, 2012 (gmt 0)

you should be getting an Expires header with the expiration based on the specified interval and a Cache-Control header with the max-age directive specified based on difference between the request time and the expiration date.

when you use an alternate syntax like "access plus 2592000 seconds" that interval translates to "now" (the time of request) plus 30 days.

these mod_expires directives will only work in .htaccess if you have specified AllowOverride All or AllowOverride Indexes in the appropriate directory context of your httpd.conf file.

i was a bit short on my test description:
- clear cache.
- request a fresh copy and observe response headers.
- make subsequent request before the cached copy is expired and observe request and response headers.
- ideally you would test this with a short expiration so you could also make a request for a resource that is cached but expired.

NOTE: use example.com in your sample code to avoid linking instead of mydomain which is a live domain.
Reserved Example Second Level Domain Names:
http://tools.ietf.org/rfc/rfc2606.txt [tools.ietf.org]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Apache Web Server
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved