fbpx

What are expires headers and how do I add them to my website.

Prerequisites

Thank you for visiting my blog. First, I’d like to point out that this guide does not apply to cloud hosted websites such as Shopify or big commerce.

What are expires headers

Expires headers tell the browser, which elements of a website to keep in the browser cache and for how long. Every time a website loads, it has to load all the elements that build or renders that web page from the server. With modern web development and design, these can be many elements and many of them can be large in size. With expires headers enabled, when a website is loaded in the browser, it pulls those elements from local browser storage instead of the server enabling that web page to load faster.

How it works

How it works is very straight forward. You specify the element, whether it’s a jpg element or a CSS element. You then specify how long the browser should keep that element in the browser cache.

[alert type=”info”]Note: If you’re designing a website with Expires headers enabled, use incognito or use a plugin to refresh your cache. You may see false positives in your design. [/alert]

Script Example

Here’s a sample script that you can use. When implementing this script, you will want to use a service like GTMetrix to test the results. What I will typically do is play with the cache lifetime to see what works best.

[code]

<IfModule mod_expires.c>

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

ExpiresActive On
ExpiresDefault “access 1 month”
ExpiresByType image/x-icon “access 1 month”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/xhtml+xml “access 1 month”

</IfModule>

[/code]

I hope this helps someone. Thanks for reading.

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

WE WANT TO HEAR FROM

you

Submit your e-mail for internet business tips and discounts

Get insight on the proper strategy for your project.