Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
|
litespeed_wiki:cache:lscwp:troubleshooting:ccss_unstyle [2018/12/13 16:37] Lisa Clarke Copyediting |
litespeed_wiki:cache:lscwp:troubleshooting:ccss_unstyle [2020/05/04 13:51] Shivam Saluja |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Still Seeing FOUC with Critical CSS Enabled ====== | ====== Still Seeing FOUC with Critical CSS Enabled ====== | ||
| + | **Please Note**: This wiki is valid for v2.9.x and below of the LiteSpeed Cache Plugin for WordPress. If you are using v3.0 or above, please see [[https://docs.litespeedtech.com/lscache/lscwp/overview/|the new documentation]]. | ||
| + | |||
| 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''? | 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''? | ||
| Line 32: | Line 34: | ||
| 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. | 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. | ||
| - | |||
| - | Additionally, a **Purge All** not only clears that cache, but also all generated CCSS. So, if you've Purged All recently, your site will experience some FOUC while you wait for the CCSS to be rebuilt for every page type. | ||
| 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. | 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. | ||
| Line 41: | Line 41: | ||
| 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. | 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. Be careful not to do a **Purge All**, as that will clear //everything// including the CCSS. You only want to clear LSCache. | + | 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. |
| {{:litespeed_wiki:cache:lscwp:troubleshooting:ccss4.jpg|}} | {{:litespeed_wiki:cache:lscwp:troubleshooting:ccss4.jpg|}} | ||