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 [2017/10/24 19:45]
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 ==== +====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 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]].
  • Admin
  • Last modified: 2017/10/24 19:45
  • by Lisa Clarke