Optimize the Order of Styles and Scripts (Deprecated)

Order Styles and Scripts to Boost Performance

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.

How to Order Styles and Scripts

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.



Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.


PageSpeed Terms

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.



YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.