How do I know CriticalCSS is working correctly?

  • Resolved boybawang

    (@boybawang)


    5 years, 1 month ago

    Hello –

    I added the API key last night for CriticalCSS to Autoptimize and allowed it to run overnight. When I go to some of the pages that have had Critical CSS generated (according to the ‘Rules’ in CriticalCSS), I noticed that in Chrome Dev tools (Network -> CSS) I can see the CSS file being loaded from /wp-content/cache/autoptimize/css. I was under the impression the CSS would be loaded from /wp-content/uploads/ao_ccss, but it isn’t. FYI, I also tried this from Incognito mode while not logged in.

    I made sure to have the option checked for “Inline and Defer CSS”, but I didn’t add anything in the textarea below it (because I didn’t think I needed to). Is there something I’m missing? I thought simply having the API key and allowing the CSS to be generated automatically was enough.

    I tested this out on a few of the pages that showed up in the CriticalCSS tab as having a Critical CSS file generated for it.

    I also tested with and without the CDN. I deactivated all plugins (except Autoptmize), but that didn’t help. I also tried switching themes, but no luck.

    Autoptimize version is 2.8.4, WordPress version is 5.7.1.

    Thanks!

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

    (@optimizingmatters)

    5 years, 1 month ago

    when using critical CSS the CSS to render the page immediately (the critical CSS) is inline, so there is no download for that. the full CSS (which is needed for the below-the-fold part of the page) is loaded later, in a way that is not render-blocking and that’s the file you see being loaded.

    summary: critical CSS is inlined in HTML, full CSS is loaded non-render-blocking later. you should be able to confirm by checking e.g. pagespeed insight, where you should no longer see render-blocking CSS.

    hope this clarifies,
    frank

    Thread Starter boybawang

    (@boybawang)

    5 years, 1 month ago

    Thanks for the explanation, Frank @optimizingmatters ! Yes, that answers my question. Marking as resolved.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 1 month ago

    you’re welcome 🙂

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

The topic ‘How do I know CriticalCSS is working correctly?’ is closed to new replies.