Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
litespeed_wiki:cache:lscwp:troubleshooting:ccss_unstyle [2019/08/23 00:10]
qtwrk [Possible Explanations] 		litespeed_wiki:cache:lscwp:troubleshooting:ccss_unstyle [2020/11/14 15:42] (current)
Lisa Clarke Redirect to new Documentation Site
Line 1: Line 1:
-====== Still Seeing FOUC with Critical CSS Enabled ====== +~~REDIRECT>​https://docs.litespeedtech.com/​lscache/lscwp/ts-optimize/~~
-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''?​ +
- +
-===== Symptom:​===== +
-{{:​litespeed_wiki:​cache:​lscwp:​troubleshooting:​ccss2.jpg|}} +
- +
-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. +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​troubleshooting:​ccss1.jpg|}} +
- +
-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, [[https://blog.litespeedtech.com/​2018/06/​20/​critical-css-and-litespeed-cache/​|on our blog]].)  +
- +
-Sometimes, though, you may notice unstyled content, even when **Generate Critical CSS** is enabled. +
- +
-===== Cause: ===== +
- +
-FOUC happens when CCSS has not been inserted inline into the HTML of the page. +
- +
-===== Diagnosis ===== +
- +
-When a page renders unstyled, check the source code. You will see something similar to the area marked in red on line 4. +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​troubleshooting:​ccss3.jpg|}} +
- +
-<​code><​style id="​litespeed-optm-css-rules"><​/style></​code>​ +
- +
-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. +
- +
-===== Possible Explanations ===== +
- +
-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. +
- +
-===== Solutions ===== +
- +
-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. +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​troubleshooting:​ccss4.jpg|}} +
- +
-===== Verify ===== +
- +
-When CCSS is properly inserted, you will see the rules inserted between the ''<​style>''​ tags, as shown by the red line below: +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​troubleshooting:​ccss5.jpg|}} +
- +
  • Admin
  • Last modified: 2019/08/23 00:10
  • by qtwrk