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

HTTP/2, PHP and Symfony: a brief history of the protocol powering the web, and how to use it

HTTP/2, PHP and Symfony: a brief history of the protocol powering the web, and how to use it

A few months ago, I’ve contributed a new component to Symfony: WebLink.
By implementing cutting edge web standards, namely HTTP/2 Server Push and W3C’s Resource Hints, it brings great opportunities to boost webapp’s performance.

Let's discover how HTTP/2 and WebLink work.

Kévin Dunglas

January 16, 2018
Tweet

More Decks by Kévin Dunglas

Other Decks in Programming

Transcript

  1. Les-Tilleuls.coop HTTP/2 & Symfony

  2. Les-Tilleuls.coop Kévin Dunglas ❏ ❏ WebLink ❏ @dunglas

  3. Les-Tilleuls.coop Self-managed ⬆ ➡ Les-Tilleuls.coop

  4. Les-Tilleuls.coop HTTP, powering the web since 1989 Tim Berners Lee

  5. Les-Tilleuls.coop 1991: HTTP 0.9 ❏ ❏ ❏ ❏ hypermedia ❏

    ❏ ❏ Simple 1 line protocol
  6. Les-Tilleuls.coop $ telnet les-tilleuls.coop 80 Connected to les-tilleuls.coop. GET /en/jobs

    <TITLE>Hello Symfony Folks</TITLE> Connection closed by foreign host.
  7. Les-Tilleuls.coop

  8. Les-Tilleuls.coop 1996: HTTP 1.0 ❏ headers ❏ ❏ ❏ ❏

    ❏ ❏
  9. Les-Tilleuls.coop $ telnet les-tilleuls.com 80 GET /en/jobs HTTP/1.0 User-Agent: MyBrowser

    Accept: text/html HTTP/1.0 200 OK Content-Type: text/html … <h1>Hi sfPot</h1> Connection closed by foreign host.
  10. Les-Tilleuls.coop 1997: HTTP 1.1 ❏ 1st official internet standard (RFC

    2068) ❏ ❏ ❏ ❏ ❏ ❏
  11. Les-Tilleuls.coop $ telnet les-tilleuls.com 80 GET /en/jobs HTTP/1.1 Host: les-tilleuls.coop

    [...] HTTP/1.1 200 OK Transfer-Encoding: chunked ➡
  12. Les-Tilleuls.coop 100 <html><!--...!--> 0 GET /favicon.ico HTTP/1.1 [headers] GET /style.css

    HTTP/1.1 Connection: close [headers] HTTP/1.1 200 OK [body] HTTP/1.1 200 OK [body]
  13. Les-Tilleuls.coop HTTP/2 (aka h2)

  14. Les-Tilleuls.coop 2015: HTTP/2 ❏ ❏ Binary protocol ❏ ❏ ❏

    QUIC ❏ High-level compatibility with HTTP 1 ❏
  15. Les-Tilleuls.coop http://qnimate.com/what-is-multiplexing-in-http2/ Multiplexing

  16. Les-Tilleuls.coop

  17. Les-Tilleuls.coop Supported by 82% of end users

  18. Les-Tilleuls.coop Cloudways

  19. Les-Tilleuls.coop • • •

  20. Les-Tilleuls.coop h2 and PHP, server-side

  21. Les-Tilleuls.coop h2 and PHP: server-side 3. No change to the

    PHP app ✌
  22. Les-Tilleuls.coop h2 and PHP: Nginx server { listen 443 ssl

    http2; # ssl_certificate config # fastcgi_pass config } ❏ No Push hint support
  23. Les-Tilleuls.coop h2 and PHP: Apache Listen 443 SSLEngine on #

    SSL config Protocols h2 http/1.1 ❏ Push hint support
  24. Les-Tilleuls.coop h2 and PHP: alternative ❏ ❏ ❏ ❏ ❏

  25. Les-Tilleuls.coop h2 and PHP, client-side

  26. Les-Tilleuls.coop cURL

  27. Les-Tilleuls.coop Guzzle Use https://github.com/csarrazi/CsaGuzzleBundle

  28. Les-Tilleuls.coop H2 Push & hints ⚡

  29. Les-Tilleuls.coop Specifications W3C’s Preload ❏ ❏ W3C’s Resource Hints ❏

  30. Les-Tilleuls.coop Hint the server, the proxy or the client with

    a Link header...
  31. Les-Tilleuls.coop The server or the proxy may push the linked

    resource using h2 nopush attribute: prevent h2 push but let the client send an early request.
  32. Les-Tilleuls.coop Other standard rel types ❏ dns_prefetch ❏ preconnect ❏

    prefetch ❏ prerender
  33. Les-Tilleuls.coop The Symfony WebLink Component

  34. Les-Tilleuls.coop Symfony Weblink Component ❏ Link ❏ ❏ ❏ ❏

  35. Les-Tilleuls.coop Install composer req symfony/weblink Or with Flex: composer req

    weblink
  36. Les-Tilleuls.coop Standalone usage

  37. Les-Tilleuls.coop In Symfony

  38. Les-Tilleuls.coop In Twig

  39. Les-Tilleuls.coop Resulting Header

  40. Les-Tilleuls.coop In the Browser

  41. Les-Tilleuls.coop Other Built-in Twig Helpers ❏ link() ❏ preload() ❏

    dns_prefetch() ❏ preconnect() ❏ prefetch() ❏ prerender()
  42. Les-Tilleuls.coop Start Right Now

  43. Les-Tilleuls.coop Symfony Docker docker-compose up

  44. Les-Tilleuls.coop

  45. Les-Tilleuls.coop @dunglas @coopTilleuls