@SimonHearne

The Future of Web Performance


Simon Hearne

Web Performance Solutions Engineer @ Akamai

Before the future...

In the past five years:

  • Commoditised 4G / LTE Devices
  • Google AMP & Facebook Instant Articles
  • SPDY, H/2 and Google's gQUIC
  • GDPR & cookie law

And yet...

Does the web feel faster?

The Future of...

  • Platform (Network)
  • Platform (Client)
  • Content
  • The User

Network Platform

  • Application Layer (HTTP)
  • Presentation Layer (TLS)
  • Session Layer (APIs / Sockets)
  • Transport Layer (TCP / UDP)

HTTP/2

  • Header Compression
  • Binary protocol
  • Server Push
  • Request multiplexing
  • Request pipelining

HTTP/2 & the HoL in the Waterfall

HTTP/2 and the HoL in the Waterfall

TLS

TLS (1.3)

  • Session Resumption
  • TLS False Start
  • 0-RTT

TLS 1.3

Approximatley 50% faster!

Sockets

Server-Sent Events for unidirectional data

TCP / UDP

QUIC vs TCP & TLS

QUIC Benefits

  • 0-RTT for known servers
  • Improved congestion control
  • Multiplexing without head-of-line blocking
  • Forward error correction
  • Connection migration

QUIC vs HTTPS

DNS

A cartoon intro to DNS over HTTPS

DNS over TLS (DoT) &
DNS over HTTPS (DoH)

More security, less performance

BGP / Routing

Massive route leak impacts major parts of the Internet, including Cloudflare

How Verizon and a BGP Optimizer Knocked Large Parts of the Internet Offline Today

BGP IP4 Table Size

OpenR

  • Shared data-bus
  • Fast convergence
  • Secure bootstrap
  • Plug & Play Address allocation
  • HW/SW Segregation

OpenR Documentation

Summary

We are almost at the limits of the network

But does it matter?

Client Platform

Service Workers

Service Workers

  • Offline Webpages
  • Transpilation
  • Performance Proxy
  • Third-Party Policing

Web Workers

Auth0 | Speedy intorduction to Web Workers

Client Hints

developers.google.com | Automating Content Selection with Client Hints

Client Hints++

Get device and connection details in request headers!

Accept-CH: Downlink, RTT, Device-Memory, Save-Data

developers.google.com | Optimizing Content Efficiency with Client Hints

WebAssembly

Coming soon:

  • ES Imports
  • Memory Management
  • Exception Handling
  • Shared Buffers
  • Non-numeric Types

Scott Logic | The future of WebAssembly

AMP / FIA

AMP is temporary, the core platform should be the web

Malte Ubl, AMP Tech Lead. 2015

Reporting API

  • CSP violations
  • Deprecations
  • Browser interventions
  • Network Error Logging (NEL)
  • Crash reports

Available in Chrome 74

developers.google.com | Reporting API

Content

The rise of JavaScript

HTTP Archive | State of JavaScript

The rise of JavaScript

Desktop JavaScript is up 350% since 2011

Mobile JavaScript is up 650% since 2011

HTTP Archive | State of JavaScript

ES Modules

ES Modules: a cartoon deep dive

Dynamic Import

import() proposal for JavaScript

Tree Shaking & Bundle Analysis

WebPack Visualizer

BundlePhobia | d3.js

The rise, and rise of Images

HTTP Archive | State of Images

The rise, and rise of Images

Desktop Image Bytes are up 330% since 2011

Mobile Image Bytes are up 1050% since 2011

HTTP Archive | State of Images

Native Image Lazy Loading

Available in Chrome 76, polyfill with lazysizes.js

Addy Osmani | Native image lazy-loading for the web!

Listen to the User

Available in Chrome 49+

Delivering Fast and Light Applications with Save-Data

Video - HD, 4K, 8K?

Load video only on interaction. E.g. (HTML5):

<video preload="auto" />
<video preload="metadata" />

The rise of third-party content

Summary

Content is the biggest factor we can control

We can deliver only what the user needs

Third-party content must be managed

The User

The User

  • The Next Billion Users
  • Privacy, Tracking and GDPR
  • Personalisation
  • Devices

The Next Billion Users

The Next Billion Users

  • Mobile-first
  • Social Media Natives
  • Ecommerce > In-Store
  • 3G / 4G networks
  • Lower-end devices
  • Have never known a world without Amazon

User-focus

  • GDPR & Cookie Law make it harder to measure
  • Browsers blocking trackers
  • Browser vendors rendering in the cloud

User-focus?

Personalisation

  • Machine learning MVT
  • Personalisation at the edge
  • 1:1 targeting

Devices

  • Growth of Android
  • Greater Display Density
  • New display layouts

Conclusions ✍️

  • Network improvements will not make the web fast
  • Only serve the JavaScript that is required
  • Serve content based on client hints
  • Personalisation & Optimisation must move to the edge
  • Serve offline-first for the next Billion users

The Future is Here!

Thank you 🙏

shearne@akamai.com

simonhearne.com/presentations/future-of-webperf/