Leverage Browser Caching means storing static files of a website in visitor browser. And then retrieving them from browser quickly instead again from server. Actually it uses to speed up each page of a website. Here is the guide how to Leverage Browser Caching with .htaccess. Be sure you have a recent, good backup of your site you can use to restore from if an update or upgrade goes horribly wrong.

As a bare minimum, you add the following in your .htaccess. To do this, simply access your hosting cPanel, and with your File Manager to do the update. Steps as below:

  • Access the File Manager by clicking on the File Manager icon within your cPanel. This can be quickly located by typing File Manager into the search bar at the top of the cPanel.
  • In the top right of the screen, click the settings button. Ensure the option that states Show Hidden Files is checked and click save at the bottom of the window.
  • Once you can see your hidden dot files, navigate to the domain’s file path by right clicking the .htaccess file, and then selecting Edit.
  • Once in the edit mode for the .htaccess file, paste the following Cache-Control Headers and Expiring Headers code each on a new line within the .htaccess file.
    #Customize expires cache start - adjust the period according to your needs
    
      FileETag MTime Size
      AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
      ExpiresActive On
      ExpiresByType text/html "access 600 seconds"
      ExpiresByType application/xhtml+xml "access 600 seconds"
      ExpiresByType text/css "access 1 month"
      ExpiresByType text/javascript "access 1 month"
      ExpiresByType text/x-javascript "access 1 month"
      ExpiresByType application/javascript "access 1 month"
      ExpiresByType application/x-javascript "access 1 month"
      ExpiresByType application/x-shockwave-flash "access 1 month"
      ExpiresByType application/pdf "access 1 month"
      ExpiresByType image/x-icon "access 1 year"
      ExpiresByType image/jpg "access 1 year"  
      ExpiresByType image/jpeg "access 1 year"
      ExpiresByType image/png "access 1 year"
      ExpiresByType image/gif "access 1 year"
      ExpiresDefault "access 1 month"
    
    #Expires cache end
  • After the code above has been added to the .htaccess file, Do not make any other changes, click the save button at the top right corner of the screen. Boom, you are done!
SHARE
Previous articleWordPress – Leverage Browser Caching with Plugin
Next articleIncrease page load time with Expires headers
Vickson Tan
Join Exabytes family since 2006 and grow the company together with team, from hosting company to cloud services company. Providing all cloud solutions to SMEs and Grow their business online. https://www.linkedin.com/in/vicksontan/