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 12:47]
Eric Leu [Verify browser support HTTP/2]
litespeed_wiki:config:server_push [2017/10/24 19:45] (current)
Lisa Clarke [Verify Browser Supports HTTP/2]
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 is Active ==== 
 +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 enabled ​**CSS HTTP/2 Push**, the response header will look like this: \\ {{:​litespeed_wiki:​config:​push-1.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?​|}} \\ 
  
-====Verify ​Server Push ==== +====Configure CDN to Use Server Push==== 
-We are going to use [[https://developers.google.com/web/​tools/​chrome-devtools/​network-performance/​reference ​Chrome developer tool]] as our verification tool. +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 only enable ''​CSS ​HTTP/2 Push''​. ​Header ​will looks 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?​|}} ​\\ +
  
-====Configure CDN to serve with Server Push==== +Follow this LiteSpeed blog to [[https://​blog.litespeedtech.com/​2017/​10/​11/​wpw-content-delivery-network-support/​ | Setup CDN from LSCache]] \\ 
-Why we use CloudFlare? Cloudflare supports ​HTTP/​2 ​Server ​Push with the Link header ​field on all plan levels. Cloudflare ​will look for the Link header fieldin response headers from the origin server and extract URI-references with parameters rel=preload. These URI will be pushed to the client. \\+  * 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?​|}} ​\\
  
-Follow this blog to [[https://blog.litespeedtech.com/2017/10/11/wpw-content-delivery-network-support/​ | Setup CDN from LSCache]] \\ +==== Alternate Verification Method ==== 
-  * If you only enable ''​CSS ​HTTP/​2 ​Push''​. Header will looks like this: \\ {{:​litespeed_wiki:​config:​push-3.png?​|}} ​\\ +  - Point your browser ​to ''<​nowiki>​chrome://net-internals/#http2</nowiki>''​ 
-  ​* If you enable both ''​CSS HTTP/2 Push'' and ''​JS HTTP/2 Push''​. Header ​will looks like this: \\ {{:​litespeed_wiki:​config:​push-4.png?|}} \\+  ​Refresh your test site 
 +  ​- You will see **HTTP/​2 ​sessions** ​\\ {{:​litespeed_wiki:​config:​push-9.png?|}}  
 +  ​- Click the hyperlink of your test site's ID 
 +  - The **Events** tab will open, and you will see **HTTP2_SESSION**. Enable the checkbox. ​\\ {{:​litespeed_wiki:​config:​push-10.png?​|}} ​ 
 +  - 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 12:47
  • by Eric Leu