How to Eliminate render-blocking caused by Autoptimize?

  • Resolved ClipAxis

    (@clipaxis)


    7 years, 6 months ago

    Hello,

    Autoptimize is creating a render-blocking when I check Google PageSpeed causing a delay in page load.

    I have the following plugin installed along with Autoptimize:

    WP Performance Score Booster
    WP Super Cache
    WP-Optimize

    Even though I dont believe they cause conflict problem with Autoptimize.

    Please help me remove the Render-blocking of Autoptimize

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 6 months ago

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

    Thread Starter ClipAxis

    (@clipaxis)

    7 years, 6 months ago

    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 7 years, 6 months ago by ClipAxis.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 6 months ago

    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)?

    Thread Starter ClipAxis

    (@clipaxis)

    7 years, 6 months ago

    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.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 6 months ago

    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

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘How to Eliminate render-blocking caused by Autoptimize?’ is closed to new replies.