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
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
?