Leverage Browser Caching Best Method

0 30

Leverage Browser Caching, This is how you fix Warning of Google PageSpeed Insights Leverage Browser Caching, the idea is very simple, when you visit a website browser needed to download several files like Cascading Style Sheets (CSS), Javascripts, Images, Fonts before parsing the whole page, this is how the initial rendering take place, downloading all those files will result in heavy bandwidth usage draining all your users money every visit, Average size of a website is 2MB and it is projected to be 3MB by 2017, On average U.S. wireless customers consume 1.8 GB of cellular data every month

1.8 GB = 1800MB so an average U.S user can only visit your site 900 times a month if all datas need to be refreshed every visits, caching previously downloaded files will lower data consumption and quicken browsing experience

How to Leverage Browser Caching with Apache htaccess

If cache headers are setup properly browser will not http request for previously cached files and use previously cached files to reduce bandwidth wastage & speedup browsing experience. Try to reload this page for real life example more info: www.guest.blog

You can use Expires header (mod_expires) or Cache-Control header to leverage browser cachingeither one of Cache-Control or Expires header is recommended, do not use both as the max-age directive takes priority over Expires (max-age is the value used by Cache-Control Header)

I would definitely recommend Cache-Control Header as it is the latest but you can also use Expires header too, but do not use both.

Cache-Control vs Expires (mod_expires)

Cache-Control was introduced in HTTP/1.1 and offers more options than Expires. They can be used to accomplish the same thing but the data value for Expires is an HTTP date,  whereas Cache-Control max-age lets you specify a relative amount of time so you could specify “X hours after the page was requested”.
Expires header depends on Date Header without Date Header mod_expires will not work properly, Expires use Server-Side Date to calculate cache time but in the other hand Cache-Control header doesn’t depend on any other header it uses the Client-Side date to calculate cache time. If you are using a CDN (Cloud Delivery Network) I recommend to use Cache-Control with a max-age time in seconds. For example Cache-Control: max-age=604800. This prevents request-peaks (heavy load) to your origin-server: With “Expires Wed, 07 Aug 20xx 04:37:07 GMT” all browsers will request same file at the same time.

 

For painless method copy paste this code in very end of htaccess file, this will add support for Cache-Control which is simply enough for most sites, Cache-Control Header is recommended and its best for CDN.

# Leverage Browser Caching Guest.blog/?p=3184
<IfModule mod_headers.c>

# Remove Expires header, Which is something similar to Cache-Control Header
Header always unset Expires
Header unset Expires

# 1 WEEK
<FilesMatch ".(dmg|bmp|bz2|gif|ico|gz|rar|rtf|swf|eot|tar|tgz|txt|wav|torrent|pkg|rar|exe|zip|jpeg|jpg|gif|bmp|mp3|ttf|woff|flv|swf|png|css|ico|pdf|mpg|mp4|mov|wav|wmv|swf|css|js|txt|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip|css|htc|less|js|js2|js3|js4)$">
Header unset Cache-Control
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# NEVER CACHE - notice the extra directives
<FilesMatch ".(html|htm|php|cgi|pl)$">
Header unset Cache-Control
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>


#Header edit Vary (.*)User-Agent(.*) $1$2
# Remove leading or trailing ',' without making things complex above
#Header edit Vary ^,?(.*),?$ $1
# 2.4-only: remove empty Vary header
#Header unset Vary "expr=resp('Vary') =~ /^$/"

</IfModule>
# Leverage Browser Caching Guest.blog/?p=3184

If you favor mod_expires / Expires header use the following snippet in the very end of htaccess

# Leverage Browser Caching Guest.blog/?p=3184
<IfModule mod_expires.c>

# Remove Cache-Control header, which is something similar to Expires Header
Header always unset Cache-Control
Header unset Cache-Control
 ExpiresActive on
 
# Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault "access plus 1 month"
 
# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest "access plus 0 seconds"
 
 
 
# Your document html
 ExpiresByType text/html "access plus 0 seconds"
 
# Data
 ExpiresByType text/xml "access plus 0 seconds"
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"
 
# RSS feed
 ExpiresByType application/rss+xml "access plus 1 hour"
 
# Favicon (cannot be renamed)
 ExpiresByType image/x-icon "access plus 1 week"
 
# Media: images, video, audio
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"
 
# HTC files (css3pie)
 ExpiresByType text/x-component "access plus 1 month"
 
# Webfonts
 ExpiresByType font/truetype "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 
# CSS and JavaScript
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType text/javascript "access plus 1 year"
 
</IfModule>
# Leverage Browser Caching Guest.blog/?p=3184

 

Leave A Reply