HTTP/2 Push for the Stars

Tom J Nowell

Old Couches

HTTP 400 Bad Request

Order new couch

Construct couch from materials

Deliver couch

Install Couch on delivery

New Couch

Insert picture of new couch

Order new couch

Construct couch from materials

Deliver couch

Install Couch on delivery

Order new couch

Construct couch from materials

Deliver couch

Install Couch on delivery

Request URL

Run WordPress to get the result

Send result over network

Render page on delivery

Backend performance

Request URL

Run WordPress to get the result

Send result over network

Render page on delivery

Great Ways to Ruin Time To First Byte

Autoptimize

Really Simple SSL

Anything that output buffers the whole page

Frontend performance

Request URL

Run WordPress to get the result

Send result over network

Render page on delivery

Networking performance

Request URL

Run WordPress to get the result

Send result over network

Render page on delivery

The Waterfall

HTTP 1.1 Waterfall

HTTP/2

Preloading Assets With Link Tags

<link rel="prefetch"
href="/wp-content/themes/test/style.css" as="style"/>

<link rel="prefetch"
href="https://www.googletagmanager.com/gtag/js?id=1234" />

<link rel="prefetch"
href="https://example.com/image.png" />

<link rel="next"
href="/page2">

Preloading with HTTP headers

Link: https://example.com/other/styles.css; rel=preload; as=style

Link: https://example.com/logo.png; rel=preload; as=image

Link: https://www.googletagmanager.com/gtag/js?id=1234; rel=preload; as=script

<?php
header(
'Link: https://example.com/main.js; rel=preload; as=script' );

Preloading Fonts with HTTP headers

Link: <font.woff2>;rel="preload";as="font";crossorigin

HTTP/2 Push

Pushing with Nginx

server {
listen 443 ssl http2;
...
location = / {
http2_push /wp-content/themes/test/style.css;
}
}

Testing HTTP/2 Push

  • Browser dev tools
    In chrome, under the network tab, initiator: Push / Other
  • Terminal Command:
    nghttp -ans https://tomjn.com

Testing HTTP/2 Push

nghttp -ans https://tomjn.com

id responseEnd requestStart process code size request path
13 +21.71ms +355us 21.36ms 200 3K /
2 +50.03ms * +20.87ms 29.16ms 200 33K /wp-includes/js/jquery/jquery.js?ver=1.12.4
4 +54.01ms * +20.93ms 33.09ms 200 3K /wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
6 +54.18ms * +20.94ms 33.24ms 200 3K /wp-content/uploads/2016/11/favicon.png
8 +55.41ms * +20.95ms 34.46ms 200 4K /wp-includes/js/wp-emoji-release.min.js?ver=5.1.1
10 +55.47ms * +20.98ms 34.49ms 200 753 /wp-includes/js/wp-embed.min.js?ver=5.1.1
12 +55.53ms * +20.98ms 34.55ms 200 639 /wp-content/plugins/jetpack/_inc/build/widgets/milestone/milestone.min.js?ver=20160520
14 +55.86ms * +21.01ms 34.85ms 200 4K/wp-includes/css/dist/block-library/style.min.css?ver=5.1.1
16 +67.34ms * +21.01ms 46.33ms 200 14K /wp-content/themes/tomjn/style.css?ver=5
18 +71.42ms * +21.03ms 50.40ms 200 27K /wp-includes/css/dashicons.min.css?ver=5.1.1

Auto-pushing from PHP with Nginx

server {
listen 443 ssl http2;
...
# Intercept Link header and initiate requested Pushes
location = /myapp {
proxy_pass http://upstream;
http2_push_preload on;
}
}

Auto-Pushed:

Link: </style.css>; as=style; rel=preload

Not Auto-Pushed:

Link: <http://3rdparty.com/style.css>; as=style; rel=preload

Link: </style.css>; as=style; rel=preload; nopush

Pushing via functions.php

function tomjnscripts() {
// hint to the browser to request a few extra things via http2
header("Link: <".get_stylesheet_uri()."?ver=5>; rel=preload; as=style", false);
header("Link: </wp-content/plugins/gutenberg/blocks/build/style.css>; rel=preload; as=style", false);
header("Link: </wp-includes/js/jquery/jquery.js?ver=1.12.4>; rel=preload; as=script", false);
header("Link: </wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1>; rel=preload; as=script", false);
header("Link: <https://use.typekit.net/wtc2mfi.js>; rel=preload; as=script", false);
header("Link: <https://www.googletagmanager.com/gtag/js?id=UA-6510359-3>; rel=preload; as=script", false);
// etc....
}
add_action( 'wp_enqueue_scripts', 'tomjnscripts' );

I’m Tom J Nowell

Bored of your job? We have a fix for that
https://vip.wordpress.com/careers

https://tomjn.com
@tarendai

https://tomjn.com
@tarendai

?

HTTP/2 Push for the Stars - Google Slides