Jetpack + Autoptimize

  • Resolved Brian

    (@brianjaye)


    2 years, 6 months ago

    We are using Jetpack along with Autoptimize. When we enable the option, ‘Optimize CSS Loading’, our site’s CSS gets completely disabled. I wait until all the critical css is generated thinking that the site would be back to normal afterward but it is not.

    That option breaks our site. When I turn it off, our site is back to normal. Has anyone else encountered this issue? Is there a fix?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Mike Stott

    (@mikemayhem3030)

    Hi @brianjaye

    We’ve not had many reports of this. Boost scans external critical CSS files and inlines the CSS which is critical for above the fold rendering.

    How does your speed score change with and without Autoptimize enabled? I’m wondering whether you need to run both and could just run Jetpack Boost and the Critical CSS feature

    Thread Starter Brian

    (@brianjaye)

    Autoptimize contains the API key. With Autoptimize deactivated, Jetpack is unable to use the option ‘Optimize CSS Loading’. I have the free version of Jetpack by the way.

    Plugin Contributor Mark (a11n)

    (@thingalon)

    Jetpack Boost’s “Optimize CSS Loading” feature and Autoptimize’s “Critical CSS” feature both do the same thing; they both move the most important CSS styles to the top of your page’s HTML code to make them render faster.

    There is no benefit to running both of these features on the same site – and in fact they can cause issues with each other. We recommend disabling the Critical CSS feature in one of these plugins.

    Jetpack Boost can generate Critical CSS for your site for free, without needing an external API key. It does so using a process which runs inside your WordPress site’s admin dashboard.

    You also mentioned that Jetpack is unable to use the Critical CSS feature when Autoptimize is deactivated? Can you please tell me more about what happens there? Does it show an error message when you try to use it?

    Thread Starter Brian

    (@brianjaye)

    Here’s the error message that I got when I deactivated Autoptimize and tried to generate Critical CSS with Jetpack.

    Failed to generate Critical CSS
An unexpected error has occurred. As this error may be temporary, please try and refresh the Critical CSS.

Error: Your site's REST API does not seem to be accessible. Jetpack Boost requires access to your REST API in order to receive site performance scores. Please make sure that your site's REST API is active and accessible, and try again.
    Plugin Support lastsplash (a11n)

    (@lastsplash)

    Hi @brianjaye –

    Are you using a security plugin that blocks access to the REST API? If so, you will need to turn off that functionality. Jetpack needs to be able to communicate with your site in order to generate the Critical CSS.

    If you can share your URL here, we can better advise on what the specific issue may be.

    Plugin Support Stef (a11n)

    (@erania-pinnera)

    Hey @brianjaye,

    It’s been one week since this topic was last updated. I’m going to mark this thread as solved. If you have any further questions or need more help, you’re welcome to open another thread here. Cheers!

    Thread Starter Brian

    (@brianjaye)

    Autoptimize contains the API Key for criticalcss.com. When I deactivate Autoptimize, Jetpack Boost won’t generate critical css because the API is disabled. When Autoptimize is activated, Jetpack Boost will now generate critical css.

    Am I missing something? Is there another way to get the critical css API enabled for Jetpack Boost without doing it through Autoptimize?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Jetpack + Autoptimize’ is closed to new replies.