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:config:server_push [2017/10/24 15:03]
Eric Leu [Configure CDN to serve with Server Push]
litespeed_wiki:config:server_push [2017/10/24 19:04]
Lisa Clarke [Verify Server Push is active]
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
  
-===== 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 ====
Line 16: Line 17:
   - [[ https://​www.litespeedtech.com/​support/​wiki/​doku.php/​litespeed_wiki:​cache:​lscwp:​installation | LSCache for WordPress]]   - [[ https://​www.litespeedtech.com/​support/​wiki/​doku.php/​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]].\\ 
 + {{:​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 > Settings > Optimize** 
-  - Set ''​CSS HTTP/2 Push'' ​and ''​JS HTTP/2 Push''​ as **On**+  - Set **CSS HTTP/2 Push** and **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?​|}} \\ 
  
-====Configure CDN to serve with Server Push==== +====Configure CDN to use Server Push==== 
-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. \\+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 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]] \\ Follow this LiteSpeed blog to [[https://​blog.litespeedtech.com/​2017/​10/​11/​wpw-content-delivery-network-support/​ | Setup CDN from LSCache]] \\
-  * If you only enable ''​CSS HTTP/2 Push''​. Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-3.png?​|}} \\ +  * If you only enabled **CSS HTTP/2 Push**, the response header ​will look like this: \\ {{:​litespeed_wiki:​config:​push-3.png?​|}} \\ 
-  * If you enable ​both ''​CSS HTTP/2 Push'' ​and ''​JS HTTP/2 Push''​. Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-4.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?​|}} \\
  
-====Other method to verify ​==== +==== Alternate Verification Method ​==== 
-  - Enter browser ​with <​nowiki>​chrome://​net-internals/#​http2 </​nowiki>​+  - 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 will contain ​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]].
  • Admin
  • Last modified: 2017/10/24 19:45
  • by Lisa Clarke