Leverage browser caching to make your webpages faster. If you can leverage browser caching, you can increase website speed considerably. As Google starts considering site speed as a SEO parameter, webmasters can leverage browser caching to improve site speed and get better search engine rankings.
Here is a complete .htaccess file we have it on root folder.
Options All -Indexes
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
Header set Connection keep-alive
</IfModule>
FileETag None
############## MaxCDN Fix #############
<IfModule mod_headers.c>
<FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
</IfModule>
########### REDIRECT TRAFFIC TO HTTPS ############
# RewriteEngine On
# RewriteCond %{HTTPS} off
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
############ SECURITY ###########
<FilesMatch “\.(md|exe|sh|bak|inc|pot|po|mo|log|sql)$”>
Order allow,deny
Deny from all
</FilesMatch>
<Files robots.txt>
Allow from all
</Files>
############## CACHING-GZIP ############
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000
<FilesMatch “\.(txt|xml|js)$”>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch “\.(css)$”>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$”>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch “\.(jpg|jpeg|png|gif|swf|webp)$”>
ExpiresDefault A2592000
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
<FilesMatch “\.(txt|xml|js)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
<FilesMatch “\.(css)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
<FilesMatch “\.(jpg|jpeg|png|gif|swf|webp)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE “application/atom+xml” \
“application/javascript” \
“application/json” \
“application/ld+json” \
“application/manifest+json” \
“application/rdf+xml” \
“application/rss+xml” \
“application/schema+json” \
“application/vnd.geo+json” \
“application/vnd.ms-fontobject” \
“application/x-font-ttf” \
“application/x-javascript” \
“application/x-web-app-manifest+json” \
“application/xhtml+xml” \
“application/xml” \
“font/eot” \
“font/opentype” \
“image/bmp” \
“image/svg+xml” \
“image/vnd.microsoft.icon” \
“image/x-icon” \
“text/cache-manifest” \
“text/css” \
“text/html” \
“text/javascript” \
“text/plain” \
“text/vcard” \
“text/vnd.rim.location.xloc” \
“text/vtt” \
“text/x-component” \
“text/x-cross-domain-policy” \
“text/xml”
</IfModule>
<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
</IfModule>
######### CRUNCHIFY SETTING END ############
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
NOTE: Please remove redirect to HTTPS block if you are not on HTTPS :). I’ve already commented out it though. If you have enabled HTTPS already on site and you are still letting user visit site over HTTP then you are good.
Let’s understand each Sections of .htaccess file:
Step-1 Getting rid of ETag
First of all, we need to disable ETag header since we are going to use Expires duration. ETag technology is known as slow and problematic – even other top ranking site complains about it.
Add to .htaccess: (located at blog’s root location)
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
Header set Connection keep-alive
</IfModule>
FileETag None
We are also keeping connection keep-alive. It’s called persistent connection. If a new connection has to be open for every request or file it could take significantly longer time.
- Step-2 Enable browser caching
If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, css, Java Script, pdf, swf etc. from local disks rather than over the network.
So if you configure your web server to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster. Add below to .htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000
<FilesMatch “\.(txt|xml|js)$”>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch “\.(css)$”>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$”>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch “\.(jpg|jpeg|png|gif|swf|webp)$”>
ExpiresDefault A2592000
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
<FilesMatch “\.(txt|xml|js)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
<FilesMatch “\.(css)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
<FilesMatch “\.(jpg|jpeg|png|gif|swf|webp)$”>
Header set Cache-Control “max-age=2592000”
</FilesMatch>
</IfModule>
What this does is adding far future expires header (make sure mod_expires is loaded in your apache config if you have problems) to your static content (images, js, css, etc).
Two things here:
- ExpiresDefault A2592000 = 1 month in the future
- Cache-Control “max-age=2592000” = 1 month
If you like, you could also set value to 1 Year = 31536000
Step-3 Add gzip and deflate compression headers
Compressing things always ends up making them smaller and load faster, so implementing some form of compression on your components is a must.
This optimization step might not work for you if your server does not have either mod_deflate or mod_gzip installed as part of Apache.
Basically we are compressing most of the resources so those loads with less bandwidth and very fast.
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE “application/atom+xml” \
“application/javascript” \
“application/json” \
“application/ld+json” \
“application/manifest+json” \
“application/rdf+xml” \
“application/rss+xml” \
“application/schema+json” \
“application/vnd.geo+json” \
“application/vnd.ms-fontobject” \
“application/x-font-ttf” \
“application/x-javascript” \
“application/x-web-app-manifest+json” \
“application/xhtml+xml” \
“application/xml” \
“font/eot” \
“font/opentype” \
“image/bmp” \
“image/svg+xml” \
“image/vnd.microsoft.icon” \
“image/x-icon” \
“text/cache-manifest” \
“text/css” \
“text/html” \
“text/javascript” \
“text/plain” \
“text/vcard” \
“text/vnd.rim.location.xloc” \
“text/vtt” \
“text/x-component” \
“text/x-cross-domain-policy” \
“text/xml”
</IfModule>
<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
</IfModule>
Step-4 Verify if your settings are working correctly