Optimize the Order of Styles and Scripts (Deprecated)

Earlier in this article, we talked about combining external CSS and JavaScript files to reduce the number of trips and delays caused by downloading other resources. Another way to decrease page load times is to rearrange scripts so that they execute more efficiently. This is especially true for JavaScript files because when the client/browser encounters these files, it will stop downloading other files until the file it is working on is complete. There are a few PageSpeed recommendations that can help if you are encountering this issue.

One of the first actions is to position any external scripts after any external CSS. As we mentioned above, browsers will download page resources in the order they appear in the page structure. If any JavaScript is encountered before any stylesheets, it will cause the page load to stop until JavaScript code is parsed and rendered. Another method, and we touched on this one briefly before, is inlining CSS and JavaScript files, but in terms of optimizing through order, again, place any inline JavaScript files after all other resources. However, one exception to this is that if any of the other resources contain external JavaScript files that have any dependencies with your CSS files. In that case, you would want to place the inline script before the external CSS to take advantage of parallel downloading.