One way to speed up your page loading times is to optimize the order of your styles and scripts. You should always place your style tags before your scripts and any calls to a stylesheet should also be before those scripts.
How does this make your page load faster? When a web browser loads your webpage, the HTML loads before CSS, images, scripts and so on – everything the HTML asks for.
When the browser begins to download a script, they will not load anything else until that script is fully loaded and this is why most webpages spend around 80 to 90% of their loading time waiting for a network.
One of the most powerful ways of reducing this wasted time is to remove any patterns that can cause a browser to serialize the download of resources.
How to Optimize the Order of Your Styles and Scripts
This can be done very simply by editing a couple of lines in the HTML for your webpage. Styles and scripts are called from the head section of the HTML and the following shows you an example of how to optimize the order:
‘ <head>
<title>title</title>
<style>
css code should be here
</style>
<script>
javascript should be here
</script>
</head>’
In this code, we have placed the style instructions above the scripts. If you see on your pages that the script calls are happening before the stylesheet calls, all you need to do is change the calling order – this will result in an instant increase in page speed.
Using Filters to Optimize Script and Style Order
Another way of optimizing order is to use a filter called ‘Move CSS Above Scripts’. The filter will ensure that scripts do not get in the way of CSS resources loading.
If you use the Apache Server, you would enable this filter in the configuration file by specifying:
ModPagespeedEnableFilters move_css_above_scripts
This filter will only operate on CSS and style tags that come after the initial script tag – the tags would be moved so they are above the initial script. For example, if you HTML document looked something 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>’
Pagespeed would then rewrite it so it looked like this:
‘<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>’
With some browsers, the first version of the script would not download the CSS until JS has been downloaded and then run. Using the transformed version ensures that the CSS gets loaded first.
Using a WordPress Plugin
The easiest way, as with many things in WordPress, is to use a plugin. Autoptimize plugin makes the job of optimization dead simple because it can concatenate, minify and cache your styles ands scripts, inject the CSS straight into the deader and push scripts to the footer by default. It will also minify HTML, pulling a lot of weight off your webpages.
If you use a plugin that dynamically add JS and CSS calls you should consider changing it to one that that is for page caching. Alongside Autoptimize, you could also use WP Super Cache, Comet Cache, HyperCache or Cache Enabler from KeyCDN.