File Order of External Style Sheets and Scripts

Introduction

The order in which commands to download external Cascading Style Sheets (CSS) files and JavaScript files are placed in an HTML page can affect how quickly the page is rendered and even whether the page is rendered at all.

When a CSS file is loaded before a JavaScript file, the page can begin rendering and the file downloads can happen in parallel which speeds up the rendering time.

If the order is reversed, the files are downloaded sequentially and the JavaScript file must finish loading completely before any other file can be downloaded. This means that the page cannot begin rendering until the JavaScript download is complete and the CSS file can begin loading.

This Best Practice Deep Dive looks at the issues involved with the order in which files are downloaded, tells you how AT&T Video Optimizer can help identify when certain files are loaded in an inefficient order, and provides recommendations for downloading style sheets and scripts.

Background

As a developer building HTML 5 style apps or webpages, you can control the order that files are requested by your mobile app. It is important to consider the order you request the files in, because some ways are faster than others.

The Issue

Script files (such as JavaScript) are loaded sequentially unless asynchronous downloading is specified (for more information, see Asynchronous Load of JavaScript in HTML). Sequential (synchronous) download means that the entire script file must be downloaded before any other files can be downloaded and before any other instructions on the page, such as inline code or HTML, can be executed.

Another issue that can occur when a JavaScript file is loaded before a CSS file, is that any JavaScript code which relies on properties set in that CSS file can't be executed until both files have finished loading.

Best Practice Recommendation

The Best Practice Recommendation is to download CSS before script files, and to move SCRIPT tags to the bottom of the page whenever possible.

AT&T Video Optimizer can help you identify this potential file order problem. Video Optimizer tests the HTML documents in your app and if a JavaScript file is loaded before a CSS file in the HEAD of an HTML document, the test fails and the name of the file is listed in the rest results.