Web Application Performance: CSS Placement
CSS has become a vital part of a web page. CSS file call or style placement can play important role in performance. If you care about performance of your web application, than you should see where to place your CSS.
A CSS file or style should be placed in HEAD element of the page. It is important because browsers render page progressively if CSS is placed in HEAD. Putting CSS at bottom can block progressive rendering in most of the browsers. If CSS is placed at bottom the browser have to redraw all elements, this hurts the front end performance for visitor and they have to see a blank page for a while.
HTML specification also suggests that CSS should only be placed in HEAD. It still can be added within BODY but best way is to place it in HEAD. Also it is good idea to use only one CSS in web application. You can combine multiple CSS to avoid more HTTP requests to web server.
This post is part to our “Web Application Performance” series. You can find how to combine multiple CSS into one file in our post “Reducing HTTP requests“. You can also fine more stuff to improve web application performance here.