Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
litespeed_wiki:cache:lscwp:configuration:optimize [2018/07/05 20:21] Lisa Clarke Clarified Critical CSS options |
litespeed_wiki:cache:lscwp:configuration:optimize [2018/07/06 13:54] Lisa Clarke [Generate Critical CSS] Proofreading additional content |
||
|---|---|---|---|
| Line 70: | Line 70: | ||
| This option defaults to ''ON'', but it only works if **Load CSS Asynchronously** is also ON. When both settings are enabled, the Critical CSS is generated by LiteSpeed’s remote CCSS server, and then sent back to LSCache. | This option defaults to ''ON'', but it only works if **Load CSS Asynchronously** is also ON. When both settings are enabled, the Critical CSS is generated by LiteSpeed’s remote CCSS server, and then sent back to LSCache. | ||
| - | **Note**: Some themes already generate Critical CSS for you. In that case, you can turn this option OFF. | + | **NOTE 1**: Some themes already generate Critical CSS for you. In that case, you can turn this option OFF. |
| + | **NOTE 2**: To use LiteSpeed's critical CSS generation service, please whitelist ''ccss.api.litespeedtech.com''. | ||
| Once the Critical CSS has been generated, it will be loaded first, and then the rest of the CSS will be loaded asynchronously with the HTML. The page will no longer load without formatting. | Once the Critical CSS has been generated, it will be loaded first, and then the rest of the CSS will be loaded asynchronously with the HTML. The page will no longer load without formatting. | ||
| - | There is one small issue: when your site has not yet had the Critical CSS generated (or after a Purge All), the first visitor to request a page will need to wait for LSCache’s remote CCSS server to generate the styles. That can take a few seconds that the visitor may not be willing to spend. This leads us to the next setting. | + | Here's How it Works: |
| - | + | - A Visitor sends a request to the Client Server | |
| - | **NOTE**: To use LiteSpeed's critical CSS generation service, please whitelist ''ccss.api.litespeedtech.com''. | + | - If there's no Critical CSS, the Client Server will send a Critical CSS request to LiteSpeed's remote Critical CSS (or, CCSS) Server |
| + | - The CCSS server will retrieve content+assets from the Client Server, and then generate Critical CSS | ||
| + | - The CCSS Server then sends the generated Critical CSS back to the Client Server | ||
| + | - The Client Server serves the content with the Critical CSS to the Visitor | ||
| + | |||
| + | There is one small issue: when your site has not yet had the Critical CSS generated (or after a Purge All), the first visitor to request a page will need to wait for the above process to complete before the Critical CSS styles are available. That can take a few seconds that the visitor may not be willing to spend. This leads us to the next setting. | ||
| ===== Generate Critical CSS in the Background ===== | ===== Generate Critical CSS in the Background ===== | ||