The Future of Web Performance
Simon Hearne
Web Performance Consultant
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
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 Benefits
- 0-RTT for known servers
- Improved congestion control
- Multiplexing without head-of-line blocking
- Forward error correction
- Connection migration
QUIC vs HTTPS
DNS
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
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
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
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
Content
The rise of JavaScript
The rise of JavaScript
Desktop JavaScript is up 350% since 2011
Mobile JavaScript is up 650% since 2011
ES Modules
Dynamic Import
Tree Shaking & Bundle Analysis
The rise, and rise of Images
The rise, and rise of Images
Desktop Image Bytes are up 330% since 2011
Mobile Image Bytes are up 1050% since 2011
Native Image Lazy Loading
Available in Chrome 76, polyfill with lazysizes.js
Listen to the User
Available in Chrome 49+
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 🙏
simon@hearne.me
simonhearne.com/presentations/future-of-webperf/