Optimizing the Order of Styles and Scripts

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

In this post we are going to learn about how to 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. When a browser is loading your webpage it gets the HTML and then it starts calling all the things like css, scripts, images, etc. your HTML is asking for.
When browsers start to download a script they stop loading anything else until the script is loaded.That’s why 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 to optimize the order of styles and scripts?
The order of styles and scripts can be optimized 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 for optimizing the order of inline styles and scripts:

<head>
<title>title</title>
<style>
css code goes here
</style>
<script>
javascript code goes here
</script>
</head>
 

In the above code the style instructions are placed higher on the page than the scripts. If on your pages the calls to scripts are happening before the calls for stylesheets, you would simply change that order of calling. This will increase your website’s loading speed.

 

Optimize the order of styles and scripts by using filters
Other way to optimize the order of styles and scripts is to use Move CSS Above Scripts filter. This filter seeks to make sure scripts do not block the loading of CSS resources.
IF you are using Apache server, the Move CSS Above Scripts filter is enabled by specifying:

ModPagespeedEnableFilters move_css_above_scripts

in the configuration file.

 

The Move CSS Above Scripts filter operates only on CSS <link> and <style> tags found after the first <script> tag and moves these tags above the first <script>.
For example, if the HTML document looks like this:

<html>
<head>
</head>
<body>
<script src=“script.js”></script>
<div class=“classname”>
Hello, world!
</div>
<style>
.classname { color: green; }
</style>
<link rel=“stylesheet” href=“style.css”>
</body>
</html>
 

Then PageSpeed will rewrite it into:

<html>
<head>
</head>
<body>
<style>
.classname {color: green; }
</style>
<link rel=“stylesheet” href=“style.css”>
<script src=“script.js”></script>
<div class=“classname”>
Hello, world!
</div>
</body>
</html>
 

In some browsers the original version will not even download the CSS file until the JavaScript has been downloaded and run. This transformation will make sure the CSS file is loaded first.

 

Optimize the order of styles and scripts with WordPress Plugin
One of the easiest way to optimize the order of styles and scripts is to use plugin. For example Autoptimize plugin makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default and can move and defer scripts to the footer. It also minifies the HTML code itself, making your page really lightweight.
What if you are using plugins and that are adding calls to JavaScript and CSS files dynamically. This is case of WordPress blog, where we use many plugins and those plugins add various Styles and Script files dynamically from wp_head() call.
If you consider performance important, you really should use one of the many caching plugins to do page caching. Some good candidates to complement Autoptimize that way are e.g. WP Super Cache, HyperCache, Comet Cache or KeyCDN’s Cache Enabler.