Recommendations

PageSpeed
YSlow

PageSpeed: Combine external JavaScript (deprecated)

Overview

Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.

How does your site score on this recommendation?

Details from Google

Good front-end developers build web applications in modular, reusable components. While partitioning code into modular software components is a good engineering practice, importing modules into an HTML page one at a time can drastically increase page load time. First, for clients with an empty cache, the browser must issue an HTTP request for each resource, and incur the associated round trip times. Secondly, most browsers prevent the rest of the page from from being loaded while a JavaScript file is being downloaded and parsed. (For a list of which browsers do and do not support parallel JS downloads, see Browserscope.)

Summary

JS
High
Easy

PageSpeed recommends:

Partition files optimally

Here are some rules of thumb for combining your JavaScript files in production:

  • Partition the JavaScript into 2 files: one JS containing the minimal code needed to render the page at startup; and one JS file containing the code that isn't needed until the page load has completed
  • Serve as few JavaScript files from the document <head> as possible, and keep the size of those files to a minimum.
  • Serve JavaScript of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
  • For small bits of JavaScript code that shouldn't be cached, consider inlining that JavaScript in the HTML page itself.
Position scripts correctly in the document head.

Whether a script is external or inline, it's beneficial to position it in the correct order with respect to other elements, to maximize parallel downloads.

Read More

Related YSlow Recommendations