Recommendations

PageSpeed
YSlow

PageSpeed: Optimize the order of styles and scripts (deprecated)

Overview

Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.

How does your site score on this recommendation?

Details from Google

Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.

Summary

CSS/JS
High
Moderate

PageSpeed recommends:

Put external scripts after external stylesheets if possible

Browsers execute stylesheets and scripts in the order in which they appear in the document. If the JS code has no dependencies on the CSS files, you can move the CSS files before the JS files. If the JS code does depend on the CSS contained in an external file - for example, styles that are needed for output you are writing to the document in the JS code - this isn't possible.

Put inline scripts after other resources if possible

Putting inline scripts after all other resources prevents blocking of other downloads, and it also enables progressive rendering. However, if those "other resources" are external JS files on which the inline scripts depend, this might not be possible. In this case, it's best to move the inline scripts before the CSS files.

Read More