Troubleshooting Critical CSS in Jetpack Boost

If you encounter an error indicating that Critical CSS isn’t generating as expected, it’s crucial to identify the specific problem based on the error message received.

To check if Critical CSS is working, you can view your page source and look for this line:

<style id="jetpack-boost-critical-css">

To view the page source, right-click anywhere on your site and select View Page Source (or press Ctrl+U / Cmd+U on your keyboard).

If you see that line, Jetpack Boost has successfully added Critical CSS to your site. If it’s missing or if something doesn’t look right, check the troubleshooting page.

Redirect Error

This error occurs when Jetpack Boost is directed to a new URL during Critical CSS generation. This can be caused by:

• Maintenance mode plugins which redirect to a “coming soon” page.
• Consent management plugins which redirect to a consent page.
• URL-rewriting plugins strip GET arguments, resulting in incorrect URLs.

Potential solutions:

1. Ensure URLs are correctly set, and no unintended redirects are in place.
2. Temporarily disable maintenance mode plugins to see if the issue is resolved.
3. Configure consent management plugins to allow Jetpack Boost to access the required pages.
4. Adjust URL-rewriting plugin settings to prevent altering target URLs.
5. If the redirection is due to standard HTTP 301/302 redirects, it may be necessary to accept that Critical CSS can’t be generated for those pages.

If the redirection is due to standard HTTP 301/302 redirects, it may be necessary to accept that Critical CSS can’t be generated for those pages.

HTTP Errors

When generating Critical CSS, Jetpack Boost may encounter various HTTP errors. Each error indicates a specific issue that needs to be addressed. Below are the common HTTP errors you might encounter, along with their causes and potential solutions to help you resolve them effectively.

HTTP Error 401, 403

This error indicates a permission issue on your WordPress site.

Potential solutions for HTTP 401/403 errors:

1. Check your WordPress settings or contact your hosting provider to ask why the URL is unavailable.
2. Ensure the page is not private and accessible. To do that, open the link in “Incognito Mode” or “Private Browsing” and make sure it loads as expected when you are not logged in.

HTTP Error 404

This error indicates that the requested URL does not exist.

Potential solutions for HTTP 404 error:

1. Confirm that the page loads successfully.
2. If the page shows an error, ensure that it is part of your WordPress site and published.
3. Try visiting the link using “Incognito Mode” or “Private Browsing” to check if the error occurs when you are not logged in.
4. If you see an error only when not logged in (i.e., in “Incognito Mode”), check for plugins that might be enforcing access permissions on your pages, such as those allowing only authenticated users to view specific areas.

HTTP Error 418 – I’m a Teapot

This is typically used to indicate a request has been rejected due to security rules.

Potential solutions for HTTP 418 error:

1. Contact your hosting provider with details of the issue, mentioning the HTTP 418 error, affected URL(s), and time of occurrence.
2. Your hosting provider should advise you on the next steps.

HTTP Error 500 – Internal Server Error

This indicates a server-side error preventing the request from being fulfilled.

Potential solution for HTTP 500 error:

Contact your hosting and ask to check your server logs for detailed error messages.

Cross Domain Error

This occurs when the page is hosted on a different domain, and the server’s security settings prevent it from being accessed or loaded from outside its own domain.

Potential solution for Cross Domain Error: 

Visit the page and check the protocol and hostname to ensure they match those in your WordPress Administration Screen. For example: In http://jetpack.com, the http is Protocol, and jetpack.com is Hostname

Couldn’t verify page (UrlVerifyError)

For Critical CSS to work properly, Boost tries to include a meta tag to the site during critical CSS generation in order to verify the page. If for some reason it fails to add the meta tag, it will return this error.

Potential solutions for Couldn’t Verify Page error: 

1. The most frequent reasons for this are plugins with maintenance mode turned on and pages that are behind some form of authentication (like a login form).
2. Make sure you can still access the page when you are not logged in.
3. If you can, but you still get this error, there may be some form of caching that is preventing Boost from adding the meta generation tag.

Failed to generate Critical CSS

This is a general error that can appear for different reasons. Check the specific error message shown in your Boost dashboard or site logs to identify what’s going wrong.

No relevant CSS found in external stylesheets

Boost relies on external CSS files to generate Critical CSS. If your page doesn’t load any, Boost cannot extract the necessary styles. You may be using an optimization plugin that inlines all CSS instead of loading it from external files.

What to do: You can safely ignore this message if the site is already using inline CSS for performance.

Connection or access issue

Sometimes, Boost fails to reach your site or is blocked from loading pages properly.

Potential solutions:

• Make sure the website does not load over both HTTP and HTTPS. To fix, direct all website traffic to HTTPS. Your host can help with this, or use a plugin like Really Simple SSL.
• Check that there are no redirects from the home page, such as from https://testsite.com to https://testsite.com/en. Your host can assist with unwanted redirects.
• Confirm the site is live and publicly viewable. “Coming Soon” and “Under Construction” pages will prevent Jetpack from generating critical CSS.
• If you’ve confirmed all of the above and still see a failure, a plugin conflict might be the cause. Conflicting plugins can interfere with the Jetpack connection or block required styles from loading properly. To test for this, follow the plugin conflict test guide.

Potential Conflicts with Other Performance Plugins

