Add Expires Headers To Speed Up Your Website
Have you ever received the recommendation “Add Expires Headers” when using GTMetrix? Recommendations from the website speed check tool are related to slow loading constraints. If left unchecked, the comfort of website visitors will be disrupted, and ranking in search results can drop.
Don’t let this happen, OK! So that’s why it’s important to manage to add expires headers properly. The goal is to speed up loading blogs and websites by utilizing the cache.
Then, how do I add header expires? We’ll explain more. However, first, let’s learn what Expires Header is.
What are Expires Headers?
The expires header is a line of code that tells the browser how long a site’s cache files should be kept.
The simple explanation is like this:
When a user first visits a website page, the browser will usually automatically load the file from the server. These files can be HTML, Images, PDF, CSS, Javascripts, and others. The received files are then stored in the cache. The files that were loaded earlier are stored in the cache.
So, if the user wants to open the same page, take it from the cache, without asking the server again.
However, how long should the file be stored in the browser cache?
Now, since the cache has an expiration date, it is important to specify the header accordingly. Why is that?
If the header expires too quickly, there will always be a request directly to the server. Apart from the long loading process, you might get a warning such as, ” Your server is not using expires header for your image, ” (“Your server does not have an expired header for the image).
On the other hand, if the header expires too long, the content changes made cannot be displayed immediately. This is because the browser still displays old data stored in the cache.
So, by specifying the add expires header, you can adjust when the browser must retrieve the file to the server. Also, when he can retrieve files from the cache.
How to Add Add Expires Header
There are two ways to add expires header: using plugins and manual coding. For manual coding, of course, you need good programming skills. If you want it easier, you can use several expires headers plugins.
How to Manually Add Expires Headers for WordPress
According to the server you are using, this is how to add header manually. We will explain how to do this on Apache and Nginx servers respectively. Okay, look at the explanation below!
1. Using Apache Web Server
To add the add expires header, you will need to access the .htaccess file. The easiest way is through cPanel with the following steps:
You can log in to your cPanel account with the appropriate username and password.
After logging in, select the File Manager menu.
In the File Manager, select the public_html folder.
After logging in to public_html, you will find a .htaccess file. Do a right-click on this file, then select Edit.
The next step, copy and paste this line of code into the .htaccess file, as shown below:
<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>
As seen in the example, you have set the expiration status to be active. In addition, you also have set the expiration for each file type. Adjust to your needs.
For example, the image and video files above use 1-year expiration. The consideration is that these types of files do not receive any updates in contrast to CSS and Javascript, which use faster expiration, which is 1 month.
When you’ve finished editing and activated the expirations file, don’t forget to save the file code changes in the .htaccess file earlier. If you find that the .htaccess file is hidden, you can use FTP to bring up the Show Hidden Files option.
2. Using Nginx Server
It’s easier to add header expires in Nginx, you can copy and paste the code line below into your server block.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control “public, no-transform”;
}
Also Read: Serve Scaled Images: Improve Your Site Performance
How to add a WordPress header with a plugin
Adding a line of code to your .htaccess file requires coding skills. But don’t worry. There is the easiest way to manage add header expires, namely using a plugin. Here’s how to use it:
First, go to the WordPress dashboard. Then, go to the Plugins> Add New menu. Then, type Add Expires Headers in the search field.
After that, click Install Now, then Activate.
On the Add Expires Header menu, click Cache Settings.
Next, on the Cache Settings page, select the file type for which you want to enable the cache. Then, specify how long the cache will hold files.
If the settings have been made, click Submit.
Besides Add Expires Headers, other plugins you can use are W3 Total Cache, WP Rocket, and Leverage Browser Caching.
Time to Manage Expires Headers for Websites Faster!
Now you know that one way to speed up website loading is to set the header expires. You can specify how long the cache keeps temporary files in the browser, so you don’t always have to ask the server.
Even so, you need to do it according to the website’s needs so that you get maximum results. Don’t forget always to check the website speed regularly. The goal is to ensure visitor comfort and maintain the best position in Google search results.
Always remember that loading speed can also affect your ranking in Google search results. So our advice is to check the website regularly, OK!
