57. Avoid more than one roundtrip
First Load
⢠TCP Slow Start - initial congestion window â¨
(initcwnd)
⢠Linux: 14.6 KiB (10 segments)
⢠CDNs are playing with diďŹerent values
58. Deliver ATF in 14.6 KiB
First Load
⢠Embed all CSS and JavaScript needed
⢠If space, embed logo and/or low-res images
59. Avoid http to httpS redirect
First Load
⢠Use HSTS (HTTP Strict Transport Security)
⢠Header
⢠Opt-in at hstspreload.org
61. QUIC over HTTP (aka HTTP/3)
Data Transfer
⢠Experimental transport protocol over UDP
⢠Reduces latency and connection messages
⢠HTTP/2 Interface with TLS
â˘
63. Data Transfer
⢠Googleâs search page: 3% improvement
⢠YouTube: reduced 30% buďŹering
⢠Facebook similar protocol: 2% improvement
⢠75% of requests can be optimized
QUIC
89. Embrace Responsive Images
Data Transfer
⢠Not just 3 versions of your image
⢠65% of the traďŹc is for images (HttpArchive)
⢠84% improvement creating n versions (ScientiaMobile)
94. Meet HTTP Client Hints
Images
⢠Browser will expose data to the server
â¨
<meta http-equiv="Accept-CH"
content="DPR, Viewport-Width, Device-Memoryâ>
HTML
95. Meet HTTP Client Hints
Images
â˘Today we can ask for
⢠RTT
⢠Downlink
⢠ECT (2g, 3g, 4g, slow-2g)
⢠Save-Data
⢠DPR and Viewport-Width
⢠Device-Memory
96. Decode images in a thread
Images
⢠github.com/GoogleChrome/offthread-image
98. Know about the context
User Experience
⢠Client-side Performance APIs
⢠Network Information API
⢠Device Memory Client Hint
⢠Save-Data Client Hint
100. Get Reports from the Browser
User Experience
⢠Reporting API
⢠Report-To header with a server endpoint
⢠Browser will send you reports about problems,
including Chrome Lite Pages activation