Conflicts can occur when another performance or caching plugin — such as LiteSpeed Cache — modifies how CSS is loaded or optimized. These changes may interfere with Jetpack Boost’s Critical CSS generation and cause layout problems, especially after updating the plugin or theme.

Potential solutions:

• Temporarily disable the Optimize CSS Loading feature from Jetpack → Boost. If the layout returns to normal, the issue may be caused by a conflict with another plugin’s CSS optimizations.
• If you’re using LiteSpeed Cache, go to LiteSpeed Cache → Page Optimization → CSS Settings, and disable the Load CSS Asynchronously option.
• As an alternative, consider keeping Jetpack Boost’s CSS optimization off and using your caching plugin’s optimization features instead — or vice versa.
• You can also try excluding certain stylesheets or classes from optimization in your other plugin, if supported.

If you’re unsure which plugin is causing the issue, disable them one by one and retest the layout each time.

Load Timeout Error

This might happen because of a redirect loop that might be caused by a misconfiguration of the server or some plugin (or custom code) misbehaving. We’ve also seen instances of ads taking too long to load and Boost times out while waiting for them.

Potential solutions for Load Timeout error:

1. Clear the cache in your browser to ensure Boost loads the most recent version of the page.
2. Visit the page while not logged into WordPress to see if the issue persists.
3. Check how long it takes for this page to load compared to other pages on your site.
4. If this page is slower than others, identify which plugins are active on that page.
5. Deactivate any plugins that you believe are causing the page to load slowly.

XFrameDeny Error

Jetpack Boost uses iframes to generate your critical CSS. This error occurs when the site has a special configuration header that prevents it from loading inside an iframe. The header is called X-Frame-Options: DENY. This can be added to a WordPress site either by a plugin or by server configuration.

Potential solutions for XFrameDeny Error:

1. Ensure you are not using any plugins that add extra HTTP headers to your WordPress site, and deactivate them if you are.
2. If you are unsure what these headers are, or where they come from, please contact your hosting provider and ask them to remove the X-Frame-Options header from your site.

InvalidURL Error

Jetpack Boost found one or more invalid URLs while trying to generate Critical CSS. Please note, that it’s sometimes okay to ignore such URLs. There are many reasons why this can happen, so it’s hard to provide a solution that works every time.

Potential solutions for InvalidURL Error:

1. Make sure any custom rewrites you have on your website are working properly.
2. There might be a plugin active that’s causing one or more URLs to become invalid. Go through the list of plugins and deactivate such plugins until the problem is resolved.

Provider Error

This happens when something prevents Jetpack Boost from saving the Critical CSS that it generated for a specific group of pages. This is most often because of a Web Application Firewall (WAF), or a security plugin blocking the request.

Potential solutions to the Provider Error:

1. See if you have any security plugins and disable them. After that, check if generation works by running it again. If it works, see if you can add an exclude rule in the security plugin for URLs containing set-provider-css.
2. If you do not have security plugins installed, your hosting’s WAF might be blocking the request. You can check this by running this curl command in a terminal/command prompt (make sure to replace https://website.com/ with your website’s URL):
   curl --location 'https://website.com/' \ --data '<svg xmlns'
3. If the above command shows Forbidden, you’ll need to contact your hosting provider and ask them to unblock the request.

Broken generation library

This is unlikely to happen, but we have a case if it does. If Boost’s critical CSS generation library somehow gets corrupted or some other plugin is interfering, this error will show up.

Potential solutions for Broken generation library error:

1. Toggle the module off and on to see if the error persists.
2. If it persists, reinstall Jetpack Boost to make sure that all its files are okay.
3. If reinstalling doesn’t help, it’s possible that some other plugin is causing a conflict. In that case, disable the plugins one by one until the problem is resolved.

Expected an associative array, received ‘NULL’

This error can appear when Boost fails to generate Critical CSS due to a server-side issue during the request.

Potential solution for ‘NULL’ error:

• This may be caused by a misconfiguration or problem with your host’s Memory Node.
• Reach out to your hosting provider and ask them to check if the Memory Node is working properly.
• If you’ve recently installed or updated plugins, or if Boost previously worked fine, a temporary server issue might be the cause.
• If you’re using Cloudflare, try temporarily disabling it to see if that resolves the error.

Once the server issue is resolved, you should be able to regenerate Critical CSS successfully.

PayloadTooLargeError

This error appears when the generated Critical CSS exceeds 1MB. Quite often, this happens on pages that are built using page builder plugins.

If Jetpack Boost were to include the Critical CSS, that would make the page heaver and actually slow it down. As a result, it’s intentionally not included. It’s even not saved on your website.

Potential solutions for PayloadTooLargeError:

1. See if you can update your pages to share the same blocks.

By having pages share the same layout, you make sure that the generated Critical CSS will be smaller.

If sharing the same blocks isn’t an option and the layout of the pages is too unique, then you can’t take advantage of the Critical CSS feature on the pages in that group.

Unknown Error

This occurs when an unexpected error occurs while trying to generate Critical CSS for the specified page. Jetpack Boost did not anticipate this issue.

Potential solutions for Unknown Error:

1. Open the URL to check if the page loads correctly.
2. Ensure the page is loading without any errors or issues.
3. If the page loads correctly but Critical CSS still fails, please contact us so we can investigate further.

By identifying the specific issue based on the error message and following these solutions, you can address common problems with Jetpack Boost’s Critical CSS feature, ensuring your site loads efficiently and provides an optimal user experience.