This is an old revision of the document!
Why My Page Still Gets Unstyled With Critical CSS (CCSS) Enabled?
Symptom:
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.
Therefore Critical CSS feature is introduced which will insert essential CSS style rules into main page to address unstyled page when loading CSS asynchronously.
But you may also notice why Generate Critical CSS is enabled , the page still gets unstyled.
Cause:
CCSS is not inserted into page.
Possible Explanations:
It will take few seconds to generate CSS, therefore there is an option for CCSS generation on foreground or background.
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:
<style id="litespeed-optm-css-rules"></style>
It is empty , which means CCSS is enabled , but rule is not yet generated/inserted into main page.
Solution:
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.
Please be aware that if you do Purge All you will also purge CCSS cache, try avoid it as much as possible.
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.
Please be aware that same type of pages will share same CCSS.
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.
Verify:
When CCSS is properly inserted , check the source code you will see rules inside of it:
