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
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
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.
This is a pretty simple rule to follow, but the reasons we should follow can be quite technical.