Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[PHP Stockholm] HTTP/2 Lightning Talk

[PHP Stockholm] HTTP/2 Lightning Talk

A 5 minute or less introduction to HTTP/2 and why you should be using it.

Davey Shafik

May 11, 2016
Tweet

More Decks by Davey Shafik

Other Decks in Programming

Transcript

  1. D AV E Y S H A F I K
    • Developer
    • Author
    • Open Source Contributor
    • Release Manager for PHP 7.1
    • @dshafik

    View full-size slide

  2. h tt p : / /d e v e l o p e r. a ka m a i .co m

    View full-size slide

  3. H T T P/ 2
    A KA : H 2

    View full-size slide

  4. B R O W S E R S U P P O RT

    View full-size slide

  5. B R O W S E R S U P P O RT
    • Chrome + Chrome Mobile
    • Firefox
    • IE 11 on Windows 10
    • MS Edge
    • Safari (El Capitan/iOS 9)
    • Opera

    View full-size slide

  6. A L L B R O W S E RS R E Q U I R E T LS FO R H T T P/ 2
    CC-BY: Jason Baker

    View full-size slide

  7. W H AT I S H T T P/ 2 ?
    CC-BY: Marco Bellucci

    View full-size slide

  8. B I N A R Y I N ST E A D O F T E XT
    CC-BY: brett jordan

    View full-size slide

  9. F U L LY M U LT I P L E X E D
    CC-BY: vadikunc
    I N S T E A D O F O R D E R E D A N D B L O C K I N G

    View full-size slide

  10. C A N US E O N E CO N N E CT I O N 

    FO R PA R A L L E L R E Q U E STS
    CC-BY: Alosh Bennett

    View full-size slide

  11. US E S H E A D E R CO M P R E SS I O N
    CC-BY-SA: Magnus Hagdorn
    R E D U C E S O V E R H E A D

    View full-size slide

  12. S E R V E R P U S H
    I S S U P E R CO O L ( N O R E A L LY )
    CC-BY-SA: Takeshi

    View full-size slide

  13. S E R V E R P U S H
    • Allows the server to proactively push assets like stylesheets and
    images to the client without them needing to parse the HTML page
    and make subsequent requests
    • Done by pushing the assets into the client cache, avoiding the
    roundtrip necessary to pull them up once the client makes the
    request

    View full-size slide

  14. W H AT D O E S H T T P/ 2 M E A N F O R M Y
    A P P L I C AT I O N ?

    View full-size slide

  15. T R A N S PA R E N T
    CC-BY-SA: Patty
    H A N D L E D B Y N G I N X / A PA C H E

    View full-size slide

  16. S O W H AT ’ S T H E P O I N T ?

    View full-size slide

  17. H T T P/ 1 . X S U C K S
    CC-BY: Flóra Soós

    View full-size slide

  18. H T T P/ 1 . X S U C K S
    • Minify + Concat JavaScript and CSS
    • Inlining small JavaScript and CSS
    • Using image sprites
    • Using data: URIs
    • Domain sharding

    View full-size slide

  19. T H E S E T H I N G S A R E A L L " C L E V E R " H AC K S
    CC-BY: Matt Biddulph

    View full-size slide

  20. $numRequests = 378;

    View full-size slide

  21. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  22. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  23. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  24. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  25. $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  26. 4 7 . 6 7 

    s e co n d s
    CC-BY: Hernán Piñera

    View full-size slide

  27. H T T P/ 2 : SY N C H R O N O US
    $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt($ch, CURLOPT_HTTP_VERSION, HTTP_VERSION_2_0);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  28. H T T P/ 2 : SY N C H R O N O US
    $url = 'https://http2.akamai.com/demo/tile-%d.png';
    for ($i = 0; $i <= $numRequests; $i++) {
    $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, $i);
    curl_setopt($ch, CURLOPT_HTTP_VERSION, HTTP_VERSION_2_0);
    curl_exec($ch);
    curl_close($ch);
    }

    View full-size slide

  29. 6 2 . 1 9 

    s e co n d s
    CC-BY-NC: Scott Beckner

    View full-size slide

  30. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, ‘%d');
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  31. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, ‘%d');
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  32. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, ‘%d');
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  33. $mh = curl_multi_init();

    $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, ‘%d');
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 1 . 1 : CO N CU R R E N T

    View full-size slide

  34. H T T P/ 1 . 1 : CO N CU R R E N T ( CO N T. )
    do {
    $exec = curl_multi_exec($mh, $running);
    } while ($exec == CURLM_CALL_MULTI_PERFORM);
    while ($running && $exec == CURLM_OK) {
    $ready = curl_multi_select($mh);
    if ($ready != -1) {
    do {
    $exec = curl_multi_exec($mh, $running);

    } while ($exec == CURLM_CALL_MULTI_PERFORM);
    }
    }

    View full-size slide

  35. 8 . 6 6 

    s e co n d s

    View full-size slide

  36. $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, ‘%d');
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 2 : M U LT I P L E X E D
    $mh = curl_multi_init();

    View full-size slide

  37. $url = 'https://http2.akamai.com/demo/tile-%d.png';

    for ($i = 0; $i <= $numRequests; $i++) {
    $handles[] = $ch = curl_init();
    $conf[CURLOPT_URL] = sprintf($url, ‘%d');
    curl_multi_add_handle($mh, $ch);
    }
    H T T P/ 2 : M U LT I P L E X E D
    curl_multi_setopt($mh,

    CURLMOPT_PIPELINING,
    CURLPIPE_MULTIPLEX
    );
    $mh = curl_multi_init();

    View full-size slide

  38. H T T P/ 2 : M U LT I P L E X E D ( CO N T. )
    do {
    $exec = curl_multi_exec($mh, $running);
    } while ($exec == CURLM_CALL_MULTI_PERFORM);
    while ($running && $exec == CURLM_OK) {
    $ready = curl_multi_select($mh);
    if ($ready != -1) {
    do {
    $exec = curl_multi_exec($mh, $running);

    } while ($exec == CURLM_CALL_MULTI_PERFORM);
    }
    }

    View full-size slide

  39. 2 . 1 4 

    s e co n d s
    CC-BY: motoracereports

    View full-size slide

  40. I N S U M M A R Y

    View full-size slide

  41. N O M O R E H AC K S !

    View full-size slide

  42. H U G E P E R FO R M A N C E W I N S

    View full-size slide

  43. 6 0 % + M A R K E T S H A R E

    View full-size slide

  44. H T T P / 2 I S A W E S O M E !
    CC-BY-SA: Steven Gerner

    View full-size slide

  45. F E E D B A C K & Q U E S T I O N S
    Twitter:
    Email:
    Slides:
    @dshafik
    [email protected]
    http://daveyshafik.com/slides

    View full-size slide