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
litespeed_wiki:config:server_push [2017/10/24 17:46]
Eric Leu [Other method to verify]
litespeed_wiki:config:server_push [2020/10/28 11:50] (current)
Lisa Clarke Added HTTP/3, updated LSCache instructions, other minor edits
Line 1: Line 1:
-====== Server Push supported ​on LiteSpeed Web Server ====== +====== Server Push is Supported ​on LiteSpeed Web Server ====== 
-[[https://​en.wikipedia.org/​wiki/​HTTP/​2_Server_Push | Server Push ]] is a method of information delivery ​where a server pushes a resource directly to the client without first receiving a request to do so. By doing this the server can attempt to anticipate client requests and pre-push them into the client’s cache in an effort to avoid the usual request-response round trip delay.+[[https://​en.wikipedia.org/​wiki/​HTTP/​2_Server_Push | Server Push ]] is a method of information delivery ​whereby ​a server pushes a resource directly to the client without first receiving a request to do so. By doing thisthe server can attempt to anticipate client requests and pre-push them into the client’s cache in an effort to avoid the usual request-response round trip delay.
  
 ===== Requirements ===== ===== Requirements =====
   - LiteSpeed Enterprise 5.2+   - LiteSpeed Enterprise 5.2+
-  - Site use [[https://​www.litespeedtech.com/​products/​litespeed-web-server/​features/​http-2-support/​enabling-https | HTTPS]] +  - [[https://​www.litespeedtech.com/​products/​litespeed-web-server/​features/​http-2-support/​enabling-https | HTTPS]] ​enabled 
-  - Browser support ​HTTP/​2 ​+  - HTTP/​2 ​supported by the browser 
 +  
 +**NOTE**: This article focuses on HTTP/2 server push, but server push may also be used with HTTP/3, assuming the browser supports it.
  
-===== Verification===== +===== Setup and Verification===== 
-We are going to introduce how to verify Server Push with WordPress+LScache Site then with CloudClare+We are going to introduce how to verify Server Push with WordPress+LSCache, and then with Cloudflare. 
-If you want to try server push and file making ​by yourself, please ​refer [[https://​www.smashingmagazine.com/​2017/​04/​guide-http2-server-push/​ |Server Push]].+ 
 +If you would like to try server push and file making ​from scratch, please ​see [[https://​www.smashingmagazine.com/​2017/​04/​guide-http2-server-push/​ |this guide]] to learn how.
  
 ====Install WordPress and LSCache ==== ====Install WordPress and LSCache ====
-  - [[https://​www.litespeedtech.com/​support/​wiki/​doku.php/​litespeed_wiki:​cache:​common_installation | Server Cache Setup]] +  - [[litespeed_wiki:​cache:​common_installation | Server Cache Setup]] 
-  - [[ https://​www.litespeedtech.com/​support/​wiki/​doku.php/​litespeed_wiki:​installation:​wordpress_installation | WordPress Installation]] +  - [[litespeed_wiki:​installation:​wordpress_installation | WordPress Installation]] 
-  - [[ https://​www.litespeedtech.com/​support/​wiki/​doku.php/​litespeed_wiki:​cache:​lscwp:​installation | LSCache for WordPress]]+  - [[litespeed_wiki:​cache:​lscwp:​installation | LSCache for WordPress]]
  
 +====Verify Browser Supports HTTP/2 ====
  
-====Verify ​browser ​support ​HTTP/​2 ​==== +There are two easy ways to verify your browser ​has HTTP/​2 ​support: 
-  ​Check [[http://​caniuse.com/#​search=http2 | browser version]] \\ {{:​litespeed_wiki:​config:​push-6.png?​|}} + 
-  ​* We can verify browser support HTTP/2 simply by visiting ​[[ https://​http2.akamai.com/​demo | Akamai online tool]] \\ {{:​litespeed_wiki:​config:​push-7.png?​|}}+  ​Check your browser version against the table at [[http://​caniuse.com/#​search=http2 | this link]]. (Use [[http://​caniuse.com/#​search=http3 | this link]] for HTTP/​3.) ​\\ {{:​litespeed_wiki:​config:​push-6.png?​|}} 
 +  ​- Visit the [[ https://​http2.akamai.com/​demo | Akamai online tool]] ​and let it auto-detect your browser'​s support. ​\\ {{:​litespeed_wiki:​config:​push-7.png?​|}}
    
 ====Configure LSCache to use Server Push==== ====Configure LSCache to use Server Push====
-  - Navigate to WordPress ​Control Panel>LSCache>​Settings>​Optimize tab +  - From the WordPress ​Dashboard, navigate to **LiteSpeed Cache Page Optimization ​CSS Settings** and set **CSS HTTP/2 Push** to ''​ON''​ 
-  - Set ''​CSS HTTP/2 Push'' ​and ''​JS HTTP/2 Push''​ as **On**+  - Switch to the **JS Settings** tab and set **JS HTTP/2 Push** ​to ''​ON''​
  
-====Verify Server Push ==== +====Verify Server Push is Active ​==== 
-We are going to use [[https://​developers.google.com/​web/​tools/​chrome-devtools/​network-performance/​reference | Chrome developer tool]] as our verification tool. +We are going to use the [[https://​developers.google.com/​web/​tools/​chrome-devtools/​network-performance/​reference | Chrome developer tool]] as our verification tool. 
-  * If you only enable ''​CSS HTTP/2 Push''​. Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-1.png?​|}} \\ +  * If you only enabled **CSS HTTP/2 Push**, the response header ​will look like this: \\ {{:​litespeed_wiki:​config:​push-1.png?​|}} \\ 
-  * If you enable ​both ''​CSS HTTP/2 Push'' ​and ''​JS HTTP/2 Push''​. Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-2.png?​|}} \\ +  * If you enabled ​both **CSS HTTP/2 Push** and **JS HTTP/2 Push**, the response header ​will look like this: \\ {{:​litespeed_wiki:​config:​push-2.png?​|}} \\  
 +  
 +CSS and JS files will show as ''​Push / Other'':​
  
-====Configure CDN to serve with Server Push==== +{{:litespeed_wiki:​config:​ls_severpush.png?800|}}
-Why we verify with [[https://www.cloudflare.com/ ​CloudFlare]]?​ Cloudflare supports HTTP/2 Server Push with the Link header field on all plan levels. Cloudflare will look for the Link header field, in response headers from the origin server and extract URI-references with parameters ''​rel=preload''​. These URI will be pushed to the client. \\+
  
-Follow this LiteSpeed blog to [[https://blog.litespeedtech.com/​2017/​10/​11/​wpw-content-delivery-network-support/ | Setup CDN from LSCache]] \\ +====Configure CDN to Use Server Push==== 
-  * If you only enable ''​CSS ​HTTP/2 Push''​. ​Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-3.png?​|}} \\ +Next we'll try it with [[https://www.cloudflare.com/ | Cloudflare]]. Cloudflare supports ​HTTP/​2 ​Server ​Push with the ''​link''​ header field on all plan levelsCloudflare ​will look for the ''​link'' ​header field, in response headers from the origin server ​and extract URI-references with parameters ​''​rel=preload''​. ​These URI will be pushed to the client. \\
-  * If you enable both ''​CSS HTTP/2 Push''​ and ''​JS HTTP/2 Push''​. ​Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-4.png?​|}} ​\\+
  
-====Other method to verify ​==== +Follow this LiteSpeed blog to [[https://​blog.litespeedtech.com/​2017/​10/​11/​wpw-content-delivery-network-support/​ | Set up CDN from LSCache]] \\ 
-  - Enter browser ​with <​nowiki>​chrome://​net-internals/#​http2 </​nowiki>​+  * If you only enabled **CSS HTTP/2 Push**, the response header will look like this: \\ {{:​litespeed_wiki:​config:​push-3.png?​|}} \\ 
 +  * If you enabled both **CSS HTTP/2 Push** and **JS HTTP/2 Push**, the response header will look like this: \\ {{:​litespeed_wiki:​config:​push-4.png?​|}} \\ 
 + 
 +==== Alternate Verification Method ​==== 
 +  - Point your browser ​to ''​<​nowiki>​chrome://​net-internals/#​http2</​nowiki>​''​
   - Refresh your test site   - Refresh your test site
-  - You will see HTTP/2 sessions \\ {{:​litespeed_wiki:​config:​push-9.png?​|}}  +  - You will see **HTTP/2 sessions** \\ {{:​litespeed_wiki:​config:​push-9.png?​|}}  
-  - Click hyperlink of ID +  - Click the hyperlink of your test site'​s ​ID 
-  - You will see Events of HTTP2_SESSION \\ {{:​litespeed_wiki:​config:​push-10.png?​|}}  +  - The **Events** tab will open, and you will see **HTTP2_SESSION**. Enable the checkbox. ​\\ {{:​litespeed_wiki:​config:​push-10.png?​|}}  
-  - Check HTTP2_SESSION_RECV_HEADERS -> link, which content ​will like this \\ <​code>​rel=preload;​ as=style,</​wordpress/​wp-content/​plugins/​litespeed-cache/​css/​litespeed.css>;​ rel=preload;​ as=style,</​wordpress/​wp-includes/​js/​admin-bar.min.js>;</​code>​+  - Check the **HTTP2_SESSION_RECV_HEADERS -> link** section, which will look like this\\ <​code>​rel=preload;​ as=style,</​wordpress/​wp-content/​plugins/​litespeed-cache/​css/​litespeed.css>;​ rel=preload;​ as=style,</​wordpress/​wp-includes/​js/​admin-bar.min.js>;</​code>​ 
 + 
 + 
 +We welcome your feedback on our [[https://​www.litespeedtech.com/​support/​forum/​ | forum]]. 
 + 
 +==== Disable ls_smartpush cookie for a particular domain ==== 
 + 
 +If you want to disable the ''​ls_smartpush''​ cookie for a particular domain, you can use the ''​SmartPush no-cookie''​ directive in ''​.htaccess''​ starting from LSWS v5.4.2. 
 + 
 +  <​IfModule LiteSpeed>​ 
 +    SmartPush no-cookie 
 +  </​IfModule>​ 
 +   
 +{{ :​litespeed_wiki:​config:​ls_smartpush_cookie.png?​800 |}} 
 + 
 +{{ :​litespeed_wiki:​config:​ls_smartpush_cookie_2.png?​800 |}} 
 + 
 +After you make changes to ''​.htaccess'',​ you will need to restart your browser to avoid getting a cached version. After that, you should see something like the following:
  
 +{{ :​litespeed_wiki:​config:​ls_smartpush_cookie_disable_cookie.png?​800 |}}
  • Admin
  • Last modified: 2017/10/24 17:46
  • by Eric Leu