Partially Cache HTML

PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.

Objective

To speed up web pages by partially caching HTML.

Description

This is an aggressive rewriter, so please preview your site as described here, to ensure that it works for your site before making it live.

This rewriter renders the visible content much sooner by making HTML cacheable. HTML is typically not cached because small portions of the page are non-cacheable due to personalized content. Non-cacheable portions are stripped from the HTML, and the rest of the page is cached on PageSpeed servers.

Configuring the rewriter

You need to provide the non-cacheable parts as input to configure the rewriter as shown below


Non-cacheable parts identify the portions of the page that are not cached on PSS servers. It is specified using id or class attributes in the HTML. For the configuration shown, any HTML tags with id="username" or class="price" won't be cached. Any content rendered via JavaScript doesn't need to be marked as non-cacheable.

Example

Let's look at a sample page of an ecommerce site and see how to identify non-cacheable portions on the page. In this page the non-cacheable portions are username and price. If we look at the HTML page source, they appear in the page as

<span id="username">
  foo@bar.com
</span>

<span class="price">
  $100
</span>

These non-cacheable portions should be specified as id=username,class=price.

The effect of this rewriter on this page can be observed before and after rewriting. In this example, an intentional delay of a few seconds has been added to the non-cacheable portions so you can observe that they are rendered later.

Operation

  1. PSS fetches the web page from your origin servers, stamps out the portions marked as non-cacheable and caches the restp.
  2. When a user visits your site, the browser requests the page from PSS.
  3. PSS sends the cached portion of your page. At this time the user can start seeing portions of your web page. Any JavaScript on the page is deferred until a later step.
  4. In parallel, PSS requests the HTML web page from your origin site.
  5. PSS extracts only the non-cacheable portions from the full HTML and sends it to the browser.
  6. PSS injects JavaScript that has the browser bind the non-cacheable portions into the cached page.
This rewriter automatically detects changes in visible portions of HTML (such as text fields) and refreshes the cache. It takes one request to detect such changes and fresh content is served from the second request. However you manually need to purge the cache if you make changes to non-visible parts of the HTML like CSS URLs, JavaScript URLs etc.

Limitations

  1. This rewriter doesn’t work well if most of the page is personalized or rendered via JavaScript.
  2. This rewriter doesn’t work if different content is served for the same URL based on cookies, IP, etc.
  3. This rewriter works on modern desktop browsers - IE9, Firefox 3+, Chrome, Safari. It is not applied on pages served for other user agents such as mobile devices and tablets.

Troubleshooting

  • If some users are seeing admin panels or personalized content for other users, your specification of non-cacheable portions is incomplete. You need to mark those portions as non-cacheable.
  • If you have a problem with this rewriter, turn off the rewriter and then contact us by email at pss-support@google.com.
  • Defer JavaScript is a pre-requisite for this rewriter, so if your site breaks with Defer JavaScript, you cannot use this rewriter.