Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
litespeed_wiki:config:server_push [2020/10/28 11:34] Lisa Clarke [Requirements] added HTTP/3 |
litespeed_wiki:config:server_push [2020/10/28 11:50] (current) Lisa Clarke Added HTTP/3, updated LSCache instructions, other minor edits |
||
|---|---|---|---|
| Line 5: | Line 5: | ||
| - LiteSpeed Enterprise 5.2+ | - LiteSpeed Enterprise 5.2+ | ||
| - [[https://www.litespeedtech.com/products/litespeed-web-server/features/http-2-support/enabling-https | HTTPS]] enabled | - [[https://www.litespeedtech.com/products/litespeed-web-server/features/http-2-support/enabling-https | HTTPS]] enabled | ||
| - | - HTTP/2 supported by the browser (you may also use HTTP/3 for server push, if the browser supports it) | + | - HTTP/2 supported by the browser |
| + | |||
| + | **NOTE**: This article focuses on HTTP/2 server push, but server push may also be used with HTTP/3, assuming the browser supports it. | ||
| ===== Setup and Verification===== | ===== Setup and Verification===== | ||
| - | We are going to introduce how to verify Server Push with WordPress+LScache, and then with Cloudflare. | + | We are going to introduce how to verify Server Push with WordPress+LSCache, and then with Cloudflare. |
| 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. | 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 ==== | ||
| - | - [[https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:common_installation | Server Cache Setup]] | + | - [[litespeed_wiki:cache:common_installation | Server Cache Setup]] |
| - | - [[ https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:installation:wordpress_installation | WordPress Installation]] | + | - [[litespeed_wiki:installation:wordpress_installation | WordPress Installation]] |
| - | - [[ https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:installation | LSCache for WordPress]] | + | - [[litespeed_wiki:cache:lscwp:installation | LSCache for WordPress]] |
| ====Verify Browser Supports HTTP/2 ==== | ====Verify Browser Supports HTTP/2 ==== | ||
| Line 21: | Line 23: | ||
| There are two easy ways to verify your browser has HTTP/2 support: | There are two easy ways to verify your browser has HTTP/2 support: | ||
| - | - Check your browser version against the table at [[http://caniuse.com/#search=http2 | this link]]. \\ {{:litespeed_wiki:config:push-6.png?|}} | + | - Check your browser version against the table at [[http://caniuse.com/#search=http2 | this link]]. (Use [[http://caniuse.com/#search=http3 | this link]] for HTTP/3.) \\ {{: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?|}} | - 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==== | ||
| - | - From the WordPress Dashboard, navigate to **LiteSpeed Cache > Settings > Optimize** | + | - From the WordPress Dashboard, navigate to **LiteSpeed Cache > Page Optimization > CSS Settings** and set **CSS HTTP/2 Push** to ''ON'' |
| - | - Set **CSS HTTP/2 Push** and **JS HTTP/2 Push** to ''ON'' | + | - Switch to the **JS Settings** tab and set **JS HTTP/2 Push** to ''ON'' |
| ====Verify Server Push is Active ==== | ====Verify Server Push is Active ==== | ||
| Line 33: | Line 35: | ||
| * 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?|}} \\ | * 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?|}} \\ | ||
| - | css and js files will show as **Push / Other**: | + | CSS and JS files will show as ''Push / Other'': |
| {{:litespeed_wiki:config:ls_severpush.png?800|}} | {{:litespeed_wiki:config:ls_severpush.png?800|}} | ||
| Line 40: | Line 42: | ||
| 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. \\ | 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/ | Set up CDN from LSCache]] \\ |
| * If you only enabled **CSS HTTP/2 Push**, the response header will look 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 enabled both **CSS HTTP/2 Push** and **JS HTTP/2 Push**, the response header will look 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?|}} \\ | ||