Inline and Defer CSS

Unused CSS is not something AO can help with rimaroy; the only goal of “inline & defer” and the “critical CSS power-up” is to make sure you don’t have render-blocking resources.

follow these steps to do so;

1. activate “inline & defer CSS” in AO
2. create an account at https://criticalcss.com/
3. install and activate the critical CSS power-up
4. enter the API key from criticalcss.com in the Autoptimize “critical CSS” tab
5. the power-up will now start to create rules that decide what critical CSS should be used for what page (give it some time)

Hope this helps,
frank

Ow, additionally; I’m not a believer in Autoclear Autoptimize Cache; it just hides the problems but does not solve them.

So, it’s important to know that the Autoclear plugin is not an Autoptimize plugin. I created the Autoclear plugin for one purpose, which is to aid in prevent cache sizes from becoming so large they cause performance issues themselves. It’s purpose isn’t to mask over other optimization issues. The mobile scores are more strict about blocking assets than desktop. So I’d disable the Autoclear plugin while you sort out those other issues. Hope this helps.

thanks for your quick response. Can I Inline “above the fold CSS” without creating an account at https://criticalcss.com/
Is it better to deactivate the plugin Autoclear Autoptimize Cache?

I have one more question.
Why the Autoptimize creates this large css file https://prntscr.com/qagnzi . is this file slow down the speed of my site?
can i eliminate the unused css from this file to speed up my site.

I’d disable the Autoclear plugin while you fix any other issues, then activate after that.

CriticalCSS is very good at automating more advanced CSS issues. A lot of my clients use it, and I recommend it.

Just to confirm. I’m not affiliated with Autoptimize. I do use their products, and the Autoclear plugin is my own separate plugin.

Can I Inline “above the fold CSS” without creating an account at https://criticalcss.com/

yes, but you’ll have to create one “above the fold CSS”-block that applies to all pages yourself somewhere

Is it better to deactivate the plugin Autoclear Autoptimize Cache?

In my opinion, for reasons explained in the blogpost I linked to it indeed is better to avoid the cache growing that fast in the first place, yes.

Why the Autoptimize creates this large css file https://prntscr.com/qagnzi

AO simple combines all the CSS your site has. If you have a lot of CSS, your aggregated CSS-files will be big.

is this file slow down the speed of my site?

as “normal” CSS is render-blocking; yes, except if you go the “inline & defer”-route as in that case the big file is loaded later.

can i eliminate the unused css from this file to speed up my site.

no, AO cannot do that.

i have create an account at https://criticalcss.com/. and enter the API key in the critical CSS power-up. I can’t understand the critical css are working or not. this is second day i see too many jobs are in queue https://prntscr.com/qc6g56 and some rules has been created https://prntscr.com/qc6gq1 .
even i am not able to find the job complete for which pages. kindly help

All looks healthy rimaroy; you currently have 8 rules for specific pages and 4 more generic rule for non-pages. the fact that you keep on seeing jobs in the queue is normal, these will be processed and removed automatically by the plugin’s queue processing job to ensure your rules (and the critical CSS in them) remain up to date.

hope this clarifies,
frank