{"id":56240,"date":"2016-08-03T10:13:58","date_gmt":"2016-08-03T09:13:58","guid":{"rendered":"https:\/\/silicondales.com\/?p=56240"},"modified":"2022-08-09T12:59:29","modified_gmt":"2022-08-09T11:59:29","slug":"leverage-browser-caching","status":"publish","type":"post","link":"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/","title":{"rendered":"How To: Leverage Browser Caching for Images, CSS and JS"},"content":{"rendered":"\n<p>Ever checked your website speed using <a href=\"https:\/\/silicondales.com\/tag\/gtmetrix\/\">GTmetrix<\/a>, <a href=\"https:\/\/silicondales.com\/tag\/pingdom\/\">Pingdom<\/a>, <a href=\"https:\/\/silicondales.com\/tag\/pagespeed\/\">PageSpeed<\/a> or <a href=\"https:\/\/silicondales.com\/tag\/yslow\/\">Yslow<\/a>&#8230; or any of the other many and various latest and greatest speed checking tools?<\/p>\n\n\n\n<p>***2021 update: take a look at <a href=\"https:\/\/silicondales.com\/tag\/lighthouse\/\">Lighthouse<\/a><\/p>\n\n\n\n<p>Well, if you have, you might have come across a request to &#8220;leverage browser caching&#8230;&#8221; or similar.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-662db373941ec\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0a0a0a;color:#0a0a0a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0a0a0a;color:#0a0a0a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662db373941ec\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#What_does_%E2%80%9CLeverage_Browser_Caching%E2%80%9D_actually_mean\" title=\"What does &#8220;Leverage Browser Caching&#8221; actually mean?\">What does &#8220;Leverage Browser Caching&#8221; actually mean?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Defining_the_terminology\" title=\"Defining the terminology\">Defining the terminology<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#What_%E2%80%9CLeverage_Browser_Caching_for%E2%80%A6%E2%80%9D_means_for_your_website\" title=\"What &#8220;Leverage Browser Caching for&#8230;&#8221; means for your website\">What &#8220;Leverage Browser Caching for&#8230;&#8221; means for your website<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#How_to_turn_this_on\" title=\"How to turn this on?\">How to turn this on?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Using_htaccess\" title=\"Using .htaccess\">Using .htaccess<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Browser_Caching_for_JS\" title=\"Browser Caching for JS\">Browser Caching for JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Browser_Caching_for_Images\" title=\"Browser Caching for Images\">Browser Caching for Images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Browser_Caching_for_CSS\" title=\"Browser Caching for CSS\">Browser Caching for CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Using_Nginx\" title=\"Using Nginx\">Using Nginx<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Cache_Busting\" title=\"Cache Busting\">Cache Busting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Alternative_Methods\" title=\"Alternative Methods\">Alternative Methods<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Watch_out_for%E2%80%A6\" title=\"Watch out for&#8230;\">Watch out for&#8230;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Watch_out_for_Nginx\" title=\"Watch out for Nginx\">Watch out for Nginx<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Watch_out_for_Third_Parties\" title=\"Watch out for Third Parties\">Watch out for Third Parties<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Cant_Work_Try_a_CDN\" title=\"Can&#8217;t Work? Try a CDN\">Can&#8217;t Work? Try a CDN<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#Leave_a_comment\" title=\"Leave a comment\">Leave a comment<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_does_%E2%80%9CLeverage_Browser_Caching%E2%80%9D_actually_mean\"><\/span>What does &#8220;Leverage Browser Caching&#8221; actually mean?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Defining_the_terminology\"><\/span>Defining the terminology<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Leverage means, basically, use (like a lever). Browser caching is the way most browsers (like Google Chrome, Apple&#8217;s Safari, Internet Explorer, Microsoft Edge etc are all browsers) store information &#8220;locally&#8221; (on your device) in order to load more quickly in future.<\/p>\n\n\n\n<p>JS is short for &#8220;javascript&#8221; &#8211; these files tend to modify some user based function (like displaying a message box if user does X).<\/p>\n\n\n\n<p>CSS is Cascading Style Sheets &#8211; these files determine the style of your website, like fonts and colors, etc.<\/p>\n\n\n\n<p>Images &#8211; these are the pictures on your site (gif, jpg, jpeg, png, etc) &#8211; they only need to be downloaded once if you allow users to browser cache them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_%E2%80%9CLeverage_Browser_Caching_for%E2%80%A6%E2%80%9D_means_for_your_website\"><\/span>What &#8220;Leverage Browser Caching for&#8230;&#8221; means for your website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>What this means, is that you should instruct browsers to store (for example) images, <a href=\"https:\/\/silicondales.com\/tag\/css\/\">CSS<\/a> and <a href=\"https:\/\/silicondales.com\/tag\/js\/\">JS<\/a> files in their &#8220;cache&#8221; (i.e. locally) so that they don&#8217;t have to repeatedly load the same thing again and again (slowing everything down, at least a little). If you think about this a bit, it makes a lot of sense. For example, your logo doesn&#8217;t change, so really, browsers don&#8217;t need to be downloading it on every page: just once, on the first visit.<\/p>\n\n\n\n<p>Browser caching helps visitors experience button click fast usage of your website. Users love it, and consequently, so do search engines.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_turn_this_on\"><\/span>How to turn this on?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Whether or not you invested time, money, sweat, or otherwise into <a href=\"https:\/\/silicondales.com\/tag\/wp-rocket\/\">fancy-dan caching products<\/a> which do everything &#8220;out of the box&#8221; the below instructions will get you caching everything using your website&#8217;s .htaccess file (yes, you need to be running apache&#8230; and allow .htaccess files&#8230; not a discussion for right now!).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_htaccess\"><\/span>Using .htaccess<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If your server is a LAMP setup, and therefore you use Apache as a web server, and you allow overrides (the normal WP setup) you can enter the below code into your .htaccess file. Note you can adjust these access periods to suit your needs.<\/p>\n\n\n<br>\r\n\t\t\t<script async custom-element=\"amp-gist\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-gist-0.1.js\"><\/script>\r\n\t\t\t<style amp-custom>\r\n\t\t\t  amp-gist {\r\n\t\t\t\tmargin: 1rem;\r\n\t\t\t  }\r\n\t\t\t<\/style>\r\n\t\t\t\t\t<amp-gist\r\n\t\t\t\t\t\tdata-gistid=\"312aeac020329b3fe11d866287057540\"\r\n\t\t\t\t\t\tlayout=\"fixed-height\"\r\n\t\t\t\t\t\theight=\"10000\">\r\n\t\t\t\t\t\t<\/amp-gist><br>\n\n\n\n<p>The <a href=\"https:\/\/silicondales.com\/tag\/gist\/\">gist<\/a> above shows you the code to drop in to your HT Access file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Browser_Caching_for_JS\"><\/span>Browser Caching for JS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>The javascript (or JS) in your site is these parts:<\/p>\n\n\n\n<p>ExpiresByType application\/javascript &#8220;access 1 month&#8221;<br>ExpiresByType application\/x-javascript &#8220;access 1 month&#8221;<\/p>\n\n\n\n<p>Having those in there will ensure javascript is browser cached. You&#8217;ll want to rename your JS files if you change them, or you&#8217;ll have some visitors seeing old JS files (from their browser&#8217;s caches).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Browser_Caching_for_Images\"><\/span>Browser Caching for Images<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>All the image file types in the above htaccess file will allow your visitors to store them locally, for zippy speeds, those would be:<\/p>\n\n\n\n<p>ExpiresByType image\/jpg &#8220;access 1 year&#8221;<br>ExpiresByType image\/jpeg &#8220;access 1 year&#8221;<br>ExpiresByType image\/gif &#8220;access 1 year&#8221;<br>ExpiresByType image\/png &#8220;access 1 year&#8221;<\/p>\n\n\n\n<p>Also, kind of:<\/p>\n\n\n\n<p>ExpiresByType image\/x-icon &#8220;access 1 year&#8221;<\/p>\n\n\n\n<p>and<\/p>\n\n\n\n<p>ExpiresByType application\/pdf &#8220;access 1 month&#8221;<\/p>\n\n\n\n<p>Because, this will allow them to cache any PDF and icons you have in the site too &#8211; to prevent them being downloaded often. PDF&#8217;s aren&#8217;t technically images, but, they are Printed Document Files &#8211; so they maybe contain images&#8230; so here they are mentioned!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Browser_Caching_for_CSS\"><\/span>Browser Caching for CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>For the CSS, its a one-liner in the above, this one:<\/p>\n\n\n\n<p>ExpiresByType text\/css &#8220;access 1 month&#8221;<\/p>\n\n\n\n<p>This tells the browser to cache CSS files for 1 month from first access. Like with JS, make sure you rename your CSS files if you make changes to them, or your visitors won&#8217;t see the changes for up to 1 month.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Nginx\"><\/span>Using Nginx<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Nginx is a really fast alternative to apache, but you&#8217;d need to use other rules to get this working.<\/p>\n\n\n\n<p>The following is an example which can be added into your Nginx conf file for your website in order to enable browser caching.<\/p>\n\n\n\n<p><code>    location ~*  \\.(jpg|jpeg|png|gif|ico|css|js)$ {<br>\nexpires 30d;<br>\n}<\/code><\/p>\n\n\n\n<p>This will cache all of the above file extensions for 30 days.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cache_Busting\"><\/span>Cache Busting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you change your image \/ css \/ js file <strong>name<\/strong> when you update them, long caching times shouldn&#8217;t matter a jot to you. If you don&#8217;t you will need to flush caches in order to pick up your edits. Asking user&#8217;s to flush caches isn&#8217;t really an option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alternative_Methods\"><\/span>Alternative Methods<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you&#8217;re running a <a href=\"https:\/\/silicondales.com\/tag\/wordpress\/\">WordPress<\/a> site, one alternative to adding the above manually to your .htaccess file is to install a quality caching plugin, such as <a href=\"https:\/\/silicondales.com\/tag\/wp-rocket\/\">WP Rocket<\/a>, which adds a very similar directive &#8211; among several others &#8211; to this file (assuming you give the plugin relevant permissions!).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Watch_out_for%E2%80%A6\"><\/span>Watch out for&#8230;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Watch_out_for_Nginx\"><\/span>Watch out for Nginx<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We like to make our clients&#8217; websites really fast, often using Nginx as a proxy caching layer in front of Apache. You may need to do some configuring if you find your caching rules are not employed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Watch_out_for_Third_Parties\"><\/span>Watch out for Third Parties<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When you&#8217;re speed testing your site in GTmetrix or whatever, you may see things like Google Analytics, Facebook tracking pixels, and other third party elements which are suggested as having a &#8220;short cache lifetime&#8221;. You cannot actually do anything about these third party scripts (directly) other than stopping using them. So don&#8217;t expect any fixes in this page to work for those. They won&#8217;t.<\/p>\n\n\n\n<p>While it is possible to serve &#8211; for example &#8211; the Google Analytics JS files locally, this is a super advanced process, and not for a general article. If you are looking to do that, consider <a href=\"https:\/\/silicondales.com\/\">booking Silicon Dales<\/a> for a full site optimization.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cant_Work_Try_a_CDN\"><\/span>Can&#8217;t Work? Try a CDN<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As we&#8217;re talking, mainly, about static content, here, such as JS, CSS and your site&#8217;s images, all of these may perform better if offloaded to a CDN. One of the advantages of using a CDN is you can set caching rules to be applied there, and this often has a more clear graphical user interface for novice and intermediate webmasters. A free DNS proxy and CDN service like <a href=\"https:\/\/silicondales.com\/tag\/cloudflare\/\">CloudFlare<\/a> may help you in these circumstances, though it should be noted that the free service may actually be slower than serving direct, if you have a super speedy system setup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Leave_a_comment\"><\/span>Leave a comment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Leave a comment below if this worked \/ didn&#8217;t work for you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever checked your website speed using GTmetrix, Pingdom, PageSpeed or Yslow&#8230; or any of the other many and various latest and greatest speed checking tools? ***2021 update: take a look at Lighthouse Well, if you have, you might have come across a request to &#8220;leverage browser caching&#8230;&#8221; or similar. What does &#8220;Leverage Browser Caching&#8221; actually &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How To: Leverage Browser Caching for Images, CSS and JS\" class=\"read-more button\" href=\"https:\/\/silicondales.com\/tutorials\/seo\/leverage-browser-caching\/#more-56240\" aria-label=\"Read more about How To: Leverage Browser Caching for Images, CSS and JS\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":67363,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2133],"tags":[18,82,4128,2215,2147,4948,4131,5162,1236,1239,1274,1557,4853,4130],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts\/56240"}],"collection":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/comments?post=56240"}],"version-history":[{"count":1,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts\/56240\/revisions"}],"predecessor-version":[{"id":67818,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts\/56240\/revisions\/67818"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/media\/67363"}],"wp:attachment":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/media?parent=56240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/categories?post=56240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/tags?post=56240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}