Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set HTTP Caching Expiration, Recommended by Google PageSpeed

Tags:

I ran tests on my website using Google's PageSpeed and it recommends that I "Leverage browser caching" and provided the following resource:

http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCaching

This resource never explains how to actually change the expiration date of my http headers. Do I do this through .htaccess? I would like to set the caching for as long as possible (without violating Google's policy of a year max).

Any advice on recommended settings (for a custom php-driven social networking community) would be greatly appreciated.

like image 693
pws5068 Avatar asked Apr 20 '10 16:04

pws5068


People also ask

How do I set my browser cache to expire?

One of the way to Set cache expiration is by using . htaccess file. Below code will set expiration for it's respective file type, e.g. for CSS files expiration will be 14 days.

How long should pages be cached?

We recommend a minimum cache time of one week and preferably up to one year for static assets, or assets that change infrequently. If you need precise control over when resources are invalidated we recommend using a URL fingerprinting or versioning technique - see invalidating and updating cached responses link above.

How long should I cache images?

In almost all cases, static assets like images, JS, and CSS, do not change on a per-user basis. Thus they can be easily cached on the browser and on intermediate proxies and can be cached for a very long duration. Google generally recommends a time longer than 6 months or even a year for such content.

How do I fix leverage browser caching in WordPress?

Fixing Leverage Browser Caching in WordPress with the W3 Total Cache can be done by following the steps listed below: Download and install the W3 Total Cache WordPress plugin. Navigate to General Settings and select Enable Browser Cache. Click save and navigate to Browser Cache Settings (top of the page)


2 Answers

In your root's .htaccess:

<IfModule mod_expires.c>   ExpiresActive On   ExpiresDefault "access plus 1 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/x-javascript "access plus 216000 seconds"   ExpiresByType text/html "access plus 600 seconds"   ExpiresByType application/xhtml+xml "access plus 600 seconds" </IfModule> 

And follow by:

<IfModule mod_headers.c> <FilesMatch "\\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "max-age=2692000, public" </FilesMatch> <FilesMatch "\\.(css)$"> Header set Cache-Control "max-age=2692000, public" </FilesMatch> <FilesMatch "\\.(js)$"> Header set Cache-Control "max-age=216000, private" </FilesMatch> <FilesMatch "\\.(x?html?|php)$"> Header set Cache-Control "max-age=600, private, must-revalidate" </FilesMatch> Header unset ETag Header unset Last-Modified </IfModule> 

This is the exact same code I use on every property I manage and offers me (and PageSpeed) the most satisfying results. One may argue on specific rules, that's why I said that it satisfies me, but it certainly satisfies PageSpeed.

like image 190
methode Avatar answered Sep 20 '22 16:09

methode


It can be done with both htaccess and php. Typically you wouldn't want to force caching the actual html since its dynamic database driven content (it can be done with the header() php function if needed). What you want to cache is external css & javascript, and image files.

See here for an .htaccess solution: http://www.askapache.com/htaccess/apache-speed-expires.html

like image 35
Mark Avatar answered Sep 21 '22 16:09

Mark