Thread Starter
Anonymous User 17976131
(@anonymized-17976131)
I forgot to mention that this issue is causing Site Health to report a “critical issue” of “Failed to generate Critical CSS”.
Hi @bixfrankonis –
What 404 plugin are you using? If you share the link here, we can investigate and see if we can find a work around.
Hi there
I tested with the 404 plugin you mentioned, but I was unable to reproduce the error. I created a page and set it as the 404 page in Settings > Reading, then I viewed the 404 page directly and was redirected to the home page, but I didn’t get any critical CSS errors.
Could you provide more detailed steps that we can take to try and reproduce this error?
Thread Starter
Anonymous User 17976131
(@anonymized-17976131)
I’m not sure how detailed the steps can be. Under two different themes now if I set a page as the 404 page using that plugin, Jetpack Boost when regenerating critical CSS gives me a tiny
1 file could not be automatically generated. Visit the advanced recommendations page to optimize this file.
error, and if I check advanced recommendations it says
Single page view
This URL is redirecting to a different page:
*shrug*
-
This reply was modified 6 months, 2 weeks ago by
Anonymous User 17976131.
Hi @bixfrankonis,
I followed the exact steps you mentioned, but unfortunately, I’m still unable to replicate the issue on my end. Since we last communicated, we released a new version of Boost, currently 3.0.2, and I see that you’ve already updated. Can you please confirm if the issue persists on your end even with the latest version installed?
Thread Starter
Anonymous User 17976131
(@anonymized-17976131)
Still happens. Is there some sort of debugging I can turn on?
Hi @bixfrankonis,
To clarify why this is happening and why Critical CSS generator fails in your case, let’s dive into how Jetpack Boost’s Critical CSS generator feature, and critical CSS generators in general, operate—tailored to your situation.
Critical CSS generators are designed to enhance your site’s loading speed by identifying and prioritizing the CSS needed for the initial display of your pages—essentially, the styles that are critical for rendering the portion of your website that visitors see first, without scrolling. Jetpack Boost automates this process for your site, aiming to improve your site’s performance and the user experience.
Here’s where the conflict arises with your setup: Your blog utilizes a custom 404 page plugin that redirects any direct attempts to access the custom 404 page URL back to your blog’s main page. When Jetpack Boost’s Critical CSS generator tries to analyze your custom 404 page to extract the critical CSS, it can’t do so effectively because of this redirect. Instead of analyzing the actual content and layout of the 404 page, the generator is taken back to the main page. This behavior prevents the generator from determining what CSS is truly critical for the 404 page, potentially leading to the “failed to generate critical CSS” error you’re experiencing.
This issue is indicative of the sensitive nature of critical CSS generation processes: they require stable, direct access to each page they’re analyzing to accurately capture and prioritize the necessary styles. Any form of redirection or interruption during this process can disrupt the analysis, leading to incomplete or failed critical CSS generation attempts.
In the context of your blog and the use of Jetpack Boost, this means the interaction between the custom 404 page plugin’s redirection and the Critical CSS generator is at the heart of the problem. While this scenario is specific to your site’s configuration and the tools you’re using, it’s reflective of a broader principle in web performance optimization: ensuring that all components of a site, from plugins to performance tools like Jetpack Boost, are working harmoniously to achieve the best possible loading speeds and user experience.
I hope this explanation helps clarify why you’re encountering issues with generating critical CSS for your blog and sheds light on the intricacies of how critical CSS generators operate, especially in complex or unique site configurations like yours.
I hope this helps.
Thread Starter
Anonymous User 17976131
(@anonymized-17976131)
I suppose what’s ultimately annoying me here is that I don’t have a way to tell Jetpack to stop bugging me about it. If there’s no critical CSS resolution for that one page, I don’t really care because it’s just the 404 page, but I do care about the hit my OCD (and weirdly a bit of my rejection sensitive dysphoria) takes every time Jetpack basically tells me critical CSS regeneration failed and it’s all my fault.
Hi @bixfrankonis,
I truly appreciate you bringing this issue to our attention. It’s clear this has been a source of significant frustration, and it’s important to us that we work together to find a resolution that not only addresses the technical aspects but also resonates with your expectations for a seamless and orderly site experience.
Understanding the intricacies of how critical CSS generation works, particularly in scenarios involving redirection like with your custom 404 page, can indeed be a complex puzzle. This process, integral to optimizing site performance across many tools, not just Jetpack Boost, relies on direct access to each page’s unique content. When a redirect intervenes, it prevents the tool from doing its job effectively, leading to the challenges you’ve encountered.
With this in mind, considering alternatives for your 404 setup that avoid redirection could be a pathway to harmony between your site’s functionality and the critical CSS process. This adjustment aims to not only mitigate the issue but also align with a smoother operational flow for your site, respecting both its technical needs and your personal comfort.
Alternatively, you might need to leave the Critical CSS feature in Jetpack Boost disabled.
I hope this helps but if there are other questions, please let us know.
