Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
litespeed_wiki:config:server_push [2020/08/13 15:13]
Jackson Zhang
litespeed_wiki:config:server_push [2020/10/28 11:50]
Lisa Clarke Added HTTP/3, updated LSCache instructions, other minor edits
Line 6: Line 6:
   - [[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   - 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 32: Line 34:
   * If you only enabled **CSS HTTP/2 Push**, the response header will look like this: \\ {{:​litespeed_wiki:​config:​push-1.png?​|}} \\   * 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?​|}} \\    * 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==== ====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. \\ 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?​|}} \\
Line 51: Line 57:
 We welcome your feedback on our [[https://​www.litespeedtech.com/​support/​forum/​ | forum]]. We welcome your feedback on our [[https://​www.litespeedtech.com/​support/​forum/​ | forum]].
  
-==== Disable ​''​ls_smartpush'' ​cookie for a particular domain ====+==== 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+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>​   <​IfModule LiteSpeed>​
Line 60: Line 66:
   ​   ​
 {{ :​litespeed_wiki:​config:​ls_smartpush_cookie.png?​800 |}} {{ :​litespeed_wiki:​config:​ls_smartpush_cookie.png?​800 |}}
- 
  
 {{ :​litespeed_wiki:​config:​ls_smartpush_cookie_2.png?​800 |}} {{ :​litespeed_wiki:​config:​ls_smartpush_cookie_2.png?​800 |}}
  
-After you make changes to .htaccess, you will need to restart ​Chrome/​Firefox ​to avoid getting cached version. ​It will look like:+After you make changes to ''​.htaccess''​, you will need to restart ​your browser ​to avoid getting ​cached version. ​After that, you should see something ​like the following:
  
 {{ :​litespeed_wiki:​config:​ls_smartpush_cookie_disable_cookie.png?​800 |}} {{ :​litespeed_wiki:​config:​ls_smartpush_cookie_disable_cookie.png?​800 |}}
  • Admin
  • Last modified: 2020/10/28 11:50
  • by Lisa Clarke