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 for each "ExpiresByType" 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.