Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
litespeed_wiki:config:server_push [2017/10/23 21:22] Eric Leu [Configure LSCache to use Server Push] |
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 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. |
| ===== 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 HTTP2 | + | - HTTP/2 supported by the browser |
| - | ===== Verification===== | + | ===== Setup and Verification===== |
| - | We are going to introduce how to verify Server Push with WordPress+LScache Site and 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 manually, 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]] | + | - 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==== |
| - | * If you only enable ''CSS HTTP/2 Push''. Header will looks like this: \\ {{:litespeed_wiki:config:push-1.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 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. \\ |
| - | * 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 field, as outlined in RFC 5988, 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 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]]. | ||