Inline JavaScript

Configuration

The 'Inline JavaScript' filter is enabled by specifying:

Apache:
ModPagespeedEnableFilters inline_javascript
Nginx:
pagespeed EnableFilters inline_javascript;

in the configuration file.

When this filter is enabled, you may also enable the following setting:

Apache:
ModPagespeedJsInlineMaxBytes bytes
Nginx:
pagespeed JsInlineMaxBytes bytes;

This is the maximum size in bytes of any JavaScript file that will be inlined.

Description

The "Inline JavaScript" filter reduces the number of requests made by a web page by inserting the contents of small external JavaScript resources directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.

Operation

When the 'Inline JavaScript' filter is enabled, The contents of small external JavaScript resources are written directly into the HTML document; therefore, the browser does not request those JavaScript resources.

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 will rewrite it into: 

<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.

Example

You can see the filter in action at www.modpagespeed.com on this example.

Requirements

There is a tradeoff here between requests and cacheability: including the JavaScript directly in the HTML avoids making an additional request to the external JavaScript resource, but if the JavaScript 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, the Inline JavaScript filter will only inline JavaScript files below a certain size threshold, which can be adjusted using the JsInlineMaxBytes directive.

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 filter will not inline any script for which there are any non-whitespace characters between the <script> and <script> tags.

To avoid opening up cross-domain scripting vulnerabilities, the Inline Javscript filter will only inline an external JavaScript file if it is being served from the same domain as the HTML file into which it is to be inlined.

Risks

JavaScript inlining is low to moderate risk. It should be safe for most pages, but it may break scripts that walk the DOM looking for and examining their own <script> tag (or other <script> tags). As described above, the filter will refuse to inline <script> tags that contain both src attributes and inline data; this is a trade-off that should avoid the most common cases of this, but one should be be aware that there may be other cases that will be broken by this filter.

This filter is sensitive to AvoidRenamingIntrospectiveJavascript. For example, a JavaScript file that calls document.getElementsByTagName('script') will not be inlined.