What is CSS Js manager?
It allows you to control all the CSS and Js file in your website. With this, you can specify the way you want to load them and which pages to load them.
How to Defer Render Blocking CSS using CSS JS Manager?
- Copy the URL of this file without the query string variable ( without this “?ver=5.0.3“
- Now Open the CSS JS Manager
- Click on “Add New Resource”
- Now add the URL from the Step 2
- Set method as “Async“
- Selection Logic “Add This“
- On All Pages
If you want to load this CSS only on the home page and don’t load on any other page, then you can select “On Selected Pages” option and then Select “Is Front Page”
Once you do this it will only allow loading of this CSS file on only Front page as Async and it will remove it from all other pages of the website.
How to remove CSS file from complete website?
You have a css file that is not used in your website and you want to remove it from your website completely.
you can do that easily. just follow all the steps given in the Defer process, you can keep the loading method as any thing (as it wont mater as the css will be removed) then at the bottom
If you want to allow JS file on only few particular page and remove from all other
All the steps remain same, You need to copy the JS file URL, Select Resource type as “JS” from the dropdown.
Select the method of the loading for the JS (it has Defer, Async, and normal)
In selection logic click “Add this on”
Click on “Selected Pages”
In the Single Resource ID enter the Page id of the pages where you want this js to be allowed
E,g: 1,2,22 this are the ID of the page where this js will be allowed to load an apart from this it wont load on any other page
You have set of rules that will allow you to control loading of JS and CSS based on WooCommerce conditional tags