Inline JavaScript

Configuration

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.

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