Outline JavaScript

Configuration

The 'Outline JavaScript' filter is enabled by specifying:

Apache:
ModPagespeedEnableFilters outline_javascript
Nginx:
pagespeed EnableFilters outline_javascript;

in the configuration file.

Description

This filter is an experimental filter which takes inline JavaScript and puts it in an external resource.

Operation

The 'Outline JavaScript' filter outlines all JavaScript that is larger than a minimum threshold in bytes. The threshold can be set by adding/changing the line:

Apache:
ModPagespeedJsOutlineMinBytes 3000
Nginx:
pagespeed JsOutlineMinBytes 3000;

in the configuration file.

For example, if the HTML document looks like this: 

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

Then PageSpeed will rewrite it into: 

<html>
  <head>
    <script type="text/javascript" src="_.pagespeed.jo.tXBSxcB8mn.js"></script>
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

And the new JavaScript file (_.pagespeed.jo.tXBSxcB8mn.js) will be: 

   ...

Example

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

Pros and Cons

This could be advantageous if:

  1. The JavaScript does not change much but the HTML does, then we can cache the JavaScript.
  2. when many web pages share the same inlined JavaScript, it will be outlined to a consistent name and thus will be cached more.
  3. The inline JavaScript is very long, in which case, outlining it will cause it to be loaded in parallel with the HTML doc.

However, for some websites it will be dis-advantageous because it will:

  1. create an extra HTTP request and
  2. tie up one of the connections to this domain, which could have been used to fetch the actually cacheable external resources.

Requirements

Outline filters can currently only run on single-server environments because the resource can only be fetched from a server after that server has rewritten the HTML page. If a different server rewrote the HTML page, then this sever will not have the information needed to create the resource. This could be by a network database shared between servers.

The 'Outline JavaScript' filter may need to "absolutify" relative URLs, if it is outlined to a different directory than the original HTML.

The 'Outline JavaScript' filter will maintain the order of the script blocks, as script order can be significant.

Risks

The 'Outline JavaScript' filter is considered low risk. However, JavaScript can be written that walks the DOM looking for <script> tags with certain syntax. Such JavaScript may behave differently on a page which has changed <script> tags in this way.

Additionally, JavaScript can construct requests in arbitrarily complex ways, so the filter may not be able to absolutify all relative URL references, which could cause incorrect sub-resource requests.