{"id":338,"date":"2015-05-05T15:30:39","date_gmt":"2015-05-05T12:30:39","guid":{"rendered":"http:\/\/baruchyoussin.com\/?p=338"},"modified":"2015-08-05T17:12:27","modified_gmt":"2015-08-05T14:12:27","slug":"configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-4-browser-cache","status":"publish","type":"post","link":"https:\/\/baruchyoussin.com\/en\/configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-4-browser-cache.html","title":{"rendered":"Configure W3 Total Cache plugin: settings for PageSpeed 100 grade, Part 4: Browser Cache"},"content":{"rendered":"<nav>\n<p><strong>Other parts:<\/strong><\/p>\n<ul style=list-style-type:none>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-1.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 1<\/a><\/li>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-2-general.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 2: General Settings<\/a><\/li>\n<li><em>Previous:<\/em> <a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-3-page-cache.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 3: Page Cache<\/a><\/li>\n<li><em>Next:<\/em> <a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-5-autoptimize-images-tips.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 5: Autoptimize, Images, Tips<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2><span id=\"configure_browser_cache_settings_of_w3_total_cache_plugin\">Configure Browser Cache Settings of W3 Total Cache plugin<\/span><\/h2>\n<p>This is the fourth post in our series that explains how to set up W3 Total Cache plugin to achieve PageSpeed grade of 100.<\/p>\n<p>Here we explain how to configure the Browser Cache Settings of W3 Total Cache plugin.<\/p>\n<p>The Browser Cache Settings page has many sections, and we shall consider them one by one.<\/p>\n<p>The screenshots from the Settings pages that you see here, are taken from narrow screens, to allow this post to be seen on narrow screens properly. These Settings pages on wide screens look a little bit differently, and we give links to the relevant screenshots.<\/p>\n<h2><span id=\"w3_total_cache_configuration_browser_cache\">W3 Total Cache configuration: Browser Cache <img alt=\"Screenshot from W3TC plugin Page Cache settings page, General section. Check the following boxes: Set Last-Modified header, Set expires header, Set cache control header, Set entity tag (eTag), Enable HTTP (gzip) compression, Prevent caching of objects after settings change (with empty exception list), Don't set cookies for static files. Do not check: Set W3 Total Cache header.\" src=images\/w3tc\/W3TC-Browser-Cache-1-narrow.jpg width=266 height=668 style=float:right><\/span><\/h2>\n<p><img alt=\"Screenshot from W3TC plugin Page Cache settings page. General section continued: (not checked) Do not process 404 errors for static objects with WordPress, 404 error exception list: default. CSS &#038; JS section: (checked) Set Last-Modified header, (checked) Set expires header, Expires header lifetime: 864000 seconds, (checked) Set cache control header, Cache control policy: 'cache with max-age...', (checked) Set entity tag (eTag).\" src=images\/w3tc\/W3TC-Browser-Cache-2-narrow.jpg width=267 height=850 style=float:right;clear:right> These settings are used to instruct the browser to cache the page files. They are relayed to the browser by means of headers which are prepended to the files so that you cannot see them when you view the files.<\/p>\n<p>They are important: PageSpeed Insights will reduce your grade if you do not set them up fully, and your server load may increase.<\/p>\n<p><img alt=\"Screenshot from W3TC plugin Page Cache settings page. CSS &#038; JS section continued: (not checked) Set W3 Total Cache header, (checked) Enable HTTP (gzip) compression, (checked) Prevent caching of objects after settings change, (checked) Disable cookies for static files. HTML &#038; XML section: (checked) Set Last-Modified header, (checked) Set expires header, Expires header lifetime: 3600 seconds, (checked) Set cache control header, Cache control policy: 'cache with max-age...', (checked) Set entity tag (eTag), (not checked) Set W3 Total Cache header, (checked) Enable HTTP (gzip) compression.\" src=images\/w3tc\/W3TC-Browser-Cache-3-narrow.jpg width=256 height=832 style=float:right;clear:right> On the other hand, incorrect settings may cause browser cache to become stale. Your users may complain that they do not see updates to your pages (e.g., the comments they have posted, and responses to them), and you may have to tell them to clear their browser cache to resolve it. (It happened to me as a user of someone else&#8217;s site and was quite humiliating <em>for me<\/em> as a knowledgeable user.) An admin may also run into a similar trouble with one&#8217;s own site. (This happened to me too, and was quite annoying.)<\/p>\n<p><img alt=\"Screenshot from W3TC plugin Page Cache settings page. Media &#038; Other files section: (checked) Set Last-Modified header, (checked) Set expires header, Expires header lifetime: 864000 seconds, (checked) Set cache control header, Cache control policy: 'cache with max-age...', (checked) Set entity tag (eTag), (not checked) Set W3 Total Cache header, (checked) Enable HTTP (gzip) compression, (checked) Prevent caching of objects after settings change, (checked) Disable cookies for static files.\" src=images\/w3tc\/W3TC-Browser-Cache-4-narrow.jpg width=264 height=636 style=float:right;clear:right> In my experience, W3 Total Cache plugin does an excellent job in this area if properly configured. <small>In particular, marking <strong>Prevent caching of objects after settings change<\/strong> takes care of the stale cache.<\/small><\/p>\n<p>In particular, we need to change many settings from their default values. My settings are shown on the screenshots.<\/p>\n<p>Here the browser is instructed to cache CSS and JS files for 864000 seconds which is 10 days while html files are cached for 3600 seconds which is one hour. The reason for the difference is that CSS and JS files seldom change while html files change more often. PageSpeed Insights have been happy with these settings.<\/p>\n<p><a href=images\/w3tc\/W3TC-Browser-Cache-1.jpg>This is how this section of the Settings screen looks on a wide screen<\/a>, <a href=images\/w3tc\/W3TC-Browser-Cache-2.jpg>continued<\/a>, <a href=images\/w3tc\/W3TC-Browser-Cache-3.jpg>more<\/a> <a href=images\/w3tc\/W3TC-Browser-Cache-4.jpg>and the rest<\/a>.<\/p>\n<nav>\n<p><strong>Navigation:<\/strong><\/p>\n<ul style=list-style-type:none>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-1.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 1<\/a><\/li>\n<li><a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-2-general.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 2: General Settings<\/a><\/li>\n<li><em>Previous:<\/em> <a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-3-page-cache.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 3: Page Cache<\/a><\/li>\n<li><em>Next:<\/em> <a href=configure-w3-total-cache-plugin-settings-for-pagespeed-100-grade-part-5-autoptimize-images-tips.html>Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 5: Autoptimize, Images, Tips<\/a><\/li>\n<\/ul>\n<\/nav>\n","protected":false},"excerpt":{"rendered":"<p>Other parts: Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 1 Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 2: General Settings Previous: Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part 3: Page Cache Next: Get PageSpeed 100 by using W3 Total Cache and Autoptimize, Part [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts\/338"}],"collection":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":4,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"predecessor-version":[{"id":360,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/posts\/338\/revisions\/360"}],"wp:attachment":[{"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/baruchyoussin.com\/en\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}