Welcome to Centmin Mod Community
Register Now

Nginx Hurray! HTTP/2 server push for NGINX

Discussion in 'Nginx and PHP-FPM news & discussions' started by buik, Jun 7, 2017.

  1. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
    Last edited: Jun 7, 2017
  2. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    woah... music to my hears ... happy as pig in mud :D

    so far so good for compilation part https://community.centminmod.com/th...ch-support-via-nginx_httppush-variable.11911/

    Also examples posted at https://github.com/ghedo/http2-push-nginx-module/tree/master/examples
    Code (Text):
            http2_server_push on;
            add_header HTTP2-Pushed $http2_pushed;
    
            location / {
                return 304 "";
    
                http2_push_path "/hello";
                http2_push_path "/fail";
            }
    
     
    Last edited: Jun 7, 2017
  3. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
  4. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Quick play not sure if I am doing it right yet but not seeing the PUSH_PROMISE frame in my private Centmin Mod Nginx HTTP/2 demo I setup yet. If i test against Cloudflare's blog I can see the PUSH_PROMISE frame i.e. stream_id=13 below so I know my nghttp2 client is working
    Code (Text):
    nghttp --version
    nghttp nghttp2/1.24.0-DEV
    

    Code (Text):
    nghttp -nav https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
    

    Code (Text):
    nghttp -nav https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
    [  0.087] Connected
    The negotiated protocol: h2
    [  0.123] send SETTINGS frame <length=12, flags=0x00, stream_id=0>
              (niv=2)
              [SETTINGS_MAX_CONCURRENT_STREAMS(0x03):100]
              [SETTINGS_INITIAL_WINDOW_SIZE(0x04):65535]
    [  0.123] send PRIORITY frame <length=5, flags=0x00, stream_id=3>
              (dep_stream_id=0, weight=201, exclusive=0)
    [  0.123] send PRIORITY frame <length=5, flags=0x00, stream_id=5>
              (dep_stream_id=0, weight=101, exclusive=0)
    [  0.123] send PRIORITY frame <length=5, flags=0x00, stream_id=7>
              (dep_stream_id=0, weight=1, exclusive=0)
    [  0.123] send PRIORITY frame <length=5, flags=0x00, stream_id=9>
              (dep_stream_id=7, weight=1, exclusive=0)
    [  0.123] send PRIORITY frame <length=5, flags=0x00, stream_id=11>
              (dep_stream_id=3, weight=1, exclusive=0)
    [  0.123] send HEADERS frame <length=79, flags=0x25, stream_id=13>
              ; END_STREAM | END_HEADERS | PRIORITY
              (padlen=0, dep_stream_id=11, weight=16, exclusive=0)
              ; Open new stream
              :method: GET
              :path: /announcing-support-for-http-2-server-push-2/
              :scheme: https
              :authority: blog.cloudflare.com
              accept: */*
              accept-encoding: gzip, deflate
              user-agent: nghttp2/1.24.0-DEV
    [  0.123] recv SETTINGS frame <length=18, flags=0x00, stream_id=0>
              (niv=3)
              [SETTINGS_MAX_CONCURRENT_STREAMS(0x03):128]
              [SETTINGS_INITIAL_WINDOW_SIZE(0x04):65536]
              [SETTINGS_MAX_FRAME_SIZE(0x05):16777215]
    [  0.123] recv WINDOW_UPDATE frame <length=4, flags=0x00, stream_id=0>
              (window_size_increment=2147418112)
    [  0.123] send SETTINGS frame <length=0, flags=0x01, stream_id=0>
              ; ACK
              (niv=0)
    [  0.139] recv SETTINGS frame <length=0, flags=0x01, stream_id=0>
              ; ACK
              (niv=0)
    [  0.270] recv (stream_id=13) :status: 200
    [  0.270] recv (stream_id=13) date: Wed, 07 Jun 2017 15:27:49 GMT
    [  0.270] recv (stream_id=13) content-type: text/html; charset=utf-8
    [  0.270] recv (stream_id=13) set-cookie: __cfduid=d7a15dc6dd9f2488181fbc561b3c1b57d1496849269; expires=Thu, 07-Jun-18 15:27:49 GMT; path=/; domain=.cloudflare.com; HttpOnly
    [  0.270] recv (stream_id=13) x-powered-by: Express
    [  0.270] recv (stream_id=13) cache-control: public, max-age=30
    [  0.270] recv (stream_id=13) link: <//cdn.bizible.com/scripts/bizible.js>; rel=preload; as=script,<//platform.linkedin.com/in.js>; rel=preload; as=script,<https://code.jquery.com/jquery-1.11.3.min.js>; rel=preload; as=script
    [  0.270] recv (stream_id=13) vary: Accept-Encoding
    [  0.270] recv (stream_id=13) x-ghost-cache-status: From Cache
    [  0.270] recv (stream_id=13) cf-cache-status: EXPIRED
    [  0.270] recv (stream_id=13) expires: Wed, 07 Jun 2017 15:28:19 GMT
    [  0.270] recv (stream_id=13) server: cloudflare-nginx
    [  0.270] recv (stream_id=13) cf-ray: 36b4a340699654d4-ORD
    [  0.270] recv (stream_id=13) content-encoding: gzip
    [  0.270] recv (stream_id=13) cf-h2-pushed: </assets/css/screen.css?v=2575224120>,</shared/ghost-url.min.js?v=2575224120>,</content/images/2016/04/T...he_hill-_-3854246685-.jpg>,</content/images/2016/04/http2-server-push-2.png>,</content/images/2016/04/S...016-04-26-at-15-07-53.png>,</content/images/2016/04/S...016-04-26-at-15-08-59.png>,</content/images/2016/04/S...016-04-26-at-17-25-15.png>,</content/images/2016/04/S...016-04-26-at-17-25-42.png>,</content/images/2016/04/Capture3.PNG>,</content/images/2016/04/Capture1.PNG>,</assets/js/jquery.fitvids.js?v=2575224120>
    [  0.270] recv HEADERS frame <length=862, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0)
              ; First response header
    [  0.270] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.270] recv (stream_id=13) :method: GET
    [  0.270] recv (stream_id=13) :path: /assets/css/screen.css?v=2575224120
    [  0.270] recv (stream_id=13) :scheme: https
    [  0.270] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.270] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.270] recv PUSH_PROMISE frame <length=79, flags=0x04, stream_id=13>
              ; END_HEADERS
    

    assets Cloudflare blog pushed where
    Code (Text):
    [  0.270] recv (stream_id=13) cf-h2-pushed: </assets/css/screen.css?v=2575224120>,</shared/ghost-url.min.js?v=2575224120>,</content/images/2016/04/T...he_hill-_-3854246685-.jpg>,</content/images/2016/04/http2-server-push-2.png>,</content/images/2016/04/S...016-04-26-at-15-07-53.png>,</content/images/2016/04/S...016-04-26-at-15-08-59.png>,</content/images/2016/04/S...016-04-26-at-17-25-15.png>,</content/images/2016/04/S...016-04-26-at-17-25-42.png>,</content/images/2016/04/Capture3.PNG>,</content/images/2016/04/Capture1.PNG>,</assets/js/jquery.fitvids.js?v=2575224120>
    

    others
    Code (Text):
              ; First response header
    [  0.270] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.270] recv (stream_id=13) :method: GET
    [  0.270] recv (stream_id=13) :path: /assets/css/screen.css?v=2575224120
    [  0.270] recv (stream_id=13) :scheme: https
    [  0.270] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.270] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.270] recv PUSH_PROMISE frame <length=79, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=2)
    [  0.270] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.270] recv (stream_id=13) :method: GET
    [  0.270] recv (stream_id=13) :path: /shared/ghost-url.min.js?v=2575224120
    [  0.270] recv (stream_id=13) :scheme: https
    [  0.270] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.270] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.270] recv PUSH_PROMISE frame <length=81, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=4)
    [  0.270] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.270] recv (stream_id=13) :method: GET
    [  0.270] recv (stream_id=13) :path: /content/images/2016/04/They_started_our_car_by_pushing_it_backwards_up_the_hill-_-3854246685-.jpg
    [  0.270] recv (stream_id=13) :scheme: https
    [  0.270] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.270] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.270] recv PUSH_PROMISE frame <length=124, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=6)
    [  0.270] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.270] recv (stream_id=13) :method: GET
    [  0.270] recv (stream_id=13) :path: /content/images/2016/04/http2-server-push-2.png
    [  0.270] recv (stream_id=13) :scheme: https
    [  0.270] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.270] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.270] recv PUSH_PROMISE frame <length=87, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=8)
    [  0.270] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.270] recv (stream_id=13) :method: GET
    [  0.270] recv (stream_id=13) :path: /content/images/2016/04/Screen-Shot-2016-04-26-at-15-07-53.png
    [  0.270] recv (stream_id=13) :scheme: https
    [  0.270] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=98, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=10)
    [  0.272] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.272] recv (stream_id=13) :method: GET
    [  0.272] recv (stream_id=13) :path: /content/images/2016/04/Screen-Shot-2016-04-26-at-15-08-59.png
    [  0.272] recv (stream_id=13) :scheme: https
    [  0.272] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=98, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=12)
    [  0.272] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.272] recv (stream_id=13) :method: GET
    [  0.272] recv (stream_id=13) :path: /content/images/2016/04/Screen-Shot-2016-04-26-at-17-25-15.png
    [  0.272] recv (stream_id=13) :scheme: https
    [  0.272] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=98, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=14)
    [  0.272] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.272] recv (stream_id=13) :method: GET
    [  0.272] recv (stream_id=13) :path: /content/images/2016/04/Screen-Shot-2016-04-26-at-17-25-42.png
    [  0.272] recv (stream_id=13) :scheme: https
    [  0.272] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=98, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=16)
    [  0.272] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.272] recv (stream_id=13) :method: GET
    [  0.272] recv (stream_id=13) :path: /content/images/2016/04/Capture3.PNG
    [  0.272] recv (stream_id=13) :scheme: https
    [  0.272] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=80, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=18)
    [  0.272] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.272] recv (stream_id=13) :method: GET
    [  0.272] recv (stream_id=13) :path: /content/images/2016/04/Capture1.PNG
    [  0.272] recv (stream_id=13) :scheme: https
    [  0.272] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=80, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=20)
    [  0.272] recv (stream_id=13) :authority: blog.cloudflare.com
    [  0.272] recv (stream_id=13) :method: GET
    [  0.272] recv (stream_id=13) :path: /assets/js/jquery.fitvids.js?v=2575224120
    [  0.272] recv (stream_id=13) :scheme: https
    [  0.272] recv (stream_id=13, sensitive) accept-encoding: gzip, deflate
    [  0.272] recv (stream_id=13, sensitive) user-agent: nghttp2/1.24.0-DEV
    [  0.272] recv PUSH_PROMISE frame <length=84, flags=0x04, stream_id=13>
              ; END_HEADERS
    

    Will revisit this later when I have more free time :)
     
  5. knguyen2015

    knguyen2015 New Member

    11
    1
    3
    Aug 27, 2017
    Ratings:
    +1
    Local Time:
    6:13 AM
    1.12.1
    15.1
    Does anyone have sample configuration for WordPress? I'm trying to figure it out with this module but no luck.
     
  6. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Unfortunately, as you can see from previous post haven't been able to get this to work myself.
     
  7. knguyen2015

    knguyen2015 New Member

    11
    1
    3
    Aug 27, 2017
    Ratings:
    +1
    Local Time:
    6:13 AM
    1.12.1
    15.1
    Yeah I'm trying to test with static files but no luck.
     
  8. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
  9. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    yay.. finally some movement officially :D
     
  10. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
    The roadmap has been updated.
    [in progress] HTTP/2 PUSH support. BOOM SHAKALAKA!
     
  11. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
  12. rdan

    rdan Well-Known Member

    5,447
    1,408
    113
    May 25, 2014
    Ratings:
    +2,201
    Local Time:
    6:13 PM
    Mainline
    10.2
  13. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
    1.13 planned features and improvements

    • [done] The mirror module
    • [done] HTTP trailers support
    • [in progress] TLS 1.3 support
    • [in progress] gRPC proxy support
    • [done] HTTP/2 PUSH support
     
  14. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
    Nginx HTTP/2 server push is working fine here, at first sight.
    (although no stress test)
    [​IMG]
     
  15. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
  16. Andy

    Andy Active Member

    544
    89
    28
    Aug 6, 2014
    Ratings:
    +133
    Local Time:
    5:13 AM
    so so so, tell us in layman terms what can we do with it now? :)
     
  17. buik

    buik “The best traveler is one without a camera.”

    2,027
    524
    113
    Apr 29, 2016
    Flanders
    Ratings:
    +1,675
    Local Time:
    11:13 AM
    There you go.

    1. Compile Nginx with the latest master branch source code.
    2. Enable server push in your Nginx configuration: http2_push_preload on;
    3. Add your source file(s) to be pushed by Nginx. For example a stylesheet:
    add_header Link "</css/yourstylesheet.css>; rel=preload; as=style";

    More examples over here:
    Preload

    As Nginx with Server push is not released yet.
    It is advisable not to use it in production.
     
  18. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Test compile on nginx master branch :D
     
  19. Andy

    Andy Active Member

    544
    89
    28
    Aug 6, 2014
    Ratings:
    +133
    Local Time:
    5:13 AM
    Arg, I was excited thinking it's browser push notification :)
     
  20. eva2000

    eva2000 Administrator Staff Member

    54,894
    12,240
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,811
    Local Time:
    8:13 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    lol.. not browser push but HTTP/2 Server Push - think of it as preload headers but at server level over HTTP/2 HTTPS.

    @bassie have you noticed Nginx HTTP/2 Server Push in Nginx 1.13.9 seems to have turned of gzip compression of the assets that are pushed ? If folks who use preload headers already upgrade to Nginx 1.13.9 and set http2_push_preload on, then alot of them will experience larger HTTP/2 Server Pushed assets sizes being served to visitors ! Confirmed with Chrome devtool network inspection, nghttp tool and webpagetest.org that pushed assets are uncompressed. Reported bug at #1478 (1.13.9 HTTP/2 SERVER PUSH non-compressed assets) – nginx

    Code (Text):
        http2_push_preload on;
        add_header Link "</css/bootstrap.min.css>; rel=preload; as=style";
        add_header Link "</css/theme-style.css>; rel=preload; as=style";
    


    uncompressed pushed assets

    upload_2018-2-11_4-3-26.png

    loading just the bootstrap.min.css you can see pushed asset is uncompressed

    upload_2018-2-11_4-23-33.png

    webpagetest.org pushed asset is uncompressed

    upload_2018-2-11_4-32-1.png

    nghttp HTTP/2 check for PUSH_PROMISE frames

    Code (Text):
    nghttp -navs https://baremetal.doman.com/
    
    [  0.018] recv (stream_id=13) :method: GET
    [  0.018] recv (stream_id=13) :path: /css/bootstrap.min.css
    [  0.018] recv (stream_id=13) :authority: baremetal.domain.com
    [  0.018] recv (stream_id=13) :scheme: https
    [  0.018] recv PUSH_PROMISE frame <length=42, flags=0x04, stream_id=13>
              ; END_HEADERS
              (padlen=0, promised_stream_id=2)
    [  0.018] recv (stream_id=13) :method: GET
    [  0.018] recv (stream_id=13) :path: /css/theme-style.css
    [  0.018] recv (stream_id=13) :authority: baremetal.domain.com
    [  0.018] recv (stream_id=13) :scheme: https
    [  0.018] recv PUSH_PROMISE frame <length=40, flags=0x04, stream_id=13>