hacking web performance @ forwardjs 2017
TRANSCRIPT
Picture from Simon Howden freedigitalphotos.net!
Picture from Simon Howden freedigitalphotos.net!
hacking web performance
Max Firtman @firt
mobile+web developer & trainer
😬
I have 2 goals…
Show you new tricks 😁
Make you feel bad
Let’s Start!
I know you know
http://www.flickr.com/photos/steenslag/22689920/-borrowedfromSteveSouders
14
Picture from Simon Howden freedigitalphotos.net
500ms delay, +26% user’s frustration
Source: Radware
:(
500ms delay, -20% Google’s traffic
1http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
:(
+100ms delay, -1% Amazon’s sales
1http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
:(
immediate feedback 100ms
perception
Jakob Nielsen - Usability Engineering
perception
Jakob Nielsen - Usability Engineering
losing flow of thoughts 1s
perception
Source: Google Developers
RAIL
perception
RAIL
100ms
perception
RAIL
100ms 16ms
perception
RAIL
100ms 16ms 50ms
perception
RAIL
100ms 16ms 50ms 1s
I know you know
Performance is important We need a great Speed Index We have a budget of 1 second to load
You are already…
Optimizing the network
You are already
CSS as Appetizer
You are already
JavaScript as Dessert
You are already
Optimizing Images
You are already
Have an HTTP Cache Policy
You are already
Using Service Workers
You are already
Avoiding Redirects
You are already
Working with TLS and HTTP/2
You are already
You are already doing this
What’s the problem then?
Average time to load a mobile landing page
The problem
22 seconds Research by thinkwithgoogle.com
If a page takes more than 3 seconds to load
The problem
53% leave it Research by thinkwithgoogle.com
The problem
The problem
AMP Facebook Instant Articles
The problem
We always underestimate
mobile
iOS and Android
Safari and Chrome?
Source: MOVR Report
browsers with market share
Using Cellular Networks!
We have 4G! We don't need to worry about performance...
(
)
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
Only 21% is on 4G, worldwide
cellular
cellular
45% of users are on 2G networks
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
~30% of the time 4G was not used
RTT - latencycellular networks
2G
3G
4G
Home
0 250 500 750 1000
Min Max
Let’s hack Web Performance!
Hack First Load
Avoid more than one roundtrip
First Load
Deliver ATF in 14Kb
First Load
• Embed all CSS and JavaScript needed • If space, embed logo and/or low-res images
Announce DNS queries ASAP
First Load
<link rel="dns-prefetch" href="http://newdomain.com">
HTML
Avoid http to httpS redirect
First Load
• Use HSTS (HTTP Strict Transport Security) • Header • Opt-in at hstspreload.org
Hack Data Transfer
Use Zopfli
Data Transfer
• Save 4-8% data transfer with GZIP • It’s ~80x slower
Use Brotli
Data Transfer
• Save ~14% data transfer • Check Encoding Header
Create a low-res version
Data Transfer
• Check save-data Client Hint header • Use NetInfo API • Use Performance Timing API • Measure bandwidth
Embrace Responsive Images
Data Transfer
• Not just 3 versions of your image • 65% of the traffic is for images (HttpArchive)
• 84% improvement creating n versions (ScientiaMobile)
Hack Images
http://www.flickr.com/photos/steenslag/22689920/-borrowedfromSteveSouders
A picture is worth a thousand words…
… if it loads
Time to replace JPEG and PNG
Images
Lossy format: WebP -35%
Images
Lossy format: JPEG 2000 (JPX) -19%
Images
Lossy format: JPEG XR (JXR) -29%
Images
Lossless format: Zopfli PNG
https://github.com/imagemin/zopflipng-bin
-20%
Images
Deal with compatibility!
Images
• Hello to <picture>
<picture>
<source type="image/webp" src="image.webp"><source type="image/vnd.ms-photo" src="image.jxr"><source type="image/jp2" src="image.jp2"><source type="image/png" src=“image.zf.png"><img src=“image.zf.png" alt=“description">
</picture>
Meet HTTP Client Hints
Images
• Browser will expose data to the server<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Downlink">
HTML
Decode images in the background
Images
• github.com/GoogleChrome/offthread-image
Stop using Animated GIFs!
Images
• Use Animated PNGs or Animated WebP • Use muted videos • Use webkit-playsinline for iOS
Use tricks for Preview Images
Images
Images
The future looks interesting!
Images
• BPG • FLIF
Hack Limitsthanks to Service Workers
Make CDNs race for performance
Limits
Delta Updates
Limits
Use Streams
Limits
Your own Compression Method
Limits
Progressive Images
Limits
Use BPG Today!
Limits
https://github.com/sandropaganotti/bpg-converter
Feeling bad enough?
Performance is TOP PRIORITY Push it even more It’s a worthwhile effort
Make it fast!
Foto de freefoto.com
[email protected]@firt
firt.mobi/hpmw
Next Forward workshopsProgressive Web AppsNew Web APIs Lab: VR, BT, PaymentsApps with TypeScript and Angular