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.
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.
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.
Code:
<head>
<meta name=description content="description"/>
<title>title</title>
<style>
page specific css code goes here
</style>
<script type="text/javascript">
javascript code goes here
</script>
</head>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.
