Differences

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

--- litespeed_wiki:cache:lscwp:configuration:optimize [2018/06/12 17:54]
Lisa Clarke [Load CSS Asynchronously] Added placeholder for Generate Critical CSS
+++ litespeed_wiki:cache:lscwp:configuration:optimize [2018/06/14 19:18]
Lisa Clarke [Generate Critical CSS] added whitelist note
@@ Line 66: / Line 66: @@
 ===== Generate Critical CSS =====
+//ON//
-//Coming Soon//
+**NOTE**: **Load CSS Asynchronously** must be set to ''ON'' for this feature to work.
+When CSS is set to load asynchronously, it can cause some content to be loaded before the browser knows how to display it. For this reason, whenever **Load CSS Asynchronously** is enabled, LSCache figures out what CSS is critical to the current display, and loads that part first.
+This **Generate Critical CSS in the Background** setting determines whether that calculation is done in the foreground, or in the background. This is ''ON'' by default. That means it is a background function, and uses a cron-based queue. When a page is viewed, if there is no critical CSS defined for that page type, a request is added to the queue, and the page continues loading without waiting.
+This is what you may see when there are pages waiting in the queue:
+{{:litespeed_wiki:cache:lscwp:lscwp-settings-optimize2.png?direct&800|}}
+If your cron is disabled (or you are impatient) you can press the **Run Queue Manually** button to hurry the process along.
+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.
+**NOTE**: To use LiteSpeed's critical CSS generation service, please whitelist ''ccss.api.litespeedtech.com''.
 ===== Load JS Deferred =====
 //off//