Eliminate render-blocking JavaScript and CSS in above-the-fold content In WordPress
What is above the fold content?
The content of your website is visible in your browser when your website loads for the first time without making any scroll and whatever content is getting loaded after scrolling down is below the fold content.
You may also be interested in Email marketing services, FOMO Plugins, and a Landing page tool
What is render-blocking JavaScript and CSS in above-the-fold content?
Rendering means collecting all the data which is needed to load the website and if you consider it above the fold then it will be like the collection of all data which is responsible for loading a website above the fold.
Why is it necessary to Eliminate render-blocking JavaScript and CSS files and why is it bad for websites?
Google wants to create a good experience for visitors so when you visit someone website and that particular website keeps on fetching data ( HTML, CSS, JAVA-SCRIPT FILES AND IMAGES ) from the server in order to load pages then it will take so much time in that case visitor will get negative impact which indirectly leads to decrease in sales.
Everyone loves the beautiful website and in WordPress, for one beautiful content you load extra CSS and javascript files loads externally. Each and every CSS and javascript file leads to rendering blocking. I have always recommended people to use good themes like Genesis-framework and the minimal number of plugins.
Steps Required to fix render blocking javascript and CSS
The first step is to go to developers.google.com/speed/pagespeed/insights and check which files are responsible for creating resource blocking. Then you need to decide that plugin or some external files are important for your website. Because you can’t eliminate blocking because of 3rd party resources. for example – Fonts websites like https://fonts.googleapis.com/css?family=Fauna+One%3A400%2C600%2C700%7CFauna+One%3Aregular. You either remove that or leave it like that simply
Now You need to defer all your javascript files to the footer.
And now combine all your files CSS files in one file for that you can use the autoptimize plugin. I have created a complete autoptimize tutorial for this work you can read or watch the video tutorial
First, install and activate the plugin. And Now in the CSS option setting, you need to check
1 .optimize CSS code
2. Combine images in CSS itself
3. Aggregate and inline CSS.
And now you will be able to combine all your CSS files. which will help you to get rid of render blocking CSS resources.
Next, You need to defer the javascript file which is going to remove render blocking of javascript resources the best option in this is you need to select
1. Optimize javascript
2. Aggregate inline js
With the above mentioned setting, you can defer all your javascript files except 3rd part javascript files for example which you are not hosting inside your server
For asynching 3rd part javascript files, you need to use one more plugin Async Javascript which is going to defer your 3rd party javascript files. This plugin is quite simple and easy to use you don’t need to set so many options. Just click on the WordPress setting after activating the plugin. Then click on the setting tab inside the plugin dashboard then select the enable async javascript option and click on save
Note – sometimes ansyc may lead to breaking of themes in that case if you need to exclude the javascript files which is responsible for the loading of that content. For example – I am using lazy loading in my website and after async of JavaScript then you need to javascript file of that plugin
Now bingo no more issue related to Eliminate render-blocking JavaScript and CSS in above-the-fold content In WordPress.
thanks for shareing this knowledge
but every one buy wp-rocket free.
how is possible?
Hello Rising wings ,
You can refer this blog for more info https://www.gomahamaya.com/best-cache-plugins-wordpress/ . Wp-rocket is not free You need to buy a license for using it . Or you can also hire a expert for increasing your website speed if you are finding difficulty in optimizing https://www.gomahamaya.com/go/fiverr-wordPress-speed-optimization-service .
Regards,
Rahul