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/24 14:40] 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 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 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 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, 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 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 ''chrome://net-internals/#http2'' | + | - Point your browser to ''<nowiki>chrome://net-internals/#http2</nowiki>'' |
| - Refresh your test site | - Refresh your test site | ||
| - | - You will see \\ {{: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 \\ {{: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?|}} |
| - | - link will contain \\ <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]]. | ||