How to Add Expires Headers?
1. Quickread
If you’re running an online store then speed of your website is the most important factor. There are many opportunities by applying you can boost your website speed.
Add expires headers this optimization factor also helps to boost your site speed and reduce server requests. How? Read this blog to get the concept of what expires headers? How can you add expires headers? How does it work? Why is it important? All these questions will clarify in this blog.
You can find this opportunity to fix when you will analyze your site speed by using GTmetrix or any other speed optimization tool.
Expires headers useful to store and fetch the resources from the browser’s cache. By doing this your site loads faster as certain elements are being displayed from browser cache also it helps to reduce server requests as some elements data displayed from Cache and not fetching from server.
For example, if you set expires headers for images (jpeg), the browser will store all the JPEG files in its cache. This means a visitor can load the site faster as the browser has cached some resources related to the site.
You can set expire headers for some time periods so that browsers can store the resources locally for certain time periods and load data from cache when visitors request data repeatedly. By using expires headers, you will improve your site’s speed by reducing HTTP requests .
3. How does it work?
Expires Headers are very simple to set up and understand. It works very simply. You can set expires headers for various files types like css, js, jpg or png, etc. Expire headers tell the browser how long to store the specific files in the cache so when visitors visit the site for a second time then those files will be displayed from the cache and don’t have to download files from the server again. So doing this process user’s get the requested data very quickly and your site’s requests get reduced.
When users visit your website for the first time then requested data will download from the web server initially. When the same user visits your website for the second time and more then the specific data loads from the cache for which files you had been set expires headers.
Recommend to set the late expiry times for the items that don’t change frequently on your website(logo, favicon, colors, etc). And the item you change regularly you can set short expiry times.
4. Why is it important?
Yes, it’s important to set expires headers as iIt will help to load sites data fast as certain data loads from cache and not from server. There are some benefits are given below
- Users requested data load faster after the first initial request.
- It helps reduce server requests.
- Visitor’s get their requested data fast so more traffic on your website.
- Reduce site load time
- Particularly effective on websites where users regularly revisit the same areas of the website.
5. How to add expires headers?
By adding expires headers to When visitors access the site in future it will display data from the browser caching and reduce the load time of your site. In Browser caching you can specify how long a web browser should keep images, css, js stored locally so that once a user access site is future this data can download faster.
You can set for particular duration while setting expires headers so that browsers can cached the specific elements for the certain time period. It means by setting a particular time duration you are telling your browser how long they can be cached in your visitor’s browser.
- years
- months
- weeks
- days
- hours
- minutes
- seconds
Enable GZIP Compression and Expire Headers with .htaccess
First observe each of the file types below, and change the caching times to suit your website
First, open your .htaccess file, make a copy of your original .htaccess file, if in case any mistake from your side you can revert the original . It is now time to enable the expire headers module. (set the ‘ExpiresActive’ to ‘On’), so add this to your .htaccess file:
# Enable expirations ExpiresActive On
For example, you can set expires headers for below types of files
- images: jpg, gif, png
- favicon
- javascript
- css
Expire Headers for Your Favicon
You can set expiry headers for your site favicon as generally favicon rarely changed. When you set a particular time for this element then it allows it to be cached in your visitor’s browser for a specified time from the day of the first visit. If your visitor clears the browser cache, it will re-fetch the resources again.
ExpiresByType image/x-icon “access plus 1 year”
Expire Headers for Your Images
You can also set expiry headers for the sites images which are rarely updated. You can set less duration for expiry headers for your site images because images are the most important factor in an ecommerce site it might need to change from time to time. The code for your images would look like this:
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
You can set expiry headers for your site css. There’s most likely updates to your CSS every once in a while. Therefore, you might consider choosing 1 month as a reasonable caching time. The code for your css would look like the following:
ExpiresByType text/css “access plus 1 month”
Expire Headers for Your Javascript
Javascript is probably something you rarely look at, so the caching time can probably be set to 1 year. The code for this would like
ExpiresByType application/javascript “access plus 1 month”
If any queries related to this blog Contact Us.
Skip to content
