Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
litespeed_wiki:cache:lscwp:configuration:optimize [2018/06/14 19:18]
Lisa Clarke [Generate Critical CSS] added whitelist note
litespeed_wiki:cache:lscwp:configuration:optimize [2018/11/27 20:23]
Lisa Clarke Brought up to date w/v2.7.3
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&​800|}}+{{:​litespeed_wiki:​cache:​lscwp:​lscwp-settings-optimize.png?​direct&​802|}}
 ===== 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 =====
-//off//+//OFF//
  
 All individual CSS files will be combined into a single CSS file. All individual CSS files will be combined into a single CSS file.
  
 ===== CSS HTTP/2 Push ===== ===== CSS HTTP/2 Push =====
-//off//+//OFF//
  
 CSS will be sent to the browser before it is requested. CSS will be sent to the browser before it is requested.
  
 ===== JS Minify ===== ===== JS Minify =====
-//off//+//OFF//
  
 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 =====
-//off//+//OFF//
  
 All individual JS files will be combined into a single JS file. All individual JS files will be combined into a single JS file.
  
 ===== JS HTTP/2 Push ===== ===== JS HTTP/2 Push =====
-//off//+//OFF//
  
 JS will be sent to the browser before it is requested. JS will be sent to the browser before it is requested.
Line 54: Line 44:
  
 ===== HTML Minify ===== ===== HTML Minify =====
-//off//+//OFF//
  
 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 =====
-//off//+//OFF//
  
-Page loading can be delayed while waiting for CSS definitions ​to load. When you load CSS asynchronously, the contents of the page no longer have to wait for CSS to be loaded first. This setting also applies to Google Fonts.+This option defaults ​to ''​OFF''​. When it is OFF, web pages load the normal waywhere the browser loads the CSS from the HTML header before continuing on to display the content in the HTML body.
  
-If you have critical ​CSS styles ​and definitions that must be loaded ​for above-the-fold content, you can specify ​it in the **Critical CSS Rules** box.+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//
  
-**NOTE**: ​**Load CSS Asynchronously** ​must be set to ''​ON''​ for this feature ​to work.+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.
  
-When CSS is set to load asynchronouslyit 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 displayand loads that part first.+**NOTE 1**: Some themes already generate Critical ​CSS for you. In that caseyou can turn this option OFF. 
 +**NOTE 2**: To use LiteSpeed'​s ​critical ​CSS generation serviceplease whitelist ''​ccss.api.litespeedtech.com''​.
  
-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.+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. 
 + 
 +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. 
 + 
 +==== Generate Critical CSS in the Background ​==== 
 +//ON// 
 + 
 +**NOTE**: **Load CSS Asynchronously** must be set to ''​ON''​ for this feature to work. 
 + 
 +This 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: This is what you may see when there are pages waiting in the queue:
Line 81: Line 98:
 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.
  
-**NOTE**: To use LiteSpeed'critical CSS generation serviceplease whitelist ​''​ccss.api.litespeedtech.com''​.+==== Separate CCSS Cache Post Types ==== 
 +By default, one set of Critical CSS is saved for each post type. That is, CCSS for Posts, CCSS for Pages, CCSS for Products (if you have a custom post type called "​Product"​). If you have a post type where every item within that post type has different formatting, then one set of Critical CSS will not due. Add that post type to the box, and Critical CSS will be generated for each item of that post type.  
 + 
 +For example, if every Page on the site has different formatting, enter ''​page''​ in the box. Separate ​critical CSS files will be stored for every Page on the site. 
 + 
 +==== Separate CCSS Cache URIs ==== 
 +If you have pages that don't follow the same formatting rules as the rest of their post typeyou can list the URIs (or partial URIs) for those pages in this box. Separate critical CSS files will be generated for paths containing these strings. The URIs will be compared to the ''​REQUEST_URI''​ server variableFor example, for ''/​mypath/​mypage?​aa=bb'',​ ''​mypage?​aa=''​ can be used here. 
 + 
 +To match the beginning, add ''​^''​ to the beginning of the itemTo do an exact match, add ''​$''​ to the end of the URL. One per line. 
 + 
 +==== Inline CSS Async Lib ==== 
 +//ON// 
 +This will inline the asynchronous CSS library to avoid render blocking. 
 ===== Load JS Deferred ===== ===== Load JS Deferred =====
-//off//+//OFF//
  
 This setting takes all scripts and loads them only after the HTML is finished loading. This setting takes all scripts and loads them only after the HTML is finished loading.
  
 ===== Exclude JQuery ===== ===== Exclude JQuery =====
-//on//+//ON//
  
 This setting excludes JQuery from all of the above optimization measures. It is recommended that this setting remain ''​ON'',​ particularly if you have inline JavaScript. If you are experiencing errors when **JS Combine** is enabled, turning this setting on should eliminate them. This setting excludes JQuery from all of the above optimization measures. It is recommended that this setting remain ''​ON'',​ particularly if you have inline JavaScript. If you are experiencing errors when **JS Combine** is enabled, turning this setting on should eliminate them.
  • Admin
  • Last modified: 2020/11/14 15:20
  • by Lisa Clarke