How to add Expires Headers in WordPress?
If you’re a blogger, then you might have heard about the term ‘Add Expires Headers’ while checking the speed of your website using tools such as GTMatrix, Pingdom.
What are Expires Headers?
Expires Headers tell the browser to request a specific file from the server or download it from the browser’s cache.
Expires Headers not only reduces a load of downloads from the server but also decrease the number of HTTP requests for the server.
When someone returns to your site, Expires Headers serve the previous version of the same file from the browser cache. Thus it reduces the site load time and enhances the overall page speed.
How does it work?
You can set Expires Headers on a specific file or file types. It tells the web browser how long to store files in the cache.
After adding Expires Headers to your site, when a browser loads your website for the first time then it loads the files like CSS, Javascript, and Images from the server and the browser stores these files as a cache.
Keeping the files in your computer’s cache means when visitor visits on your site again, then the browser loads these files( like CSS, Javascript, Images ) from the cache. If a file is not available in the cache, then it will download from the server.
Note: You will not be able to see the load time difference on the first visit of the site because the file needs to download & cached first. But on the subsequent web page visit, the site will load fast.
How to Add Expires Headers in Your Website?
Expires Headers can be set on an individual file or file types. For files that rarely change on your sites, such as your logo or favicon you can set the images to expire later. For files that change regularly, you can set short amount of expire time.
You can add Expires Headers to your site by adding a few lines of code in the .htaccess file of your website.
The .htaccess file is a hidden configuration file found in the root directory of the WordPress site. The easiest way to add Expires Headers to .htaccess file via File Manager.
1. Login to cPanel and navigate to File Manager.
2. Open public_html folder and look for .htaccess file.
Note: If you didn’t find the .htaccess file in the file manager then on the upper-right side click on Settings button. A popup will open check Show Hidden Files( dotfiles ) to display and Save.
3. Right click on the .htaccess file and click on Edit. You can edit this file with Notepad or any simple text editor.
Note: Take a backup of the .htaccess file before doing anything.
Adding the Code for Expires Headers
To add Expires Headers copy and paste the below code at the bottom of your .htaccess file.
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" </IfModule>
Next, you need to decide what file you want to cache and for how long. Here is a list of file types to include:
- images: jpg, jpeg,
- gif, png
- favicon/ico
- CSS
- javascript
- shockwave-flash
For Images: Files like images probably aren’t changed too often so you can set these to a large amount of time. Add below code right above the </IfModule>:
ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year"
You can use the following units of time when entering the amount of cache :
- years
- months
- weeks
- days
- hours
- minutes
- seconds
For favicon/ico: Favicon is the icon that appears in the browser address bar which is probably never changed. Add below code right above the </IfModule>:
ExpiresByType image/x-icon "access plus 1 year"
For CSS: CSS files control things like fonts, colors, etc on your site. So these files are probably get updated more often than your images. Add below code right above the </IfModule>:
ExpiresByType text/css "access plus 1 month"
For Javascript: Javascript files are another type of configuration file for your site. These files also change occasionally. Add below code right above the </IfModule>:
ExpiresByType application/javascript "access plus 1 year"
For shockwave-flash: Add below code right above the </IfModule> to cache your Flash files:
ExpiresByType application/x-shockwave-flash "access plus 1 month"
Just enter all these lines to your .htaccess file and your final Expires Headers code will look like this :
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
This block of text should be added at the bottom of the .htaccess file and save the file. After that, if you face any problem then replace the new file with the previous version of .htaccess file.
