PI Web Solution

<p><a href="https://www.piwebsolution.com/css-js-manager-documentation/" rel="nofollow ugc">Documentation</a></p>
<ul>
<li>Load / remove css or js if the request is from a mobile device</li>
<li>Load / remove css or js if the request is from a desktop device</li>
<li>Defer Loading of CSS file</li>
<li>Load any JS file Async or Defer</li>
<li>Remove any JS from all the pages, or on some pages based on various conditional rules</li>
<li>Remove any CSS file from all the pages, or on some pages based on various conditional rules</li>
<li>Async any JS file on all the pages or on selective pages</li>
<li>You can remove or add JS file based on post type </li>
<li>You can remove or add CSS file based on post type </li>
<li>You can remove or add JS file based on page id </li>
<li>You can remove or add CSS file based on page id</li>
</ul>
<h3>Manage critical css</h3>
<p>Now you can load different critical css for different pages or post or custom post type and optimize your site for speed</p>
<blockquote><p>
Step 1: Go to CSS JS Manager >> Critical CSS setting<br />
select the post type where you want to use the Critical CSS,<br />
Say you want to use it on Post, Product</p>
<p>Step 2: go to Critical CSS >> Add New Critical css<br />
you can add as many critical css as you want<br />
Say you want to have Different critical css for home page, and post, and product<br />
so you will create 3 different critical css and load the critical css There</p>
<p>Use this to generate critical css https://www.sitelocity.com/critical-path-css-generator</p>
<p>Step 3: Go to respective post or page where you will like to use those critical css and select them
</p></blockquote>
<h3>How to Defer Render Blocking CSS using CSS JS Manager?</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/ob2oECSMyg8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>How to remove CSS file from complete website or particular page?</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/D6GBtpSIUMw?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>The same steps apply to JS as well just add JS link and select JS from the Drop drop down</h3>
<h3>Premium support: We respond to all support topics within 24 hours</h3>


CSS JS Manager, Async JavaScript, Defer Render Blocking CSS

CSS JS Manager, Async JavaScript, Defer Render Blocking CSS, Remove javascript, Remove CSS, Defer Render Blocking CSS, Both CSS and JS can be loaded A …

<ul>
<li>
<p>Push / Pre-load all <strong>JS files</strong> in site with one simple option</p>
</li>
<li>
<p>Push / Pre-load all the <strong>CSS files</strong> in your website</p>
</li>
<li>
<p>Push / Pre-load other resources throughout the site or based on the page types</p>
</li>
<li>
<p>Load CSS Asynchronous or Remove any CSS file throughout the site, or there is a conditional selector that you can apply</p>
</li>
<li>
<p>Async / Defer / Remove any JS file throughout the site or based on the WordPress page type</p>
</li>
<li>
<p>You can create mobile device specific rule to push, pre-load, remove, async js or css, this works based on the device user agent detection</p>
</li>
<li>
<p>You can create desktop device specific rule to push, pre-load, remove, async js or css, this works based on the device user agent detection</p>
</li>
<li>
<p>Conditionally remove JS and CSS from various WooCommerce pages like checkout page, cart page, product page, product category page</p>
</li>
<li>
<p>You can push pre-load resource specific on some pages by their ID</p>
</li>
<li>
<p>Remove CSS, JS specific to page or post by their ID</p>
</li>
<li>
<p>Organize rules in group for easy management of the rules</p>
</li>
<li>
<p>Remove CSS, JS on all pages leaving only on the page you specified</p>
</li>
<li>
<p>optimize WooCommerce speed</p>
</li>
<li>
<p>optimize WordPress website speed</p>
</li>
</ul>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/GHGclxgbSqI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<blockquote><p>
Mobile and Desktop detection works based on the wp_is_mobile() function of the WordPress that detect device based on the user agent data send in the request
</p></blockquote>
<p>Apart from this it also offer ability to remove Css and JS file from specific pages based in the selected page tag conditions</p>
<p>Eg: if css path is https://s.w.org/style/wp4.css</p>
<p>then you can match it with wp4.css or style/wp4.css or s.w.org/style/wp4.css</p>
<p>you use 2nd method (style/wp4.css) for more precise selection (this avoid error when there are 2 style with same file name)</p>


Page Speed Optimizer: HTTP/2 Push, Async JavaScript, and Defer CSS

My websites are entirely in AMP, but this plugin injects non-AMP scripts on evey page. It doesn't even try to inject scripts only in non-AMP. So, kinda useless for me. I hope to give it another try in the future.

Not compatible with AMP

It is one of my mandatory plugins, I always use it. :)

Simple, handy and must-have :)

HTTP2 Server push, Async JavaScript, Defer Render Blocking CSS, with fine rule set to control js and css on different page types,

CSS JS Manager, Async JavaScript, Defer Render Blocking CSS vs Page Speed Optimizer: HTTP/2 Push, Async JavaScript, and Defer CSS