Knowledge Base

Browser Caching with .htaccess

You can speed up your website by taking advantage of the browser caching feature.

## EXPIRES CACHING ##
# Enable Compression

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain

# Leverage Browser Caching

ExpiresActive On

#images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"

#video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"

# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"

#others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/html "access plus 600 seconds"

#Fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"

## EXPIRES CACHING ##
When you update your htaccess file, you will also avoid the Leverage Browser Caching error by taking advantage of the browser caching feature in the Google PageSpeed ​​Insights tool. You may also consider enabling the following various compression rules.

Enabling Gzip Compression
Enabling GZIP compression improves your website performance and reduces page load time.When a visitor makes a request to your website, the server compresses the requested page, significantly reducing its size, and sends it to the user's computer. The time required for file compression on the server is much less than the time it takes to upload a large file over the Internet, so gzip compression improves the performance of websites. When you enable gzip compression, you will also benefit your on-site SEO.

To enable GZIP compression for posts, HTML, JavaScript, CSS, and XML, you can add the following rules to your website's .htaccess file:

 

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Browser Cache Control

Cache control allows us to control browser caching. The important part of the following line tells you that there are different file types listed (ico, flv, gif, css, js, jpeg, png, etc.) and that the caching instructions that follow will apply to those file types and for how long. For example, if you do not want your jpeg files to be cached for this period of time, you can delete “jpeg” from this line.

# This sets up browser cache control

<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=2678400, public"

<filesmatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"

<filesmatch "\.(pdf)$">
Header set Cache-Control "max-age=86400, public"

<filesmatch "\.(js)$">
Header set Cache-Control "max-age=2678400, private"

# END Cache-Control Headers
You can edit your .htaccess file with the File Manager in cPanel or via FTP.