====== 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 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+
  - [[https://www.litespeedtech.com/products/litespeed-web-server/features/http-2-support/enabling-https | HTTPS]] enabled
  - 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=====
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.

====Install WordPress and LSCache ====
  - [[litespeed_wiki:cache:common_installation | Server Cache Setup]]
  - [[litespeed_wiki:installation:wordpress_installation | WordPress Installation]]
  - [[litespeed_wiki:cache:lscwp:installation | LSCache for WordPress]]

====Verify Browser Supports HTTP/2 ====

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]]. (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====
  - From the WordPress Dashboard, navigate to **LiteSpeed Cache > Page Optimization > CSS Settings** and set **CSS HTTP/2 Push** to ''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 ====

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.

  <IfModule LiteSpeed>
    SmartPush no-cookie
  </IfModule>
  
{{ :litespeed_wiki:config:ls_smartpush_cookie.png?800 |}}

{{ :litespeed_wiki:config:ls_smartpush_cookie_2.png?800 |}}

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 |}}