Differences

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

--- litespeed_wiki:cache:lscwp:troubleshooting:ccss_unstyle [2018/12/12 22:37]
qtwrk created
+++ litespeed_wiki:cache:lscwp:troubleshooting:ccss_unstyle [2020/05/04 13:51]
Shivam Saluja
@@ Line 1: / Line 1: @@
-======Why My Page Still Gets Unstyled With Critical CSS (CCSS) 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''?
 ===== Symptom:=====
 {{:litespeed_wiki:cache:lscwp:troubleshooting:ccss2.jpg|}}
-When **Load CSS Asynchronously** is enabled , CSS file will be loaded asynchronously, so before CSS file is loaded , web page will be rendered without style, as this screenshot.
+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|}}
-Therefore **Critical CSS** feature is introduced which will insert essential CSS style rules into main page to address unstyled page when loading CSS asynchronously.
+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]].)
-But you may also notice why **Generate Critical CSS** is enabled , the page still gets unstyled.
+Sometimes, though, you may notice unstyled content, even when **Generate Critical CSS** is enabled.
 ===== Cause: =====
-CCSS is not inserted into page.
+FOUC happens when CCSS has not been inserted inline into the HTML of the page.
-===== Possible Explanations: ====
+===== Diagnosis =====
-It will take few seconds to generate CSS, therefore there is an option for CCSS generation on foreground or background.
+When a page renders unstyled, check the source code. You will see something similar to the area marked in red on line 4.
-If it is set to foreground, first page access after purge all will be delayed for few seconds for CCSS generation, in this case it shouldn't behaves as unstyled page.
-If it is set to background, first page access will act as normally after purge all, back CCSS generation will take in place in background which will be inserted next time the page is purged.
-By that means, if you access the page after purge all, CCSS is not yet inserted into main page, you will need to purge LS cache again in order to insert CCSS into main page.
-===== Diagnosis: =====
-When page renders unstyled , check the source code, you will see, as red-line marked in line 4:
 {{:litespeed_wiki:cache:lscwp:troubleshooting:ccss3.jpg|}}
 <code><style id="litespeed-optm-css-rules"></style></code>
-It is empty , which means CCSS is enabled , but rule is not yet generated/inserted into main page.
+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.
-===== Solution: =====
+===== Possible Explanations =====
-First solution: Do a **Purge All - LS Cache** after CCSS rule is generated, so it can be inserted into main page, CCSS can not be inserted into already cached page , so you will have to purge LS Cache.
+So, why wouldn't the CCSS be inserted into the page yet?
-{{:litespeed_wiki:cache:lscwp:troubleshooting:ccss4.jpg|}}
+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 if you do **Purge All** you will also purge CCSS cache, try avoid it as much as possible.
+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 =====
-Second solution: Set CCSS generation to **foreground**, this may cause few seconds (generally 1 - 2 seconds) delay on first access after purge all, but it will not require manual LS cache purge intervention.
+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.
-Please be aware that same type of pages will share same CCSS.
+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.
-For example you have post1, post2 and post3 , when you access post1 , it will be delayed few seconds but it will NOT delay anymore when you access post2 and post3.
+{{:litespeed_wiki:cache:lscwp:troubleshooting:ccss4.jpg|}}
-===== Verify: =====
+===== Verify =====
-When CCSS is properly inserted , check the source code you will see rules inside of it:
+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|}}