Originally seen at: https://varvy.com/pagespeed/style-script-order.html
Varvy is now Down and this Content is for Archive Purposes.

CSS and javascript order


Optimize the order of styles and scripts

Style tags and calls to stylesheets should be placed before your scripts. If you do this your pages load faster, which we will describe below.

The solution is to simply make sure that your styles (css) come higher on the page than your scripts do. Google has
determined this by testing several different scenarios and combinations of styles and
scripts, however there is one main reason that this is faster…

When a browser is loading your webpage it gets the HTML and then it starts calling all the things your HTML is asking for (css, scripts, images, etc.). When
browsers start to download a script they stop loading anything else until the script is loaded. Google states “Typical web pages spend 80-90% of their load time
waiting for the network. A powerful technique to reduce the amount time spent blocked on the network is to get rid of patterns that cause some browsers to serialize
resource downloads.”

How do I optimize the order of styles and scripts?

By changing a few lines in your webpage html. The place where styles and scripts are called from your HTML is the head section. Here is an example from a Varvy.com page…


<meta name=description content=”description”/>


page specific css code goes here

<script type=”text/javascript”>
javascript code goes here


In the above code you see that the style instructions are placed higher on the page than the scripts are. If on your pages the calls to scripts are happening before the calls for styles and stylesheets, you would simply change that order.

Technical references

This is a pretty simple rule to follow, but the reasons we should follow can be quite technical.

The short version of why styles should go in front of scripts is that CSS plays a higher role in building the page and if it gets interrupted by javascript, it can make the page much longer to load. Below are the article I have written that explain this in more detail.

Leave a Comment