Arranging the styles and scripts in a particular order is one way to improve the page loading speed.
It is recommended to keep the style sheets at the top and scripts after them. This is because when the browser renders your webpage it first gets the HTML and then comes the CSS, JS, images, etc.
When the javascript is downloaded it stops loading all other files until the script tag has been downloaded, parsed and executed. This is the reason that webpages spend around 80-90% of their loading time in waiting for a network.
The only solution to reduce the wasted time is to remove the patterns that makes the browser to serialize the download of resources.
How to optimize the order of your styles and scripts?
#Method 1 - Optimize Styles and Scripts
This is the simplest method. Here you just need to make a few changes in the HTML of your webpage. Styles and scripts are placed in the head section of the HTML. Here is the correct order to follow:
‘ <head>
<title>title</title>
<style>
css code should be here
</style>
<script>
JavaScript should be here
</script>
</head>’
By keeping the files in this order will result in rapid increase of speed.
You may also like to read:- How to Avoid CSS@import? What is it and Why is Required?
#Method 2 - Optimize Styles and Scripts
Applying Filters to Optimize the script and style order.
Filters such as 'Move CSS Above Scripts' makes sure that scripts do not halt the process of CSS resources loading.
By using the Apache Server, one enable the file by adding below code in the configuration file.
ModPagespeedEnableFilters move_css_above_scripts
#Method 3 - Optimize Styles and Scripts
Use a Wordpress Plugin
Activating a plugin in Wordpress is the easiest thing one can do. Autoptimize plugin is a multitasking plugin, whereby it can perform the following functions:
- Concatenate, Minify and Cache the styles and scripts file
- Adds CSS direct into the header
- Add Javascript into the footer
- Minify HTML
If the plugin you use dynamically adds JS and CSS you should change it to page caching. Parallely to the Autoptimize you can also use the Cache Enabler, HyperCache, WPSuper Cache, and Comet Cache.
Conclusion
If website performance matters to you, then consider opting one of the ways mentioned in the article. This is the easiest way to get fast running website.
