Welcome to Centmin Mod Community
Become a Member

Nginx Hurray! HTTP/2 server push for NGINX

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

  1. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 AM
    Hereby the HTTP/2 server push module for NGINX.

    Developer is Alessandro Ghedini and Stephan Dollberg of Cloudflare.
    As Cloudflare is using HTTP/2 server push it cloud or should be more or less the same as the Cloudflare implementation.

    https://github.com/ghedo/http2-push-nginx-module
     
    Last edited: Jun 7, 2017
    • Like Like x 1
  2. eva2000

    eva2000 Administrator Staff Member

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
    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. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 AM
  4. eva2000

    eva2000 Administrator Staff Member

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
    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 :)
     
    • Like Like x 1
  5. knguyen2015

    knguyen2015 New Member

    11
    1
    3
    Aug 27, 2017
    Ratings:
    +1
    Local Time:
    7:59 PM
    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

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
    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:
    7:59 PM
    1.12.1
    15.1
    Yeah I'm trying to test with static files but no luck.
     
  8. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 AM
    • Like Like x 3
  9. eva2000

    eva2000 Administrator Staff Member

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
    yay.. finally some movement officially :D
     
  10. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 AM
    The roadmap has been updated.
    [in progress] HTTP/2 PUSH support. BOOM SHAKALAKA!
     
    • Informative Informative x 2
  11. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 AM
    • Like Like x 3
  12. RoldanLT

    RoldanLT Premium Member Premium Member

    4,182
    1,013
    113
    May 25, 2014
    Phillipines
    Ratings:
    +1,435
    Local Time:
    7:59 AM
    1.11
    10.2
    • Like Like x 2
  13. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 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
     
    • Like Like x 1
  14. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 AM
    Nginx HTTP/2 server push is working fine here, at first sight.
    (although no stress test)
    [​IMG]
     
    • Like Like x 2
  15. eva2000

    eva2000 Administrator Staff Member

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
  16. Andy

    Andy Premium Member Premium Member

    391
    57
    28
    Aug 6, 2014
    Ratings:
    +68
    Local Time:
    7:59 PM
    so so so, tell us in layman terms what can we do with it now? :)
     
    • Like Like x 1
  17. bassie

    bassie Active Member

    830
    191
    43
    Apr 29, 2016
    Ratings:
    +585
    Local Time:
    1:59 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.
     
    • Like Like x 1
    • Informative Informative x 1
  18. eva2000

    eva2000 Administrator Staff Member

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
    Test compile on nginx master branch :D
     
  19. Andy

    Andy Premium Member Premium Member

    391
    57
    28
    Aug 6, 2014
    Ratings:
    +68
    Local Time:
    7:59 PM
    Arg, I was excited thinking it's browser push notification :)
     
    • Funny Funny x 1
  20. eva2000

    eva2000 Administrator Staff Member

    34,242
    7,576
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,645
    Local Time:
    9:59 AM
    Nginx 1.13.x
    MariaDB 5.5
    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>
    


     
..