Website Optimization plugin: Ordering Stylesheet and Javascript

Here I have discussed about one of many ways of Website Optimization and a WordPress plugin that helps in achieving the optimization tips discussed here.
Did you ever read about Website Optimization of website/blog through ordering styles and Scripts in head section? If you like your website load in browser quickly then you may have read in Website performance optimization tips that you should move all CSS files on top and script at last in HTML head section (<head></head>). All styles should come first one by one and then external JavaScript call and then any inline JavaScript.

According to page speed tool by Google, Order of call to external style sheets and JavaScript files in HEAD section should be in this order:
CSS files,
...
...
...
External Scripts file
Inline scripts

On top of it, if you can move your script file at the bottom of the page (before </body>), it would be better.

Graphically, Google has described the speed difference in ordering in this way:

Before Ordering:
page speed -  before ordering style and javascript

After ordering:
page speed-  before ordering style and javascript

How do you order those calls? If you are manually putting CSS and JavaScript files on head section (<head></head>) then you can do this very easily. Just modify once and website optimization by this way is over. What if you are using plugins and that are adding calls to JavaScript and CSS files. This is case of WordPress blog, where we use many plugins and those plugins add various Styles and Script dynamically from wp_head() call.

Related or may be off-topic: I am using Google Syntax Highlighter, which is client-side syntax highlighter. It uses JavaScript. It does not support escaping. So, to avoid escaping everytime before you paste code, you can use HTML-escape plugin.

Dynamic call to JavaScript and CSS can happen to other frameworks as well. You can go to those plugins and modify the plugin code so that it does not output anything in head section so that you can add those files (CSS, JavaScript, and inline codes) manually. The problems many problems with this approach.  If you update plugin then your change will go. If you disable any plugins  then whatever files you added in head section manually will be there. You need to remember and recall at the time of uninstalling or disabling those plugin so that you can manually delete those lines from the <head> script.

Currently, there is no filter available in WordPress (as per my investigation) for filtering whole of head section (<head></head>).  So, we need to do a little manual work after installing the plugin. We need to do once. I have a created a template tag for this. I am using the code shared as plugin from few months and it is working without any problem.

Website Optimization: Order Styles and JavaScript

Demo of how you can add the template tag of the plugin:

Installation method:

My content-type is UTF-8. So, my head section can looks like this-

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<?php
	if (function_exists('orderStyleJS')) {
		orderStyleJS( 'start' );
	}
	?>
	<!-- Existing other meta tags, script, CSS, inline CSS, etc -->
	<?php
		if (function_exists('orderStyleJS')) {
			orderStyleJS( 'end' );
		}
	?>
	</head>

Download page: Website Optimization: Order Styles and JavaScript

After installation, you will see the HTML comment: <!-- Order style js plugin --> in head section.

  • # 1 - by Satya Prakash

    @Ed
    Thanks for the information. I can think of checking it. I have checked it for <!–[if IE]> but I think <script> and <link> tags are getting filtered. So, need to stop them as well. I can not commit about time but I would like to solve it. I will post a comment here once I fix it. Thank you again for bringing this to my info. Please subscribe to the comment for update.

Comment pages
1 2 2392
Comments are open for an year period. Please, write here on Facebook page.