Combine JavaScript

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

Objective

Reduce number of HTTP round-trips by combining multiple JavaScript resources into one.

PageSpeed rule

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

Description

This rewriter reduces the number of HTTP requests made by a browser by replacing multiple distinct JavaScript files with a single JavaScript file, containing all their contents in a json hashmap format. This is particularly important in old browsers and mobile networks, where the number of connections are limited to two per domain. In addition to reduced overhead for HTTP headers and communications warm-up, this approach works better with TCP/IP slow-start, increasing the effective payload bit-rate through the browser's network connection. Only external (outlined) JavaScript resources are combined by this rewriter. If the URL for the combined resource exceeds the maximum URL length, multiple combined URLs are generated to accommodate all the JavaScript resources. As far as possible, JavaScript resources with the same URL prefix are grouped together so as to ensure that these combined resources are reusable across pages from a single site. If there is only one JavaScript resource, a single combined URL is created for this, so that it effectively receives the benefits of proxying via Google.

Similar to Proxy JavaScript rewriter, relative URLs in the <script> tag references are converted to absolute URLs before combining them, so that these URLs remain valid even when the base URL of the page changes.

Operation

This rewriter parses the HTML document, finds all <script> tags and replaces them with one or more <script> tags at the location of the first tag. It also replaces each original <script> tag with equivalent eval calls, which retrieve the right JavaScript contents for the original tag.

Example

The example below shows the HTML before rewriting:

<html>
  <body> ...
   <script src="scripts/example.js">
   <script src="scripts/example2.js">
  </body>
</html>

and after rewriting:

<html>
  <body> …
    <script src="http://1-ps.googleusercontent.com/h/fast.pssdemos.com/filter/scripts/example.js+example2.js.pagespeed.jc.49tRvQkrsh.js">
    </script>
    <script>eval(mod_pagespeed_AR$5HUHzz2);</script>
    <script>eval(mod_pagespeed_2UboqzDCiq);</script>
  </body>
</html>

Limitations

PSS streams HTML to users, and thus will only see some HTML content after other content has already been sent to users. Thus PSS may not be able to combine all external Javascript files on a page into a single Javascript file. In this case, multiple combinations are made.

This filter generates URLs that are essentially the concatenation of the URLs of all the Javascript files being combined. The maximum URL size is generally limited to about 2k characters due to IE: See http://support.microsoft.com/kb/208427/EN-US. PSS limits URLs to 2048 characters total and 1024 per URL segment.

Limitations mentioned for the Proxy JavaScript rewriter are also applicable to this rewriter.