YSlow: Make JavaScript and CSS external

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser.

JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document.

On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

recommends:

The key factor is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested.

  • The best solution generally is to deploy the JavaScript and CSS as external files.
  • If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.
  • The only exception where inlining is preferable is with home pages. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

Read More

Related PageSpeed Recommendations

Have an idea for this recommendation?

Feel free to contact us with your suggestions, links or ideas!