Expires headers let your browser know whether to serve a cached version of the page and it’s components or to download new versions of the files. By defining when a component of your site expires, you help to:
- Reduce server load
- Increase page load time
What are expires headers
Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache.
The whole idea behind Expires Headers is not only to reduce the load of downloads from the server (constantly downloading the same file when it’s unmodified is wasting precious load time) but rather to reduce the number of HTTP requests for the server.
Why is it important?
Adding Expires Headers is important to reduce HTTP requests which reduce the time it takes for the server to communicate with the browser. It also allows your users to reuse the cache files that have been stored in the browser to reduce the number of files they need to download.
Add Expires headers to your .htaccess file
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.
<IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "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" </IfModule>
- 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. Congrats! You have now Leveraged Browser Caching!
