PageSpeed : Optimise the order of styles and scripts
Published by Aslam
Correctly ordering external stylesheets, and external and inline scripts, enables better parallelisation of downloads and speeds up browser rendering time.
Browser : Come on you guys..
JavaScript : Let me in first .
Browser : Come on JavaScript file.., But one thing though. Because you can alter the layout and contents in this page, I will NOT allow any other download activity till you completely Downloaded,parsed ,and executed.
JavaScript : (Downloaded,Parsed,and executed. it took some time)
And other stylesheet guys were waiting outside to be downloaded.
- Once the execution of JavaScript files are complete,
Browser : Come on you stylesheet guys..
Stylesheets : So sad.. but we will load. you didn't allow us to load in parallel.
JavaScript : Let me in first .
Browser : Come on JavaScript file.., But one thing though. Because you can alter the layout and contents in this page, I will NOT allow any other download activity till you completely Downloaded,parsed ,and executed.
JavaScript : (Downloaded,Parsed,and executed. it took some time)
And other stylesheet guys were waiting outside to be downloaded.
- Once the execution of JavaScript files are complete,
Browser : Come on you stylesheet guys..
Stylesheets : So sad.. but we will load. you didn't allow us to load in parallel.
What happens here?
Style sheets couldn't load in parallel because they couldn't load while JavaScript is getting downloaded.
BUT
If they loaded first, JavaScript would have loaded in parallel with them.
I have experimented this with 3 scripts and 3 stylesheets.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<script type="text/javascript" src="script_1.js"></script>
<script type="text/javascript" src="script_2.js"></script>
<script type="text/javascript" src="script_3.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
</head>
With the above code, Result is shown below.
Next, after moving stylesheets above all external scripts,
<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
<script type="text/javascript" src="script_1.js"></script>
<script type="text/javascript" src="script_2.js"></script>
<script type="text/javascript" src="script_3.js"></script>
</head>
Above code produced following results.
As you could see in above results, it is very clear that, moving external stylesheets before external JavaScript can help load the page quicker.
Another problem occurs when there is an inline script block comes in between stylesheets.
This prevents execution of the script untill the stylesheets are downloaded.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<script type="text/javascript">
document.write("Page modified by JavaScript.");
</script>
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
<script type="text/javascript" src="script_1.js"></script>
</head>
It will it prevent execution of the script untill the stylesheets are downloaded.
So the code should be in an order like below.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
<script type="text/javascript" src="script_1.js"></script>
<script type="text/javascript">
document.write("Page modified by JavaScript.");
</script>
</head>
Solutions/Recommendations
Put external scripts after external stylesheets if possible.
Browsers execute stylesheets and scripts in the order in which they appear in the document. If the JS code has no dependencies on the CSS files, you can move the CSS files before the JS files. If the JS code does depend on the CSS contained in an external file — for example, styles that are needed for output you are writing to the document in the JS code — this isn't possible.
Put inline scripts after other resources if possible.
Putting inline scripts after all other resources prevents blocking of other downloads, and it also enables progressive rendering. However, if those "other resources" are external JS files on which the inline scripts depend, this might not be possible. In this case, it's best to move the inline scripts before the CSS files.
Comments
Post a Comment