Autoptimize creates big renderblocking css file

splitting up is easy; simply don’t activate the “aggregate CSS” option.

not making it render-blocking is also possible, using the “eliminate render-blocking CSS” option, but in that case you will either have to;

• add “above the fold CSS” in the field below, see the FAQ for info no how to generate that
• OR go to the “critical CSS” tab and create manual rules for different types of pages and add the critical CSS for those using the same tools as in the previous option
• OR take a subscription at criticalcss.com OR consider buying an Autoptimize Pro subscription, in both case these can automatically create critical CSS rules

hope this helps,
frank

thank you for the quick reply!

Are there advantages in aggregating the CSS, or is it better to split it? How about inlining the CSS in the HTML?

aggregating is less important now that HTTP/2 is (almost) always available at server level.

I would however advice against inlining all; it makes the HTML bulky and makes the CSS not cache-able, so it can even make the site slower instead of faster in some cases.

I am using “eliminate render blocking” with the criticalcss subscription, but they are still render blocking ??

These are the settings I have Enabled:

Optimise Java Script Code? ON

Aggregate JS files? ON

Exclude scripts from Autoptimize: , wp-includes/js

Optimise CSS Code? ON

Aggregate CSS files? ON

Eliminate render-blocking CSS? ON

Exclude CSS from Autoptimize: , admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/

Optimise HTML Code? ON

Also minify inline JS/ CSS? ON

Is there anything I can change in order to make the CSS not render blocking, or to improve the rendering speed ? I’m trying to decrease the render delay for the LCP.

Thank you!

can you share your site’s URL @ahuk so I can have a look at the resulting HTML ?

Sure, this is the site

when you go to Settings -> Autoptimize -> Critical CSS, do you see (AUTO) rules there?

there is nothing under “Rules”, there is only stuff under “Job queue”

can you click on the “process queue manually” beneath the job queue? and a couple of minutes later press it again?

i clicked like you said, and now stuff started to appear under Rules ??

but it also says this:

1 of the above rules got flagged by criticalcss.com as possibly needing review. This is often due to font-related issues which can be safely ignored, but in case of doubt do a visual test or check for Cumulative Layout Shift issues in e.g. Pagespeed Insights.Dismiss this notice.

OK, so what rules do you see Ahuk?

only these:

Path Based Rules

AUTO/car-battery-replacement/pentre-du/clwydccss_53d7f604759c0282ad22e345d67d51ae.cssEditRemove

AUTO/car-battery-replacement/noss-mayo/devonccss_1b9a7caa288f2071b264886bee4c42b0.cssEditRemove

Conditional Tags, Custom Post Types and Page Templates RulesTypeTargetCritical CSS FileActions

AUTOis_front_pageccss_8baf723b8f7e878450e9474df0d72bcc_R.cssEditRemove

1 of the above rules got flagged by criticalcss.com as possibly needing review. This is often due to font-related issues which can be safely ignored, but in case of doubt do a visual test or check for Cumulative Layout Shift issues in e.g. Pagespeed Insights.

but theres many many items in the Job queue section.

so it looks like if i press “Manually procss job queue”, one item is moved from Job queue into Rules

do i have to Manually process all of them?