When you configure the expires or cache-control headers, it allows your website to cache static content, which leads to better web performance and reduced load times for the visitors. That’s why we will discuss how to add expires headers in WordPress in this post. We will also describe how to add cache-control headers to your WordPress quickly.
You should be well-known with the term “Add Expires Headers” while checking your website speed using the speed test tools, especially if you are using a WordPress blog or website. You will probably get an error message on the Pingdom tool as “Add Expires Headers” if you have not optimized your site correctly.
Before moving forward, we should learn some essential information about expires headers or cache-control headers.
What is the expires headers error and how it works?
Typically, expires headers are a kind of helping hand that tells your browsers to serve a cached version of your website to your visitors. That means if you define the expires headers in your website, it will say the browser to request the specific files from the server or download it from the browser’s cache.
These things are most often associated with images, but you can use them on all page components like scripts, style sheets, or flash. When you define expire headers, it can remarkably decrease the site load time and increase your website’s loading speed. The reason behind it the browser loads a cached version of your site.
A top-rated speed test tools “Pingdom” declared that web pages are becoming exceeding complex with more images, scripts, style sheets, and Flash on them. They also said that a first-time visit to a page might need several HTTP requests to load all the components.
By defining expires headers in your site, these components easily become cacheable. In this process, it avoids the unnecessary HTTP requests on subsequent page views. You should know that you are allowed to set expires headers on a specific file or file types. It confirms the web browser how long to store your files in the cache.
Working procedure
After adding the expire headers on your site, it will load the files such as CSS, Javascript, and Images from the server if a browser loads your website for the first time. Then the same browser will store these files as a cache after loading every file. The browser will verify for expires headers rules on the next visit.
If there any rules are present, then it will load the essential files from the cache that is stored in it, and show it to the visitors. If there is nothing founded, then it will download the files from the server. In this method, there should be no request to the server for files such as CSS, Javascript, and Images. So your site will load faster.
Important Note: The specific files needs to download & cached first. That’s why you can’t realize the load time difference on the first visit of the site. But the site should load fast on the next visit.
How to check existing headers?
You may check your website for existing expires or cache-control headers before adding them. You can use “GTMetrix.com” to run a test for your domain.
Here you will see the “Performance Score” of your website. After running a performance report, it indicates that does your server needs expires headers or not. You definitely have to configure expires and cache-control headers for your website, if you received an F (0) grade for the “Add Expires Headers” recommendation.
How to add expires headers in WordPress in different ways?
Defining expires headers can be done in various ways. We will tell you the best possible ways to add expires or cache content headers in your WordPress site. In this post, we will discuss a few different methods to edit the .htaccess file.
Typically, expires and cache content headers can be set on an individual file or different file types. You may place a short amount of expire time for those files that change regularly. On the other hand, you should set the images to expire later for those files which rarely change on your sites, just like a logo or favicon.
Adding expire headers is an effortless task. You have to write a few lines of code in the .htaccess file of your website. So let’s go to the main topic and see how to add expires headers WordPress in quick time.
1. Add expire headers using file manager
It is one of the easiest ways to add expires headers. Typically, the .htaccess file is a hidden configuration file which can be found in the root directory. We can do this job in a few steps.
Step 1. At first, login to your hosting cPanel and go to the “File Manager” option.
Step 2. Now, look for the “public_html” folder and open it if you found. Then locate the “.htaccess” file inside the public_html folder. If it is not present in the file manager, then click on the “Settings” button on the upper-right side to create a new file just like a “.htaccess” file.
After clicking the settings button, a popup will open. You have to choose the “Show Hidden Files ( dotfiles)” option in the display and press the “Save” button.
Step 3. In this step, you should right-click on the .htaccess file to open a submenu. Then click on the “Edit” option. This .htaccess file can be edited with the “Notepad” or any simple text editor program.
Step 4. Next, copy and paste the below code at the bottom of your .htaccess file for adding expires headers.
Code:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 month”
</IfModule>
Now, you have to decide which file you want to cache and for how long period. We are providing a list of file types that you may include.
For images: You can set images to a large amount of time because files like images probably don’t change too often. Define these code right above the </IfModule> function.
Code:
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”
At the time of entering the amount of cache, you may use these following units of time. Such as seconds, minutes, hours, days, weeks, months, years.
For favicon or ico: It is a kind of icon which appears in the browser address bar that should probably never changed. You may add the below code right above the </IfModule> line.
Code:
ExpiresByType image/x-icon “access plus 1 year”
For CSS: Usually, “CSS” files can control things like fonts or colors on your website. More often, these files get updated than the images. If you want you can add below code right above the </IfModule> function.
Code:
ExpiresByType text/css “access plus 1 month”
For Javascript: This is another type of configuration file for your WP website. Occasionally, these files also can be changed. So define the below code right above the </IfModule> file.
Code:
ExpiresByType application/javascript “access plus 1 year”
For shockwave-flash: To cache your Flash files, you may add the following code right above the </IfModule> line.
Code:
ExpiresByType application/x-shockwave-flash “access plus 1 month”
You also should enter all of these lines to your .htaccess file. Then 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>
You should add this section of text at the bottom of the .htaccess file. After that, you can save the file and now you are done.
Important Note: Before doing anything, you should take a backup of the .htaccess file. Whenever you face any difficulty, then you will be able to replace the new file with the previous version of the .htaccess file.
2. Add expire headers using Google Cloud
You must have to install the Bitnami WordPress (LAMP) stack on Google Cloud before proceeding to this method. Additionally, this adding expire headers approach will also work with the Bitnami WordPress (LAMP) stack on “Amazon AWS” and “Microsoft Azure” service. There will be a few essential steps in this system of defining the expire or cache control headers.
Step 1. At the beginning of the process, you have to connect to your instance in your “Google Cloud” platform.
AT first, navigate to VM (Virtual Machine) instances from your Google Cloud dashboard. Then press the “SSH” button that is next to the VM instance, which is running your WP website.
Step 2. In this step, you should enable the expires module.
If you are now connected to your virtual machine instance, you need to run the command that is marked red in the screenshot to open your “Apache” server configuration file. Click on the keyboard icon that is located on the top right corner of the page and then choose the “Ctrl+W” option to open the search field.
Once the search field appears, you need to type “expires” in the search box and press the “Enter” key to search. When you found the “expires_module” function, you have to remove the # symbol from it to activate it. In the end, enter “CRTL + X”, then “Y”, to save and exit the file.
Step 3. Now you can add the expires headers in your .htaccess file. In this step, you have to insert the following command to open your “Apache” server application configuration file.
Code:
sudo nano /opt/bitnami/apps/wordpress/conf/httpd-app.conf
When your “httpd-app.conf” file opens, you should copy and paste the lines below directly above the line that starts with <IfDefine USE_PHP_FPM>.
Code:
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
In the end, you need to enter “CRTL + X” and then “Y,” to save and exit the file. Now, your “Apache” server should be restarted. To restart the “Apache” server, you have to execute the code below.
Code:
sudo /opt/bitnami/ctlscript.sh restart
Step 4. After executing all these steps, you should test the performance of your website to check that the changes were effective. Because now you have configured the expires and cache-control headers for your WP site.
You are allowed to re-test your domain on GTMetrix.com website. Here you will get an updated performance report, and also you can navigate to the “YSlow” tab.
As we discussed earlier, you will gain a passing grade for the “Add Expires headers” recommendation if you can define the expires headers correctly.
You also can click on the “YSlow” tab to view the exact details of your expires or cache-control headers in your website.
3. Add expires headers using “Yoast SEO” plugin
This is another easy way to add expires headers to .htaccess file via Yoast SEO Plugin. Let’s follow these steps to define the components in your website.
Step 1. Firstly, log in to your WordPress admin dashboard. Then install the “Yoast SEO” plugin to your WP. Now, you have to look for the “SEO” option and then select the “Tools” submenu from the below list. Next, click on the “File Editor” tab and paste the following lines of codes in the .htaccess file.
In the end, click on the “Save changes” button. That’s all for now, and you are done.
Final Verdict:
We have introduced a few ways to define the expire headers in your website. Hopefully, you have no question about how to add expires headers WordPress, after reading this article.