Cache and prioritize visible content

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

Objective

To speed up web pages by caching and prioritizing visible contents of the page.

Description

This is a new 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:

  1. 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.
  2. Prioritizing visible content: Rendering a modern web page requires lots of network resources but not all of them are needed right away. Visible content of the page is prioritized on the network and the browser so it doesn’t have to compete with the rest of the page.
  3. Defer JavaScript: JavaScript is deferred until page load so that it doesn’t block rendering of page content.
Here is a video that provides more details:

         

Configuring the rewriter

You need to provide the following inputs to configure the rewriter as shown below:

  1. URL Pattern: This identifies the parts of the site to which this rewriter is applied. It is specfied using a wildcard pattern. For the configuration shown, this rewriter is applied to the entire site.
  2. Cache time: This identifies how long the cacheable portions of the pages are cached. The default is 30 minutes. The higher the cache time, the higher the probability that your pages will be in PageSpeed server's caches. Higher cache times may also mean your site will show stale content, so pick the longest cache duration that is acceptable for your site.
  3. Non-cacheable Parts: This identifies 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.
You can add a separate row for each URL pattern.

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">
  foo@bar.com
</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, identifies visible portions of the page and caches it.
  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.

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 browsers - IE9, Firefox 3+, Chrome, Safari. It is not applied on pages served for mobile devices, tablets and all other user agents.

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.