The Web of Tomorrow

Better Faster Stronger

Geoff Appleby

Pacific Northwest Drupal Summit 2017

HTTP/2

Support

Browsers

  • Chrome
  • Firefox
  • Safari 9*
  • IE 11*
  • Edge

Servers

  • Apache 2.4*
  • Nginx 1.9.5
  • Varnish 5.0

CDNs

  • Cloudflare
  • Akamai
  • Cloudfront
  • Fastly

ALPN Negotiation

"Hey, I'd like to talk to you with TLS and HTTP/2"
"Okay, let's talk with TLS and HTTP/2"
"Can you send me index.html over HTTP/2?"

ALPN Negotiation

"Hey, I'd like to talk to you with TLS and HTTP/2"
"Okay, let's talk with TLS"
"Can you send me index.html with HTTP 1.1?"

HTTP 1

GET /index.html
index.html
GET /styles.css
style.css
GET /scripts.js
scripts.js
GET /image1.png
image1.png

HTTP 1.1 Hacks

  • Keep-Alive
  • Sharding
  • Concatenation
  • Sprites & Icon Fonts

HTTP/2

GET /index.html
1
GET /style.css
3
GET /scripts.js
5
GET /image1.png
7
Headers
index.html
2
Data
index.html
2
Headers
style.css
4
Data
style.css
4
Headers
scripts.js
6
Data
scripts.js
6
Headers
image1.png
8
Data [0]
image1.png
8
Data [1]
image1.png
8

Prioritization

  1. HTML
  2. CSS
  3. JavaScript
  4. Images

Prioritization

  • 256 HTML
  • 220 CSS
  • 183 Header JavaScript
  • 183 Footer Javascript
  • 110 Images

Prioritization

  • 201 [Primary Content]
    • 1 [Secondary Content]
      • 32 HTML
      • 22 Images
    • 32 CSS
    • 32 Header JavaScript
  • 101 [Tertiary Content]
    • 183 Footer Javascript

HPACK

CodeNameValue
1 :authority
2 :method GET
3 :method POST
4 :path /
5 :path /index.html
6 :scheme http
7 :scheme https
8 :status 200
9 :status 204
10:status 206
11:status 304
12:status 400
13:status 404
14:status 500
15accept-charset
16accept-encodinggzip, deflate
17accept-language
18accept-ranges
19accept

Server Push

"Can you send me index.html over HTTP/2?"
"Okay, here is index.html"
"You'll also need styles.css"
"Here is styles.css"

What should we push?

¯\_(ツ)_/¯

Concerns

  • Server Push versus Browser Cache
  • Excessive Multiplexing
  • Packet Loss

Best Practices

  • Limit sharding
  • Still concatenate
  • Limit server push

QUIC

  • UDP
  • Only supported by Chrome & Google

Let's Encrypt

  • Free TLS certificates
  • Automated
  • Short Lifetime

            $ sudo apt-get certbot
            $ sudo certbot certonly --webroot -w /var/www/ -d example.com -d www.example.com
            $ sudo certbot renew --quiet --no-self-upgrade

Strict Transport Security


            Strict-Transport-Security: max-age=31536000

            Strict-Transport-Security: max-age=31536000; includeSubDomains

            Strict-Transport-Security: max-age=31536000; preload

Strict Transport Security

11

Public Key Pinning


            Public-Key-Pins:
              pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=";
              pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=";
              max-age=5184000

            Public-Key-Pins-Report-Only:
              pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=";
              pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=";
              max-age=5184000

Public Key Pinning

Referrer Policy


            Referrer-Policy: no-referrer-when-downgrade

            Referrer-Policy: no-referrer

            Referrer-Policy: same-origin

            Referrer-Policy: strict-origin-when-cross-origin

Referrer Policy

50 56

Content Security Policy


            Content-Security-Policy: default-src 'self'

            Content-Security-Policy: default-src 'self' *.example.com

            Content-Security-Policy: default-src 'self'; img-src *;
              style-src assets.example.com; script-src assets.example.com

            Content-Security-Policy: upgrade-insecure-requests; default-src 'self'

Content Security Policy


            Content-Security-Policy-Report-Only: default-src 'self';
              script-src 'self' 'unsafe-inline' code.jquery.com www.google.com www.google-analytics.com;
              style-src 'self' 'unsafe-inline' netdna.bootstrapcdn.com www.google.com ajax.googleapis.com;
              img-src 'self' s3.amazonaws.com www.google-analytics.com stats.g.doubleclick.net;
              connect-src 'self' www.drupal.org www.google-analytics.com;
              report-uri https://gapple.report-uri.io/r/default/csp/reportOnly;

Content Security Policy

10

Subresource Integrity


            <script src="https://example.com/example-framework.js"
              integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>

Subresource Integrity

Progressive CSS


            <html>
              <head>
                <link rel="stylesheet" href="essential.css" />
              </head>
              <body>
                <link rel="stylesheet" href="header.css" />
                <header></header>

                <link rel="stylesheet" href="article.css" />
                <article></article>

                <link rel="stylesheet" href="footer.css" />
                <footer></footer>
              </body>
            </html>

Conditional Rules


            #about .projects a {
              border-bottom: 1px solid rgba(51, 51, 51, 0.1);
            }
            #about .projects a:hover {
              border-bottom: 1px solid rgba(51, 51, 51, 0.65);
            }

            
@supports (text-decoration-color: rgba(51, 51, 51, 0.1)) {
              #about .projects a {
                border-bottom: none;
                text-decoration: underline rgba(51, 51, 51, 0.1);
              }
              #about .projects a:hover {
                border-bottom: none;
                text-decoration: underline rgba(51, 51, 51, 0.65);
              }
            }

Conditional Rules


            @supports (text-decoration-color: rgba(51, 51, 51, 0.1)) {
              #about .projects a {
                text-decoration: underline rgba(51, 51, 51, 0.1);
              }
              #about .projects a:hover {
                text-decoration: underline rgba(51, 51, 51, 0.65);
              }
            }

            @supports (not (text-decoration-color: rgba(51, 51, 51, 0.1))) {
              #about .projects a {
                border-bottom: 1px solid rgba(51, 51, 51, 0.1);
              }
              #about .projects a:hover {
                border-bottom: 1px solid rgba(51, 51, 51, 0.65);
              }
            }

Conditional Rules

9

Flexbox

10*

Flexbox

Item Item Item Item
Item Item Item Item Item

Flexbox

Item Item Item Item
Item Item Item Item Item

Flexbox

Image
Lorem Ipsum
Button

Flexbox

Image
Lorem Ipsum
Button
GET /index.html
1
GET /style.css
3
GET /scripts.js
5
GET /image1.png
7
Headers
index.html
2
Data
index.html
2
Headers
style.css
4
Data
style.css
4
Headers
scripts.js
6
Data
scripts.js
6
Headers
image1.png
8
Data [0]
image1.png
8
Data [1]
image1.png
8

CSS Grids

52 57 Nightly*

Resources

References - HTTP/2

References - Browser Headers

References - CSS