Log in

Css And Javascript Order


Staff member
Sep 29, 2016
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.

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

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Public Zone Posts

About us

  • NulledFire.com is one of the most comprehensive repositories under the terms of GPL (GNU General Public License v3.0 Free as in Freedom) that provides premium Plugins, Themes and PHP Scripts for testing purposes.
    We promote WP codes to the users globally so that you can check it before buying from the original developer/designer.

User Menu

NulledFire Statistics

Latest member