Make Your Websites Feel Faster

The positioning of CSS and JavaScript in your HTML is a major influence in how the page renders in the browser. Linking to your external stylesheets at the top allows your pages to render progressively, displaying your HTML as it’s downloaded.

The positioning of CSS and JavaScript in your HTML is a major influence in how the page renders in the browser. Linking to your external stylesheets at the top allows your pages to render progressively, displaying your HTML as it's downloaded.

Yahoo research discovered that this is especially important in IE, which block rendering until all stylesheets are downloaded to avoid having to redraw elements of the page if their styles change. CSS at the bottom can result is your pages being nothing more than a blank white screen until all elements are downloaded.

While a JavaScript file downloads it blocks other files on that host from starting. Having your scripts listed at the top is likely to cause a delay in downloading your images. Linking your scripts at the bottom is a simple practise to follow. Obviously in some cases it pays to load scripts early like your client-side validation code.

References: YDN - Best Practices for Speeding Up the Web

Steve Sounders Examples