Differences

This shows you the differences between two versions of the page.

--- litespeed_wiki:config:server_push [2017/10/24 12:36]
Eric Leu [Requirements]
+++ litespeed_wiki:config:server_push [2020/10/28 11:50] (current)
Lisa Clarke Added HTTP/3, updated LSCache instructions, other minor edits
@@ 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 =====
   - 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
+**NOTE**: This article focuses on HTTP/2 server push, but server push may also be used with HTTP/3, assuming the browser supports it.
-===== 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 ====
-  - [[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 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]]. (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?|}}
 ====Configure LSCache to use Server Push====
-  - Navigate to WordPress Control Panel>LSCache>Settings>Optimize tab
+  - 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'' as **On**
+  - Switch to the **JS Settings** tab and set **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?|}} \\
+CSS and JS files will show as ''Push / Other'':
+{{:litespeed_wiki:config:ls_severpush.png?800|}}
+====Configure CDN to Use Server Push====
+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/ | 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 enabled both **CSS HTTP/2 Push** and **JS HTTP/2 Push**, the response header will look like this: \\ {{:litespeed_wiki:config:push-4.png?|}} \\
+==== Alternate Verification Method ====
+  - Point your browser to ''<nowiki>chrome://net-internals/#http2</nowiki>''
+  - 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]].
+==== Disable ls_smartpush cookie for a particular domain ====
-====Verify Server Push ====
+If you want to disable the ''ls_smartpush'' cookie for a particular domain, you can use the ''SmartPush no-cookie'' directive in ''.htaccess'' starting from LSWS v5.4.2.
-  * 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====
+  <IfModule LiteSpeed>
-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. \\
+    SmartPush no-cookie
+  </IfModule>
+{{ :litespeed_wiki:config:ls_smartpush_cookie.png?800 |}}
-Follow this blog to [[https://blog.litespeedtech.com/2017/10/11/wpw-content-delivery-network-support/ | Setup CDN from LSCache]] \\
+{{ :litespeed_wiki:config:ls_smartpush_cookie_2.png?800 |}}
-  * If you only enable ''CSS HTTP/2 Push''. Header will looks 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?|}} \\
+After you make changes to ''.htaccess'', you will need to restart your browser to avoid getting a cached version. After that, you should see something like the following:
+{{ :litespeed_wiki:config:ls_smartpush_cookie_disable_cookie.png?800 |}}