More Related Content Similar to Hacking Web Performance 2019 (20) More from Maximiliano Firtman (20) Hacking Web Performance 20191. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
maximiliano firtman
@firt
firt.mobi
2. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
maximiliano firtman
@firt
firt.mobi
9
3. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
m9o firtman
@firt
firt.mobi
4. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
max firtman
@firt
firt.mobi
38. Average time to load a mobile landing page
The problem
22 seconds
Research by thinkwithgoogle.com
39. If a page takes more than 3 seconds to load
The problem
53% leave it
Research by Double Click
47. We have 4G! We don't need to
worry about performance...
(
)
53. We still have a big performance
problem on the Mobile Web
(
)
56. Lite Page will be rendered if
Chrome Lite Pages
• You are in a 2G network
OR
• First Contentful Paint greater than 5s
⭐🆕
66. Avoid more than one roundtrip
First Load
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB
77. Avoid more than one roundtrip
First Load
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB
81. Deliver ATF in 14.6 KiB
First Load
• Embed all CSS and JavaScript needed
• If space, embed logo and/or low-res images
82. Avoid http to httpS redirect
First Load
• Use HSTS (HTTP Strict Transport Security)
• Header
• Opt-in at hstspreload.org
84. QUIC over HTTP
Data Transfer
• Experimental transport protocol over UDP
• Reduces latency and connection messages
• HTTP/2 Interface with TLS
•
86. Data Transfer
• Google: +3%
• YouTube: -30% buffering
• Facebook similar protocol: +2%
• 75% of requests can be optimized
QUIC
96. Warming up engines
Resource Loading
• Help the browser to start processes ASAP
• DNS Queries: ~200ms
• TCP and TLS connection: ~200ms
97. Announce DNS queries ASAP
<link rel="dns-prefetch" href=“https://newdomain.com">
HTML
Resource Loading
98. Announce TLS connections ASAP
<link rel="preconnect" href=“https://newdomain.com”
crossorigin>
HTML
Resource Loading
99. Announce on HTTP Response
Link: <https://my-analytics.com>; rel=preconnect;
crossorigin
HTTP
Resource Loading
104. To bundle or not to bundle
Resource Loading
• On HTTP/2 might seem an anti-pattern
• But it’s not!
106. To bundle or not to bundle
Resource Loading
• Bundle!
• But not everything
• First, code-splitting and load only the important
119. Meet HTTP Client Hints
Images
• Browser will expose data to the server
<meta http-equiv="Accept-CH"
content="DPR, Viewport-Width, Device-Memory”>
HTML
120. 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
123. Know about context with APIs
User Experience
• Network Information
• Performance Observers
• Save-Data Client Hint
• Device Memory Client Hint
125. 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