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/09/24 20:11] Lisa Clarke Updated for 2.6 |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| **Please test these options thoroughly before enabling them on your production site!** | **Please test these options thoroughly before enabling them on your production site!** | ||
| - | {{:litespeed_wiki:cache:lscwp:lscwp-settings-optimize.png?direct&799|}} | + | {{:litespeed_wiki:cache:lscwp:lscwp-settings-optimize.png?direct&800|}} |
| ===== CSS Minify ===== | ===== CSS Minify ===== | ||
| //OFF// | //OFF// | ||
| Extra white space characters, new line characters, and comments will be stripped from all included CSS files, if this option is enabled. | Extra white space characters, new line characters, and comments will be stripped from all included CSS files, if this option is enabled. | ||
| - | |||
| - | ===== Inline CSS Minify ===== | ||
| - | //OFF// | ||
| - | |||
| - | Extra white space characters, new line characters, and comments will be stripped from all inline CSS code on the HTML page, if this option is enabled. | ||
| ===== CSS Combine ===== | ===== CSS Combine ===== | ||
| Line 32: | Line 27: | ||
| Extra white space characters, new line characters, and comments will be stripped from all JS, if this option is enabled. | Extra white space characters, new line characters, and comments will be stripped from all JS, if this option is enabled. | ||
| - | |||
| - | ===== Inline JS Minify ===== | ||
| - | //OFF// | ||
| - | |||
| - | Extra white space characters, new line characters, and comments will be stripped from all inline JS code on the HTML page, if this option is enabled. | ||
| ===== JS Combine ===== | ===== JS Combine ===== | ||
| Line 57: | Line 47: | ||
| Extra white space characters, new line characters, and comments will be stripped from all HTML, if this option is enabled. | Extra white space characters, new line characters, and comments will be stripped from all HTML, if this option is enabled. | ||
| + | |||
| + | ==== Inline CSS Minify ==== | ||
| + | //OFF// | ||
| + | |||
| + | Extra white space characters, new line characters, and comments will be stripped from all inline CSS code on the HTML page, if this option is enabled. | ||
| + | |||
| + | ==== Inline JS Minify ==== | ||
| + | //OFF// | ||
| + | |||
| + | Extra white space characters, new line characters, and comments will be stripped from all inline JS code on the HTML page, if this option is enabled. | ||
| ===== Load CSS Asynchronously ===== | ===== Load CSS Asynchronously ===== | ||
| Line 65: | Line 65: | ||
| When you turn this option ON, CSS and HTML will be loaded at the same time. The page can load more quickly this way, but it may initially load without formatting. To avoid that problem, you will want to generate the Critical CSS and load that first. That is what the next setting is for. | When you turn this option ON, CSS and HTML will be loaded at the same time. The page can load more quickly this way, but it may initially load without formatting. To avoid that problem, you will want to generate the Critical CSS and load that first. That is what the next setting is for. | ||
| - | ===== Generate Critical CSS ===== | + | ==== Generate Critical CSS ==== |
| //ON// | //ON// | ||
| 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 | ||
| + | - 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. | ||
| - | **NOTE**: To use LiteSpeed's critical CSS generation service, please whitelist ''ccss.api.litespeedtech.com''. | + | ==== Generate Critical CSS in the Background ==== |
| - | + | ||
| - | ===== Generate Critical CSS in the Background ===== | + | |
| //ON// | //ON// | ||
| Line 91: | Line 97: | ||
| If **Generate Critical CSS in the Background** is set to ''OFF'', then the critical CSS is generated in the foreground, immediately when the page is requested. This means that the visitor must wait for the critical CSS calculation before continuing to view the page. This has the potential to slow down page load. | If **Generate Critical CSS in the Background** is set to ''OFF'', then the critical CSS is generated in the foreground, immediately when the page is requested. This means that the visitor must wait for the critical CSS calculation before continuing to view the page. This has the potential to slow down page load. | ||
| + | |||
| + | ==== Inline CSS Async Lib ==== | ||
| + | //ON// | ||
| + | This will inline the asynchronous CSS library to avoid render blocking. | ||
| ===== Load JS Deferred ===== | ===== Load JS Deferred ===== | ||