How to Configure & Optimise Script Ordering in WordPress

To optimize script ordering in WordPress, you will need to understand how a web browser goes about rendering your web page.

To load a page, the browser reads the HTML file first, and then calls the elements the HTML is asking for (images, CSS, scripts, etc.). When a browser is downloading a script, it stops loading everything else until that is completed. This is one reason why combining JS and CSS files is very important to improve page loading. Google states that typical web pages spend 80-90% of their loading time waiting for the network itself, compared to actually rendering what is on the page.

The Critical Rendering Path

The extreme way to optimize script ordering is to ensure the critical rendering path is a set up. This means that the order of every element in the page is also the order it is called for by the browser. Now, this is actually overkill, but where it can be very important is for ‘Above the fold’ content. This is what the user sees upon the page loading, without scrolling down the page.

If we can perfect the order (and minimise the number) of resources loading for above the fold content, we will have a blindingly fast loading time to the user’s eye – and the rest of the page will keep loading while they’re still taking in the first pieces of content.

By default, images will load in the order that they are placed on the page, so this is already taken care of for you. For CSS and JS files, it is recommended to try and combine these. Some may need to be excluded if this causes a rendering issue, for example, it is common to need to exclude 1 or 2 WooCommerce CSS files to resolve some grid layout issues.

Need Help to Optimise Script Ordering for WordPress?

This is part of our optimization service. We can help you optimize your site above and beyond working to optimize script ordering for WordPress, just let us know what you are trying to achieve, and we will let you know how we can help.