Autoptimize CSS render blocking

Hey @danishsq;
I don’t (and can’t) offer paying services here, but feel free to have a look at https://autoptimize.com to see what is possible.

kind regards,
frank

Hi Frank

As I have already installed Autoptimize and stuggling with these two issues, which option should I choose to fix these issues Autoptimize pro configuration or complete speed optimization.If it is complete speed then it is out of my budget

contact me there @danishsq, we’ll continue the discussion there. the choice in the form is an indication, not a commitment ??

In my case it is Javascript: https://myweb/wp-content/cache/autoptimize/js/autoptimize_0ed968ea3d92b88241cc8c08b2303f9f.js How can I solve that?

@alexynior: you’re probably forcing JS in head, if you don’t do that it should not be render-blocking.

Hello, I’ve been using your plugin for a long time, in the end I decided to break down Pagespeed, but if I create the critical path css and go and paste it in “Inline & Defer CSS”, you create rendering problems when opening pages. So I tried activating only “Embed all CSS”, but Pagespeed then returns me: You needed 180.7 KiB of HTML response for displaying content above the fold. 4 round-trips are required on the network. Give priority to content above the fold so it can only be viewed with the first 3 round-trips of HTML code.

I would prefer to use “Inline & Defer CSS”, you know how to avoid rendering problems when opening pages, did you have a similar problem?

Thanks in advance

Sounds like a problem with the generated critical CSS @divano, try generating it elsewhere (see FAQ for some links), but sometimes the generated CCSS needs manual tweaking so you might need to dive in that CSS.

Thanks for the answer, I used them, but nothing to do…I think I’ll have to swim or give it won at Pagespeed. In any case, thank you very much.

Hi @optimizingmatters

So I am having the same problem as @danishsq but I have not tried the crticalCSS.com solution.

Is that what I should try first. Do I need to purchase the subscription then use your Autoptimize criticalcss.com power-up plugin to implement it?

I have 5 wordpress sites that I will ultimately implement Autoptimize and I assume I will have the same problem with the other 4.

What is the most cost effective solution?

Thanks for your help!

Hey,
I followed the procedure from this guide on How to Inline Critical, Above-the-Fold CSS & Optimize CSS Delivery in WordPress With the Autoptimize “Inline and Defer CSS” Option but it doesn’t work for me.
When copying all the code from the source, mine has over 800k characters so I had to split it in 2 to get the critical CSS path generated.
Then I pasted those 2 paths in Autoptimize.
I ran a new Performance audit for my website (while logged out from my WordPress).
I see that under Defer unused CSS the most important term is a /wp-content/cache/autoptimize/css/autoptimize_<random string>.css term.
I open its content and see that it is the massive CSS term I ran through the critical CSS path creator.
So I realize that it’s a cycle right ? Like there is no way to optimize it better than that so that ?
my website is https://serrurier-secours.ch/

had a quick look at your homepage and the CCSS is definitively not enough to render your above-the-fold page serruriersecours, I would advice trying to generate your critical CSS using anohter tool (some links in the FAQ).

Hi
I am having similar issues with inline & defer section of autoptimize. I have created the critical css entered into inline & defer box but each time I rerun google pagespeed insights it comes back with #1 recommendation being to “Defer unused CSS”. It lists the two autoptimized generated css files.

When I select the “Inline and Defer” option and paste in my critical css, does the plugin defer the .css files it has created? or do I need to select/do something else?

I have created critical css via both options provided in the FAQ but with no change in results from google pagespeed.

Has anyone had success with google page speed insights recognizing that the autoptimize css files have been deferred?

Thanks!
Michael

ah, the new GPSI recommendation ??

When you’re using “inline & defer” (potentially with the automated critical CSS plugin) the critical CSS is inlined and the full CSS is technically not deferred but “preloaded” meaning it is loaded without it being render-blocking (which is a separate GPSI recommendation). AO uses Filamentgroup’s loadCSS for this purpose.

The advantage of using “preload” is that the page below the fold is styled as soon as possible without the CSS being render blocking. If it would be deferred (as AO used to do a couple of versions ago) the chance was bigger that the user scrolled down to a part of the page that was not styled yet. Given the fact that preloading the full CSS does not block rendering, there is little advantage to be found in deferring it instead and the disadvantage might be significant.

hope this clarifies,
frank

Hi,

Thanks for quick reply and explanation, definitely helps clarify. Makes sense and noticed the “preload” value in the rel tag.

Interesting that in the help docs loadcss is recommended (https://developers.google.com/web/tools/lighthouse/audits/unused-css#deferring) but yet GPSI doesnt appear to detect the preload when its being used…

Thanks again
Michael

yeah, logged an “issue” at filamentsgroup to discuss preload vs defer ??