W3 Total Cache Browser Cache


June 20, 2014 Maithilish

7.2. W3 Total Cache Browser Cache

In the previous section, we installed W3 Total Cache and enabled its Page Cache module. This section shows the best W3 Total Cache Browser Cache Settings to boost the WordPress performance and page speed.

W3 Total Cache Browser Cache

Browser can cache the pages, JavaScript, CSS and media when user views a web page and on subsequent visits to the page or site, reuse the cached objects instead of repeated fetches from the site. Browser cache improves page load time by reducing server and network access.
Idea behind the browser cache is simple. On every page, server sets an expiry header and some other tags when they sent to the browser. On subsequent requests, browser, with the help of these header tags, decides whether cached object is expired or not. If expired, then browser sends request for the fresh objects else reuses the cached objects.
In addition to the expiry headers and tags, server can also compress the objects to reduce the load on the network and to improve the response time.
To enable W3 Total Cache Browser Cache, go to DashboardPerformanceGeneral Settings and scroll down to Browser Cache section. After enabling Browser Cache, save the settings.
Next, we need to set expiry and tags to these items:
  • CSS and JS
  • HTML and XML
  • Media
W3 Total Cache Browser Cache Settings
Go to DashboardPerformanceBrowser Cache and then in General section set the following:
  • Set Last-Modified header – select
  • Set Expires Header – select
  • Set Cache Control Header – select
  • Set entity tag (eTag) – select
  • Set W3 Total Cache header – select
  • Enable HTTP (gzip) compression – select
Save the settings. This global browser cache policy is now set for all the three groups – JS, CSS and HTML, XML and Media.
Expires Header Life time defines for what period browser should cache the object. Default Expires Header Life time for CSS, JS is 31536000 seconds (365 days) and HTML,XML is 3600 seconds ( 1 hour) and Media 31536000 seconds (365 days).
TTL of Page Cache

Default Expires Header Life time for CSS, JS, and Media are good enough, however for HTML and XML, the expiry header of one hour is too short especially for sites where contents are not frequently modified.

While Expires Header is primarily meant to encourage the browser to cache the files on the PC, W3 Total Cache also use it to determine the Time To Live (TTL) of the Page Cache.
In other words, Expires Header Life time is used by two caches:
  • In PC, by the Browser to determine for how long it has to keep pages in its cache and when to request for fresh objects.
  • In Server, by the W3 Total Cache to determine for how long it has to keep pages in its cache and when to purge the pages and build new ones.
Default value for HTML and XML is too low, because after one hour W3 purges the pages from the cache and rebuilds the cache, which puts extra load on the server. It may also adversely affect the search engines crawls. Crawl bots spends a fixed amount of time in one site and collect whatever pages it gets within that time. If pages are purged by W3 frequently then crawl face a slow response and parse fewer pages, which ultimately reflects in lower Page Ranking.
In codetab.org, we increased the Expires Header Life time for HTML and XML to 604800 seconds (7 days), and we see a decent Crawl Stats. We cover Crawl Stats in Google Webmaster Tools chapter.
In the next section, we use Minify module of W3 Total Cache.