Search
+1 (617) 7782998 | info@iispeed.com

Canonicalize javascript libraries

Canonicalize JavaScript Libraries

Your web page loads faster when JQuery is preloaded in users' browser.
Numerous web sites use common JavaScript libraries such as jQuery and jQuery UI. But when one library is stored on many sites, browsers end up re-downloading that library for each new site – a waste of time and bandwidth.

The canonicalize_javascript_libraries filter in PageSpeed finds such libraries on your site and replaces them with links to the equivalent libraries on ajax.googleapis.com. With the optimization, a browser will notice that your site is requesting the library from the same shared library provider as a previous site it visited, and will use the copy in its cache.

This optimizer spots external libraries using a hash signature using a configurable list of signatures stored in configuration.

Description

This filter identifies popular JavaScript libraries that can be replaced with ones hosted for free by a JavaScript library hosting service — by default the Google Hosted Libraries. This has several benefits:

  • Most important, first-time site visitors can benefit from browser caching, since they may have visited other sites making use of the same service to obtain the libraries.
  • The JavaScript hosting service acts as a content delivery network for the hosted files, reducing load on the server and improving browser load times.
  • There are no charges for the resulting use of bandwidth by site visitors.
  • The hosted versions of library code are generally optimized with third-party minification tools. These optimizations can make use of library-specific annotations or minification settings that aren't portable to arbitrary JavaScript code, so the libraries benefit from more aggressive optimization than can be provided by PageSpeed.

Canonicalization configuration format

The library is contained in IISpeed's configuration file in the installation directory. Here bytes is the size in bytes of the library after minification by PageSpeed, and MD5 is the MD5 hash of the library after minification. Minification controls for differences in whitespace that may occur when the same script is obtained from different sources. The canonical_url is the hosting service URL used to replace occurrences of the script. Note that the canonical URL in the above example is protocol-relative; this means the data will be fetched using the same protocol (http or https) as the containing page. Because older browsers don't handle protocol-relative URLs reliably, PageSpeed resolves a protocol-relative library URL to an absolute URL based on the protocol of the containing page. Do not use http canonical URLs in configurations that may serve content over https, or the rewritten pages will expose your site to attack and trigger a mixed-content warning in the browser. Similarly, avoid using https URLs unless you know that the resulting library will eventually be fetched from a secure page, as SSL negotiation adds overhead to the initial request.

This optimization is based on the recommended best practices of optimizing browser caching and reducing payload size .

Operation

In order to identify a library and canonicalize its URL, PageSpeed must of course be able to fetch the JavaScript code from the URL on the original page. Because library canonicalization identifies libraries solely by their size and hash signature, it is not necessary to authorize PageSpeed to fetch content from the domain hosting the canonical content itself. This means that it is safe to use this filter behind a reverse proxy or in other situations where network access by PageSpeed is deliberately restricted. Browsers visiting the site will fetch the content from the canonical URL, but PageSpeed itself does not need to do so.

Examples

You can see the filter in action on this example.

If the HTML document looks like this:

<HTML>
  <HEAD>
    <SCRIPT src="jquery_1_8.js">
    </SCRIPT>
    <SCRIPT src="a.js">
    </SCRIPT>
    <SCRIPT src="b.js">
    </SCRIPT>
  </HEAD>
  <BODY>
  ...
  </BODY>
</HTML>

Then, assuming jquery_1_8.js was an unminified copy of the jquery library and a.js and b.js contained site-specific code that made use of jquery, the page would be rewritten as follows:

<HTML>
  <HEAD>
    <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </SCRIPT>
    <SCRIPT src="a.js">
    </SCRIPT>
    <SCRIPT src="b.js">
    </SCRIPT>
  </HEAD>
  <BODY>
  ...
  </BODY>
</HTML>

The library URL has been replaced by a reference to the canonical minified version hosted on ajax.googleapis.com. Note that canonical libraries do not participate in most other JavaScript optimizations. For example, if Combine JavaScript is also enabled, the above page will be rewritten as follows:

<HTML>
  <HEAD>
    <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </SCRIPT>
    <SCRIPT src="http://www.example.com/a.js+b.js.pagespeed.jc.zYiUaxFS8I.js">
    </SCRIPT>
  </HEAD>
  <BODY>
  ...
  </BODY>
</HTML>

The canonical library is not combined with the other two JavaScript files, since this would lose the bandwidth and caching benefits of fetching it from the canonical URL.

Requirements

Only complete, unmodified libraries referenced by <script> tags in the HTML will be rewritten. Libraries that are loaded by other means (for example by injecting a loader script) or that have been modified will not be canonicalized.

Risks

You must ensure that you abide by the terms of service of the providers of the canonical content before enabling canonicalization. The terms of service for the default configuration can be found at https://developers.google.com/speed/libraries/terms.

The canonical URL refers to a third-party domain; this can cause additional DNS lookup latency the first time a library is loaded. This is mitigated by the fact that the canonical copy of the data is shared among multiple sites.

The initial request for a canonical URL will contain a Referer: header with the URL of the referring page. This permits the host of the canonical content to see a subset of traffic to your site (the first load of a page on your site that contains an identified library by a browser that does not already have that library in its cache). The provider should describe how this data is used in its terms of service. The terms of service for the default configuration can be found at https://developers.google.com/speed/libraries/terms. Again, this risk is mitigated by the fact that canonical libraries are shared among multiple sites; a popular library is likely to already reside in the browser cache.

Sites serving content on both http and https URLs must use protocol-relative canonical URLs as shown in the example above. Fetching a library insecurely from a secure page exposes a site to attack. Fetching a library securely from an ordinary page can increase load time due to SSL overheads.

It is theoretically possible to craft a JavaScript file whose minified size and hash exactly match that of a canonical library, but whose code behaves differently. In such a case the library will be replaced with the canonical (widely-used) library. This will break the page that contains the reference to the crafted JavaScript.

Configuration

For PageSpeed on IIS and PageSpeed on ATS

Enable
pagespeed EnableFilters canonicalize_javascript_libraries

Disable
pagespeed DisableFilters canonicalize_javascript_libraries

Risk Classification

Low

Examples that demonstrate optimization in real time are available here.

PageSpeed optimization, powered by the official Google PageSpeed SDK

Share View Comments
.
Some content on this website represents a modified version of the official Google PageSpeed documentation