How do I leverage browser caching?

Classic
1

So I’m at the point where the site I run for my company is pretty much good to go as far as I know. I went to test how my page runs because I notice it is a little slow loading the first time a machine loads it. I went in an compressed all my images and made them smaller. Here are my results now.

32%20PM
32%20PM2248×2442 588 KB

The only thing that seems to be missing apparently is to Leverage browser caching. I have searched around this forum and the only thing I’ve found on this topic is to get a Cloudflare.com account. If that’s the only way to fix this then I will have to do it, but I figure there is a way I can do it myself.
Site is www.liquidconsulting.se
I use all the latest versions of rapidweaver, stacks, and foundry.

Anyone have any help on how to fix this, or anything else you see wrong with my site.

2

You can do it without CloudFlare, although CloudFlare does make it very easy.
It depends on the Host on how the best way to do this would be. What you would want to do is add an expiry date to the HTTP header that is being served.
If your running Apache as the web server you can use the .htaccess file to cache specific file types for specific periods of time with Apache Module mod_expires. Alternately, you can use mod_headers to customize the response header.

A sample .htaccess file using mode_expires:

# BEGIN Expire headers  
<ifModule mod_expires.c>  
        ExpiresActive On  
        ExpiresDefault "access plus 5 seconds"  
        ExpiresByType image/x-icon "access plus 2592000 seconds"  
        ExpiresByType image/jpeg "access plus 2592000 seconds"  
        ExpiresByType image/png "access plus 2592000 seconds"  
        ExpiresByType image/gif "access plus 2592000 seconds"  
        ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"  
        ExpiresByType text/css "access plus 604800 seconds"  
        ExpiresByType text/javascript "access plus 216000 seconds"  
        ExpiresByType application/javascript "access plus 216000 seconds"  
        ExpiresByType application/x-javascript "access plus 216000 seconds"  
        ExpiresByType text/html "access plus 600 seconds"  
        ExpiresByType application/xhtml+xml "access plus 600 seconds"  
</ifModule>  
# END Expire headers

Sample .htaccess file using mod_heades:

# BEGIN Caching
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
# END Caching

Some hosting companies restrict .htaccess files so it would be best to check their knowledge base.

CloudFlare makes this very easy, and provide a good number of other benefits, even on the free account.

1 Like
3

Appreciate the help. I will give CloudFlare a shot first I guess. I use Godaddy.com and Im pretty sure I have access to the .htaccess file if all else fails.

4

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.