{"id":513,"date":"2019-03-06T23:23:56","date_gmt":"2019-03-06T23:23:56","guid":{"rendered":"http:\/\/www.projectimmerse.com\/blog\/?p=513"},"modified":"2020-06-17T05:20:40","modified_gmt":"2020-06-17T05:20:40","slug":"leverage-browser-caching-with-htaccess","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/leverage-browser-caching-with-htaccess\/","title":{"rendered":"Leverage Browser Caching with .htaccess"},"content":{"rendered":"

If you’re an SEO marketeer or a developer – you will see this a lot. <\/p>\n

From Google Page Insights<\/a>, Pingdom<\/a>, SEM Rush<\/a>, GTMetrix<\/a> and other page speed tools – “Leverage Browser Caching” is bound to come up. If you’re ignoring this, then you’re business, your client, or site is at a major loss. Page speed is a huge variable when a customer first engages with your site – chances are high rate of drop offs will occur if you don’t leverage browser caching.
\n<\/p>\n

In this post, I’m going to quickly cover implementation using .htaccess. If you’re using a different web server besides Apache, then you’ll have to stay tuned for that. I’m more of a “LAMP” stack kinda guy so I’m a bit bias here. <\/p>\n

It’s implementation is rather straightforward – except there is one thing that stood out to me. I’m going to provide an example below:<\/p>\n

Example #1<\/h2>\n
\r\n\r\n## EXPIRES HEADER CACHING ##\r\n<IfModule mod_expires.c>\r\nExpiresActive On\r\nExpiresByType image\/jpg "access 1 year"\r\nExpiresByType image\/jpeg "access 1 year"\r\nExpiresByType image\/gif "access 1 year"\r\nExpiresByType image\/png "access 1 year"\r\nExpiresByType image\/svg "access 1 year"\r\nExpiresByType text\/css "access 1 month"\r\nExpiresByType application\/pdf "access 1 month"\r\nExpiresByType application\/javascript "access 1 month"\r\nExpiresByType application\/x-javascript "access 1 month"\r\nExpiresByType application\/x-shockwave-flash "access 1 month"\r\nExpiresByType image\/x-icon "access 1 year"\r\nExpiresDefault "access 2 days"\r\n<\/IfModule>\r\n## EXPIRES HEADER CACHING ##\r\n\r\n<\/pre>\n
Ok, dropping this into your .htaccess file is a good start. You can start fiddling with expiries – using seconds, minutes, hours, days, months and year. It’s really all up to you and based on the frequency of updates made to your site. I can’t determine that for you. <\/p>\n
However, you will see variants – just a slight usage of words I’ve seen throw many developers off track. .htaccess<\/strong> to me has been a neverending learning experience and I find that many developers alike have no idea what these directives even mean. <\/p>\n
So to describe this, here is another example:<\/p>\n
Example #2<\/h2>\n
\r\n\r\n## EXPIRES CACHING ##\r\n<IfModule mod_expires.c>\r\nExpiresActive On\r\nExpiresByType image\/jpg "access plus 1 year"\r\nExpiresByType image\/jpeg "access plus 1 year"\r\nExpiresByType image\/gif "access plus 1 year"\r\nExpiresByType image\/png "access plus 1 year"\r\nExpiresByType text\/css "access plus 1 month"\r\nExpiresByType application\/pdf "access plus 1 month"\r\nExpiresByType text\/x-javascript "access plus 1 month"\r\nExpiresByType application\/x-shockwave-flash "access plus 1 month"\r\nExpiresByType image\/x-icon "access plus 1 year"\r\nExpiresDefault "access plus 2 days"\r\n<\/IfModule>\r\n## EXPIRES CACHING ##\r\n\r\n<\/pre>\n
Alright, do you see the difference? This example has the keyword “plus” in “ExpiresByType image\/jpg “access plus 1 year”. Yeah what’s that about?<\/p>\n
To make things clear, I’m going to break the two examples down and note them accordingly. <\/p>\n
Example #1 – “access 1 year”<\/h3>\n
Download files after 1 year has passed. 1 year is the expiry<\/p>\n
Example #2 – “access plus 1 year”<\/h3>\n
Download files only if the cached copy has not been accessed in 1 day.<\/p>\n
Cool, we got that squared away – the rest is pretty self explanatory, I’ll cover that to end this post. <\/p>\n
Breaking it down:<\/h4>\n