Server Push is Supported on LiteSpeed Web Server

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

  1. LiteSpeed Enterprise 5.2+
  2. HTTPS enabled
  3. HTTP/2 supported by the browser

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 this guide to learn how.

Install WordPress and LSCache

Verify Browser Supports HTTP/2

There are two easy ways to verify your browser has HTTP/2 support:

  1. Check your browser version against the table at this link.
  2. Visit the Akamai online tool and let it auto-detect your browser's support.

Configure LSCache to use Server Push

  1. From the WordPress Dashboard, navigate to LiteSpeed Cache > Settings > Optimize
  2. Set CSS HTTP/2 Push and JS HTTP/2 Push to ON

Verify Server Push is Active

We are going to use the Chrome developer tool as our verification tool.

  • If you only enabled CSS HTTP/2 Push, the response header will look like this:

  • If you enabled both CSS HTTP/2 Push and JS HTTP/2 Push, the response header will look like this:

Configure CDN to Use Server Push

Next we'll try it with 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 Setup CDN from LSCache

  • If you only enabled CSS HTTP/2 Push, the response header will look like this:

  • If you enabled both CSS HTTP/2 Push and JS HTTP/2 Push, the response header will look like this:

Alternate Verification Method

  1. Point your browser to chrome://net-internals/#http2
  2. Refresh your test site
  3. You will see HTTP/2 sessions
  4. Click the hyperlink of your test site's ID
  5. The Events tab will open, and you will see HTTP2_SESSION. Enable the checkbox.
  6. Check the HTTP2_SESSION_RECV_HEADERS → link section, which will look like this:
    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>;

We welcome your feedback on our forum.

 
litespeed_wiki/config/server_push.txt · Last modified: 2017/10/24 19:45 by Lisa Clarke