How to Eliminate render-blocking caused by Autoptimize?

have a look at info about “inline & defer” in the AO FAQ @clipaxis ??

hello again, well I spent the past 9 hours trying to figure out how to do this inline & defer. It took me a quite sometimes to understand it and I applied it thanks to sitelocity.com/critical-path-css-generator as you mentioned in AO FAQ

Anyway, it removed the Autoptimize as a render blocking from google speed (except it still appears in remove unused css) however, I disable it again, because the website starts to load in an ugly html format, after 3s or 5s of loading, it turn to be normal as it should be.

if there is no other solution, can you at least show me how to prevent this ugly html format from appearing in the beginning?

• This reply was modified 6 years ago by ClipAxis.

the website starts to load in an ugly html format, after 3s or 5s of loading, it turn to be normal as it should be.

In that case the critical CSS is not good enough, try generating it elsewhere maybe (there are other links in the FAQ)?

hello

I spend the past two days disparately looking even in pages 10 11 12 in google searching for critical CSS minifier

I tried a dozen of them, and each time, not working.

well, in general I use criticalcss.com but even there the results sometimes require manual tweaking to compensate for styles applied by JS (which these tools typically don’t see).

it’s doable, but you need some CSS-knowledge and some time; load the page in firefox and in developer tools go to “style editor” and in the left bottom pane disable all linked stylesheets and keep only the (first) inline style (which typically holds the critical css). now you see the page styled with only the critical css, try seeing where/ how it differs from a fully styled page and tweak the critical CSS the browser. once you’re done there and all looks fine you can apply your changes in the generated critical css.

Do also take into account that (exceptions notwithstanding) different parts of your site will likely need different critical CSS. the Autoptimize Critical CSS power-up can help you with that, as it will automatically generate rules for different types of pages (but requires a paying account at criticalcss and the remark about manual tweaking is valid here as well).

hope this clarifies,
frank