search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 799 forks source link

Jetpack Boost: "Failed to generate Critical CSS" error with a 403 error code #36997

Open pauljacobson opened 6 months ago

pauljacobson commented 6 months ago

Impacted plugin

Boost

Quick summary

Our user reported seeing a "Failed to generate Critical CSS" error when Jetpack Boost was automatically attempting to regenerate critical CSS. This error appeared coupled with a 403 error.

CleanShot 2024-04-21 at 13 21 57@2x

I noticed a set of errors on the Jetpack page that suggest a connection issue:

CleanShot 2024-04-21 at 13 24 17@2x

See here: 3435f-pb/

The Jetpack Connection looks good (there are some inconsistencies in the Incremental Sync). The domain is connected using A records via Cloudflare.

Steps to reproduce

  1. Open the Jetpack Boost page
  2. Wait for Boost to "Automatically Optimize CSS Loading"
  3. The error occurs after a short wait.

A clear and concise description of what you expected to happen.

Jetpack Boost should generate critical CSS without producing an error.

What actually happened

Instead, there is an error when Boost attempts to generate critical CSS. See here (around 45 seconds):

https://github.com/Automattic/jetpack/assets/2912202/54a1f612-f2e6-4c4f-9bbc-7dd2c3a5be08

There were no corresponding errors or warnings in my browser Console when this occurred.

Impact

One

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Chat: 8037651-zen Follow-up ticket: 8037799-zen

I tested this on the following:

github-actions[bot] commented 6 months ago

Support References

This comment is automatically generated. Please do not edit it.

haqadn commented 6 months ago

I looked into the issue for for the specified site. Looks like they block browsers that do not have JS and cookies enabled. We run a headless browser to generate Critical CSS that disables javascript for efficiency. screenshot

haqadn commented 5 months ago

I am closing this issue as there isn't any actionable on our end. The pages need to be able to load without JS to work. If you think there is more to discuss, feel free to open it again.

mxhassani commented 5 months ago

@haqadn I have landed on a similar case, and the error seems to happen because the site is Private. Switching it to Coming Soon fixes the issue. Is that expected? 8214335-zen

haqadn commented 5 months ago

Hi @mxhassani, Yes and no. The site needs to be publicly accessible to be able to generate critical CSS.

Setting it to Coming Soon mode would not work properly, and even if it did, the generated critical CSS would be wrong, so I wouldn't recommend that.

Critical CSS is used to optimize the site load for visitors(mainly first-time visitors). If the site is not publicly visible yet, there is no point in generating critical CSS for that. So, I'd tell the user not to worry about it now and only regenerate when they make it public.

haqadn commented 5 months ago

I have created an issue related to this https://github.com/Automattic/jetpack/issues/37452