Add Expires headers to reduce your page load time.

By February 14, 2017 Other, WordPress No Comments
Expires-headers

What Expires Headers does?

Expires headers let the browser know whether to serve a cached version of the page.

  1. Reduce server load
  2. Increase page load time
  3. Cost benefit ratio: high value
  4. Access needed

Expires Headers are rather simple in how they work. They tell the browser how long to store a file in the cache so subsequent page views and visits they don’t have to download the file again. You are right to assume Expires Headers don’t improve page speed for a first time visit as this visitor would have to download all the files for the first time. Using Expires Headers helps increase load times for returning visitors.

You can set Expires headers on specific files or even file types. Then when the browser comes to the website it can see when was the last time it downloaded the specific file types. If it was recently it will display them from the cache, if you haven’t visited the site in a while it will download the newest version from the web server.

The idea is to set late expiry times for items that don’t change on your website (logo, colours etc). Set short expiry times for things that change regularly.

Why Expires headers Important?

Adding Expires Headers is important to reduce number of HTTP requests which reduces the time it take 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 amount of files they need to download.

How to Add Expires Headers in your website.

First you need to decide on what files you update often and what file types don’t get updated often. A common list of file types we see a lot are:

  1. images: jpg, gif, png
  2. favicon/ico
  3. javascript
  4. css

Now go through these file types and think how often you change each one. Commonly images typically are not changed too often (keep in mind we are talking about existing images) favicon is almost never changed, javascript is occasionally changed and CSS is change much more frequently.

We define our Expires Headers in the .htaccess file. This is a hidden file often found in the root of your website (via FTP). It’s always best practice before you edit the htaccess file to back it up!

Now, open up your htaccess file and paste in the following:

First we enable expirations and then we set a default expiry date for files we don’t specify. Now we want to add the lines to explain what expires when. Right above the </IfModule> paste the following and change the dates to reflect the times that best suit your website.

Your complete file should look like this or you can change or modify according to your need:

 

here is the list  of all file type or mime type for  expires headers that you can add in your .htacess file.


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply