Differences

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

--- litespeed_wiki:config:server_push [2017/10/24 12:47]
Eric Leu [Verify browser support HTTP/2]
+++ litespeed_wiki:config:server_push [2020/08/13 15:39]
Jackson Zhang [Verify Server Push is Active]
@@ 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
-===== 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 ====
@@ Line 16: / Line 17: @@
   - [[ 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====
-  - 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?|}} \\
+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/ | Setup 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 ====
+If you want to disable **ls_smartpush** cookie for a particular domain, you can use **SmartPush no-cookie** directive in .htaccess starting from LSWS 5.4.2.
-====Verify Server Push ====
+  <IfModule LiteSpeed>
-We are going to use [[https://developers.google.com/web/tools/chrome-devtools/network-performance/reference | Chrome developer tool]] as our verification tool.
+    SmartPush no-cookie
-  * If you only enable ''CSS HTTP/2 Push''. Header will looks like this: \\ {{:litespeed_wiki:config:push-1.png?|}} \\
+  </IfModule>
-  * If you enable both ''CSS HTTP/2 Push'' and ''JS HTTP/2 Push''. Header will looks like this: \\ {{:litespeed_wiki:config:push-2.png?|}} \\
+{{ :litespeed_wiki:config:ls_smartpush_cookie.png?800 |}}
-====Configure CDN to serve with 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. \\
-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 Chrome/Firefox to avoid getting cached version. It will look like:
+{{ :litespeed_wiki:config:ls_smartpush_cookie_disable_cookie.png?800 |}}