Menu
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.
693
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.
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.
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.
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)
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.
190
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
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
