Leverage browser caching, how on apache or .htaccess?
Php.HtaccessBrowser CachePhp Problem Overview
What to do here? I have a huge list of files that Google Speed Page said to "Leverage Browser Caching".. but I don't know how? Do I mess or change the Apache config file (below) or do I put something in my .htaccess page?
<IfModule mod_proxy.c>
ProxyRequests Off
CacheRoot "/var/run/proxy"
CacheSize 1024
CacheGcInterval 24
#CacheMaxExpire 24
#CacheLastModifiedFactor 0.1
#CacheDefaultExpire 1
#NoCache a_domain.com another_domain.edu joes.garage_sale.com
<Directory "disabled_proxy">
Allow from example.com
Deny from all
Order Deny,Allow
</Directory>
</IfModule>
##
#### mod_expires is configured so that all static files but images
#### expire after 60 seconds. Any response that has a life span of more
#### than 5 seconds (see webperfcache.conf) will be cached by webperfcache.
#### Make sure your CGIs return a "Cache-Control: no-cache" header if you
#### elect to make your dynamically generated HTML pages not cache-able.
#### If all your HTML pages are static you may also increase ExpiresDefault.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A60
ExpiresByType image/bmp A3600
ExpiresByType image/gif A3600
ExpiresByType image/ief A3600
ExpiresByType image/jpeg A3600
ExpiresByType image/png A3600
ExpiresByType image/tiff A3600
ExpiresByType image/x-cmu-raster A3600
ExpiresByType image/x-portable-anymap A3600
ExpiresByType image/x-portable-bitmap A3600
ExpiresByType image/x-portable-graymap A3600
ExpiresByType image/x-portable-pixmap A3600
ExpiresByType image/x-rgb A3600
ExpiresByType image/x-xbitmap A3600
ExpiresByType image/x-xpixmap A3600
ExpiresByType image/x-xwindowdump A3600
ExpiresByType audio/basic A3600
ExpiresByType audio/midi A3600
ExpiresByType audio/mpeg A3600
ExpiresByType audio/x-aiff A3600
ExpiresByType audio/x-pn-realaudio A3600
ExpiresByType audio/x-pn-realaudio-plugin A3600
ExpiresByType audio/x-realaudio A3600
ExpiresByType audio/x-wav A3600
ExpiresByType video/mpeg A3600
ExpiresByType video/quicktime A3600
ExpiresByType video/x-msvideo A3600
ExpiresByType video/x-sgi-movie A3600
</IfModule>
Php Solutions
Solution 1 - Php
I took my chance to provide full .htaccess code to pass on Google PageSpeed Insight:
- Enable compression
- Leverage browser caching
> # Enable Compression
>
> # Leverage Browser Caching
>
There is also some configurations for various web servers see here.
Hope this would help to get the 100/100 score.
Solution 2 - Php
I was doing the same thing a couple days ago. Added this to my .htaccess file:
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A86400
ExpiresByType text/javascript A86400
ExpiresByType application/x-shockwave-flash A2592000
#
<FilesMatch "\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$">
Header set Cache-Control "public"
</FilesMatch>
And now when I run google speed page, leverage browwer caching is no longer a high priority.
Hope this helps.
Solution 3 - Php
This is what I use to control headers/caching, I'm not an Apache pro, so let me know if there is room for improvement, but I know that this has been working well on all of my sites for some time now.
Mod_expires
http://httpd.apache.org/docs/2.2/mod/mod_expires.html
This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. The expiration date can set to be relative to either the time the source file was last modified, or to the time of the client access.
These HTTP headers are an instruction to the client about the document's validity and persistence. If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered "expired" and invalid, and a new copy must be obtained from the source.
# BEGIN Expires
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "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"
</ifModule>
# END Expires
Mod_headers
http://httpd.apache.org/docs/2.2/mod/mod_headers.html
This module provides directives to control and modify HTTP request and response headers. Headers can be merged, replaced or removed.
# 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
Solution 4 - Php
First we need to check if we have enabled mod_headers.c and mod_expires.c.
sudo apache2 -l
If we don't have it, we need to enable them
sudo a2enmod headers
Then we need to restart apache
sudo apache2 restart
At last, add the rules on .htaccess (seen on other answers), for example
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A86400
ExpiresByType text/javascript A86400
ExpiresByType application/x-shockwave-flash A2592000
#
<FilesMatch "\.(gif|jpe?g|png|ico|css|js|swf)$">
Header set Cache-Control "public"
</FilesMatch>