{"id":267,"date":"2015-04-29T07:05:46","date_gmt":"2015-04-29T07:05:46","guid":{"rendered":"http:\/\/betakb.veeble.org\/?p=267"},"modified":"2025-03-13T12:08:33","modified_gmt":"2025-03-13T06:38:33","slug":"leverage-browser-caching-by-adding-expires-headers","status":"publish","type":"post","link":"https:\/\/www.veeble.com\/kb\/leverage-browser-caching-by-adding-expires-headers\/","title":{"rendered":"Leverage browser caching by adding Expires Headers"},"content":{"rendered":"\n<p>When a web browser displays your webpage it has to load several things like logos, images, css files, js files, etc. You can use leverage browser caching to remember the resources that the browser has already accessed. It is one of the website optimizations that we can do in our websites to get good performance.<\/p>\n\n\n\n<p>We can reduce the number of HTTP requests that the server needs to process by caching. This will reduce the time taken to load the site and hence website performance improved. We can achieve this by adding <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Expires\" target=\"_blank\" rel=\"noopener\">Expires headers<\/a> to our .htaccess. This will also help you improve the performance of your website, based on Google&#8217;s and Yahoo&#8217;s recommended performance guidelines.<\/p>\n\n\n\n<p>Browser caching can help by storing some of these files locally in the user&#8217;s browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user&#8217;s browser has to download is less and fewer requests need to be made to your server. It will decrease the page load times.<\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-expires-headers-in-htaccess\">Adding Expires headers in htaccess<\/h3>\n\n\n<p>We can achieve browser caching by adding Expires headers in the htaccess file. If your website has returning visitors, this will reduce the number of HTTP requests by caching the contents of your site like images: jpg, gif, png, favicon\/ico, javascript, and CSS.<\/p>\n\n\n\n<p>When someone visits your site, their browser will fetch all your images, CSS files, javascript files, etc. If Leverage browser caching is not enabled, when the same visitor views your site again and again, these contents are fetched repeatedly. By Expires headers you tell your website, visitors a browser that the file types you specified via .htaccess are not changing until after a certain time, for example, a month. By doing this, the browser does not want to download the images, CSS, and javascript files repeatedly. The browser can cache the contents until their expiry date, so repeated visits do not take much time and will not make as many HTTP requests as took in the first time visit.<\/p>\n\n\n\n<p>If cached, the document may be fetched from the cache rather than from the source until the expiry time has passed. After that, the cache copy is considered expired and invalid, and a new copy must be obtained from the source.<\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"website-performance-testing-tools\">Website Performance Testing Tools<\/h3>\n\n\n<p>=================================<\/p>\n\n\n\n<p>You can check your site&#8217;s performance by using the following online tools.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">https:\/\/developers.google.com\/speed\/pagespeed\/insights\nhttp:\/\/developer.yahoo.com\/yslow\/\nhttp:\/\/gtmetrix.com\/<\/pre>\n\n\n\n<p>Generate .htaccess to Leverage browser caching<br>==============================================<\/p>\n\n\n\n<p>In order to generate the htaccess entries for fixing the Leverage <a href=\"https:\/\/developers.cloudflare.com\/cache\/get-started\/\" target=\"_blank\" rel=\"noopener\">browser caching<\/a>, it is needed to identify all types of files contained in your site. You can find these types from the Leverage browser caching section in the performance testing result of your website discussed in the above section.<\/p>\n\n\n\n<p>Let you have the following type of files,<\/p>\n\n\n\n<p>images: jpg, gif, png<br>favicon\/ico<br>javascript<br>CSS<\/p>\n\n\n\n<p>You need to also determine how often, you are changing the files on your site(These are the expiry of those contents), the following expiry options are available in this case.<\/p>\n\n\n\n<p>years<br>months<br>weeks<br>days<br>hours<br>minutes<br>seconds<\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"expires-header-for-your-favicon\">Expires header for your favicon<\/h3>\n\n\n<p>The files like favicon are rarely changed, so you can give a long time for a favicon. Here we can use the following entry for the favicon, it is specified that the favicon file expires only after 1 year. The following entry instructs your browser to cache the contents for 1 year from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ExpiresByType image\/x-icon access plus 1 year<\/pre>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"expires-header-for-the-images\">Expires header for the images<\/h3>\n\n\n<p>If you are updating the images in your sites frequently, like every week you can set the entry as follows. The following entry instructs your browser to cache the contents for 1 week from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again. If is changing every week, you can change it accordingly.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ExpiresByType image\/gif access plus 1 week\nExpiresByType image\/png access plus 1 week\nExpiresByType image\/jpg access plus 1 week\nExpiresByType image\/jpeg access plus 1 week<\/pre>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"expires-header-for-your-css\">Expires header for your CSS<\/h3>\n\n\n<p>The following entry instructs your browser to cache the CSS contents for 1 month from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again. If is changing every week, you can change it accordingly.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ExpiresByType text\/css access plus 1 month<\/pre>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"expires-header-for-your-javascript\">Expires header for your javascript<\/h3>\n\n\n<p>The following entry instructs your browser to cache javascript contents for 1 year from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again. If is changing every week, you can change it accordingly.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ExpiresByType application\/javascript access plus 1 year<\/pre>\n\n\n\n<p>You can combine all of the settings in a single. In the following htaccess file, there is different kind of files with different expiry settings. Change the following htaccess file depending on the contents of your website.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#######################################################\n\n&lt;IfModule mod_expires.c&gt;\nExpiresActive on\n\nExpiresByType text\/css \"access plus 14 days\"\nExpiresByType text\/xml \"access plus 0 seconds\"\nExpiresByType text\/javascript \"access plus 14 days\"\nExpiresByType text\/html \"access plus 14 days\"\n\nExpiresByType image\/x-icon \"access plus 1 year\nExpiresByType image\/ico \"access plus 14 days\"\nExpiresByType image\/jpg \"access plus 14 days\"\nExpiresByType image\/jpeg \"access plus 14 days\"\nExpiresByType image\/gif \"access plus 14 days\"\nExpiresByType image\/png \"access plus 14 days\"\nExpiresByType image\/svg+xml \"access plus 1 month\"\n\nExpiresByType audio\/ogg \"access plus 1 month\"\nExpiresByType video\/ogg \"access plus 1 month\"\nExpiresByType video\/mp4  \"access plus 1 month\"\nExpiresByType video\/webm \"access plus 1 month\"\n\nExpiresByType application\/pdf \"access 1 month\"\nExpiresByType application\/x-shockwave-flash \"access 1 month\"\nExpiresByType application\/javascript \"access plus 1 year\"\nExpiresByType application\/x-javascript \"access plus 14 days\"\nExpiresByType application\/x-font-woff  \"access plus 1 month\"\nExpiresByType application\/vnd.ms-fontobject \"access plus 1 month\"\nExpiresByType application\/xml  \"access plus 0 seconds\"\nExpiresByType application\/json \"access plus 0 seconds\"\nExpiresByType application\/rss+xml   \"access plus 1 hour\"\nExpiresByType application\/atom+xml  \"access plus 1 hour\"\n&lt;\/IfModule&gt;\n#######################################################<\/pre>\n\n\n\n<p>Once you add these lines in the htaccess file, you can test the performance of your site again in the tools discussed above. You can find that the recommended fixing of Leverage browser caching is passed.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-uagb-call-to-action uagb-block-b168ccfe wp-block-button\"><div class=\"uagb-cta__wrap\"><h3 class=\"uagb-cta__title\">Scale Seamlessly \u2013 Let Us Handle Your AWS Infrastructure!<\/h3><p class=\"uagb-cta__desc\">Say goodbye to AWS complexity! Our managed services include 24\/7 monitoring, automated backups, and lightning-fast deployments. Free your team to innovate while we manage your cloud infrastructure.<\/p><\/div><div class=\"uagb-cta__buttons\"><a href=\"https:\/\/www.veeble.com\/in\/managed-aws-hosting\/\" class=\"uagb-cta__button-link-wrapper wp-block-button__link\" target=\"_blank\" rel=\"noopener noreferrer\">Get Started Now<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M504.3 273.6l-112.1 104c-6.992 6.484-17.18 8.218-25.94 4.406c-8.758-3.812-14.42-12.45-14.42-21.1L351.9 288H32C14.33 288 .0002 273.7 .0002 255.1S14.33 224 32 224h319.9l0-72c0-9.547 5.66-18.19 14.42-22c8.754-3.809 18.95-2.075 25.94 4.41l112.1 104C514.6 247.9 514.6 264.1 504.3 273.6z\"><\/path><\/svg><\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When a web browser displays your webpage it has to load several things like logos, images, css files, js files, etc. You can use [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":7101,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[],"class_list":["post-267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers-stuff"],"uagb_featured_image_src":{"full":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers.jpg",1366,768,false],"thumbnail":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers-150x150.jpg",150,150,true],"medium":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers-768x432.jpg",768,432,true],"large":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers.jpg",1366,768,false],"2048x2048":["https:\/\/www.veeble.com\/kb\/wp-content\/uploads\/2015\/04\/Leverage-browser-caching-by-adding-Expires-Headers.jpg",1366,768,false]},"uagb_author_info":{"display_name":"Digin Dominic","author_link":"https:\/\/www.veeble.com\/kb\/author\/digin-dominic\/"},"uagb_comment_info":0,"uagb_excerpt":"When a web browser displays your webpage it has to load several things like logos, images, css files, js files, etc. You can use [&hellip;]","_links":{"self":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":12,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":8045,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/posts\/267\/revisions\/8045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/media\/7101"}],"wp:attachment":[{"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veeble.com\/kb\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}