Still Seeing FOUC with Critical CSS Enabled

Enabling the Generate Critical CSS (CCSS) feature is supposed to eliminate Flash of Unstyled Content (FOUC), so why do you sometimes still see it, even though the setting is configured to ON?

When Load CSS Asynchronously is enabled, your site's CSS will be loaded asynchronously with the HTML. So any content that is loaded before the relevant CSS will be rendered without style, as in this screenshot.

The Generate Critical CSS feature is intended to stop this behavior. It inserts essential CSS style rules inline into the page HTML, so that those rules are executed before the content loads. (You can learn more about how this works, on our blog.)

Sometimes, though, you may notice unstyled content, even when Generate Critical CSS is enabled.

FOUC happens when CCSS has not been inserted inline into the HTML of the page.

When a page renders unstyled, check the source code. You will see something similar to the area marked in red on line 4.

<style id="litespeed-optm-css-rules"></style>

The <style> tags are there, but they are empty, which means CCSS is enabled, but the rule is not yet generated/inserted into the page.

So, why wouldn't the CCSS be inserted into the page yet?

It takes a few seconds to generate Critical CSS, and if you have set Generate Critical CSS in the Background to ON, LSCache adds the page to a cron-based queue so that the CCSS may be calculated later. As a result, there may be times when the page is loaded before the CCSS is available, and this leads to FOUC.

Please be aware that same types of pages share the same CCSS. For example, if you have post1, post2 and post3, when you access post1, CCSS will be generated. That CCSS will then be there and ready to use when post2 and post3 are accessed.

The simplest solution is to set Generate Critical CSS in the Background to OFF. Generating CCSS in the foreground does require the first visitor to wait a few seconds, but it eliminates the FOUC problem.

Otherwise, try a Purge All - LSCache after the CCSS rules are generated. This will allow LSCache to insert CCSS into pages that had been already cached before the CCSS was generated.

When CCSS is properly inserted, you will see the rules inserted between the <style> tags, as shown by the red line below: