Flush Resources Early

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

Objective

This rewriter speeds up rendering of the page by providing server hints at the beginning of the HTML, which allows the browser to download important resources such as CSS, JS and some images early.

Description

When the browser requests a web page, PageSpeed Service sends an early-head with the list of resources to be downloaded early. In parallel, PageSpeed Service fetches the HTML content from the origin server, rewrites it and sends it to the browser. Since Page Speed Service flushes the early-head even before the origin server sends its response, cookies received from the origin server are inserted through JS, later in the HTML.

The list of resources to be flushed is determined from previous page renders. This rewriter also provides browser hints to open TCP connections back to PageSpeed Service servers for faster fetches in the future. If the Pre-resolve DNS rewriter is enabled, then the DNS prefetch tags are also sent as part of the early-head.

Example

The example below shows the HTML before rewriting:

<html>
  <head>
    <link rel="stylesheet" type="text/css"
    href="styles/bold.css>
    <script src="scripts/example.js"></script>
  </head>
  <body>
    <div class="bold">
      Hello, world!
    </div>
  </body>
</html>

and after rewriting:

<html>
  <head>
    <link rel="subresource"
    href="http://1-ps.googleusercontent.com/h/www.pssdemos.com/filter/styles/bold.css.pagespeed.ce.LPpzLxg8Oe.css"/>
    <link rel="subresource"
    href="http://1-ps.googleusercontent.com/h/www.pssdemos.com/filter/scripts/example.js.pagespeed.jm.ZJt5aYddtc.js"/>
  </head>
  <!-- The html till here is is sent to the browser significantly earlier than
       the rest of the document.-->
  <head>
    <link rel="stylesheet" type="text/css"
    href="http://1-ps.googleusercontent.com/h/www.pssdemos.com/filter/styles/bold.css.pagespeed.ce.LPpzLxg8Oe.css">
    <script
    src="http://1-ps.googleusercontent.com/h/www.pssdemos.com/filter/scripts/example.js.pagespeed.jm.ZJt5aYddtc.js">
    </script>
  </head>
  <body>
    <div class="bold">
      Hello, world!
    </div>
  </body>
</html>

The exact mechanism used to download resources early will vary depending on the browser. The effect of this rewriter can be observed on pssdemos.com before and after rewriting. Please reload the page to see the effect, since this rewriter computes the list of resources based on previous page renders.

Limitations

  1. This rewriter might degrade performance if the HTML content served changes significantly based on request headers.
  2. If the resources downloaded vary based on cookies then this rewriter should not be enabled.
  3. This rewriter works on modern browsers such as IE, Firefox and Chrome. For other user agents the rewriter is turned off automatically.
  4. This rewriter creates an extra head. If Combine HEADs rewriter is enabled, and this rewriter is applied, the early-head will not be combined.