Add Expires Headers To Speed Up Your Website

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.

login into cpanel

After logging in, select the File Manager menu.

open file manager in cpanel

In the File Manager, select the public_html folder

open public_html in cpanel

After logging in to public_html, you will find a .htaccess file. Do a right-click on this file, then select Edit.

edit .htaccess file in cpanel

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 menuThen, type Add Expires Headers in the search field.

Wordpress Add Expires Headers plugin

After that, click Install Now, then Activate.

activate Add Expires Headers plugin

On the Add Expires Header menu, click Cache Settings.

setup Add expires headers plugin

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.

Add expires headers plugin cache settings

If the settings have been made, click Submit.

Besides Add Expires Headers, other plugins you can use are W3 Total CacheWP 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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here