Hide

Inline Small Resources

PageSpeed Service has been deprecated and will be turned down on August 3rd, 2015. For more information, see Turndown Information for PageSpeed Service.

Objective

Reduce round trip time by inlining CSS, JS and images in the HTML.

PageSpeed rule

This rewriter implements the PageSpeed rules for minimizing round trip times.

Description

This rewriter reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers. Operation of this rewriter on different types of resources, and corresponding examples are given below.

Inline CSS

When this rewriter is enabled, the contents of external CSS files smaller than the specified number of bytes are written directly into the HTML document. Therefore the browser does not request those CSS files independently.

For example, if the HTML document looks like this:

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

And the resource small.css is like this:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Then PageSpeed Service will rewrite it to:

<html>
  <head>
    <style>
      .yellow {background-color: yellow;}
      .blue {color: blue;}
      .big { font-size: 8em; }
      .bold { font-weight: bold; }
    </style>
    </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

This eliminates the browser request to small.css by placing its contents inline in the HTML document.

Inline JavaScript

When this rewriter is enabled, the contents of small external JavaScript files are written directly into the HTML document. Therefore the browser does not request those JavaScript files independently.

For example, if the HTML document looks like this:

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

And the resource small.js is like this:

  /* contents of a small JavaScript file */

Then PageSpeed Service will rewrite it to:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

This eliminates the external request for small.js by placing it inline in the HTML document.

Inline Images

When this rewriter is enabled, the contents of small external images are written directly into the HTML document by an inline data: URL. Therefore the browser does not request those image files independently. The thresholds for inlining images referenced in HTML and CSS can be specified separately.

For example, if the HTML document looks like this:

<html>
  <head>
    <title>Image test example</title>
  </head>
  <body>
    <img src="images/Cuppa.png">
  </body>
</html>

Then PageSpeed Service will rewrite it to:

<html>
  <head>
    <title>Image test example</title>
  </head>
  <body>
    <img src="data:image/png;base64,...Base64 data">
  </body>
</html>

This eliminates the external request for Cuppa.png by placing it inline in the HTML document.

Inline Image Previews

This rewriter generates low quality versions of the images that are inlined in the HTML page. Users experience faster rendering of the page and the low quality images are replaced by high quality versions after an onload event is triggered. The filter works on images found in <img> tags.

This rewriter changes the src attribute of <img> elements to pagespeed_high_res_src for images above the specified threshold size. It generates low quality versions of the images and replaces the src attribute with these. The low quality inlined images are replaced with high quality versions after an onload event is triggered.

You can see this rewriter in action in this example.

Inline Resized Mobile Images

This rewriter automatically enables Inline Image Previews and generates smaller low quality images for mobile browsers. Rendering of the page will be faster and bandwidth consumption will be smaller on mobile devices comparing with using Inline Image Previews alone. The low quality images are replaced by high quality versions after an onload event is triggered. The filter works on images found in <img> tags.

This rewriter should be used together with Add Image dimensions to avoid page reflow. It works the same way as Inline Image Previews except smaller low quality images are used for mobile devices.

You can see this rewriter in action in this example.

Limitations

There is a tradeoff here between requests and cacheability: including the resources directly in the HTML avoids making an additional request to the external resource, but if the resource file is large (and doesn't change often), it may be better to keep it separate from the HTML so that it can be cached by the browser. Thus, these rewriters will only inline resource files below the specified threshold.

It is possible for CSS files to contain small snippets of JavaScript code, at least for certain browsers. To avoid opening up cross-domain scripting vulnerabilities, the Inline CSS and Inline JavaScript rewriters will only inline external CSS and JavaScript files if they are being served from the same domain as the HTML file into which they are to be inlined.

If a <script> tag contains both a src attribute AND inline contents, the browser will load the external script at the src URL and will not execute the inline contents. However the inline contents will still remain invisibly in the DOM. Some pages take advantage of this and place arbitrary data inline within the <script> tag to be picked up by the external script referenced by the src attribute. To avoid breaking such pages, the Inline JavaScript rewriter will not inline any script for which there are any non-whitespace characters between the <script> and <script> tags.

Image inlining is user-agent sensitive. Images are not inlined for older browsers that do not support the data: URL format.

The Inline Image Preview rewriter can bloat up the HTML because low quality images are embedded inside the HTML. The size threshold should be chosen appropriately since previewing of small images may show no perceived speed up but merely bloat the HTML.