Fluent 2018 session on Web Performance techniques

1. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
Maximiliano Firtman
@firt

2. mobile+web developer & trainer

3. 😬

5. trainer

9. I have 2 goals…

10. Show you new tricks
😁

11. Make you feel bad

12. Let’s Start!

13. I know you know

14. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders

15. Picture from Simon Howden freedigitalphotos.net

16. 16
Picture from Simon Howden freedigitalphotos.net

17. 500ms delay, +26% user’s frustration
Source: Radware
:(

18. 500ms delay, -20% Google’s traffic
1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
:(

19. +100ms delay, -1% Amazon’s sales
1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
:(

20. User-centric metrics
First Meaningful Paint

21. User-centric metrics
First Interactive

22. User-centric metrics
Consistently Interactive

23. User-centric metrics
Visually Complete

24. User-centric metrics
Custom Metric

25. I know you know
Performance is important
We need a great Speed Index
We need goals to achieve

26. Goals
Speed Index: 1,100-2,500
First Meaningful Paint: 1-3s
First Interactive: 2-4s

27. You are already…

28. Optimizing the network transfer
You are already

29. Working with TLS and HTTP/2
You are already

30. CSS as Appetizer
You are already

31. JavaScript as Dessert
You are already

32. Optimizing Images
You are already

33. Have an HTTP Cache Policy
You are already

34. Using Service Workers
You are already

35. Avoiding Redirects
You are already

36. You are already doing this

37. What’s the problem then?

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 thinkwithgoogle.com

40. The problem
We always
underestimate
mobile

41. iOS and Android

42. Safari and Chrome?

43. browsers with market share

45. Using Cellular Networks!

46. We have 4G! We don't need to
worry about performance...
(
)

47. www.gsma.com/mobileeconomy - Dec 2017

48. ~10% of the time 4G is not used

49. RTT - latency
cellular networks
2G
3G
4G
Home
0 250 500 750 1000
Min Max

50. Let’s hack Web Performance!

51. Hack First Load

52. Avoid more than one roundtrip
First Load
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB (10 segments)
• CDNs are playing with different values

53. Deliver ATF in 14.6 KiB
First Load
• Embed all CSS and JavaScript needed
• If space, embed logo and/or low-res images

54. Avoid http to httpS redirect
First Load
• Use HSTS (HTTP Strict Transport Security)
• Header
• Opt-in at hstspreload.org

55. Hack Data Transfer

56. QUIC
Data Transfer
• Experimental transport protocol over UDP
• Reduces latency and connection messages
• HTTP/2 Interface with T?LS

57. Data Transfer
Image from Chromium Blog

58. Data Transfer
• Google’s search page: 3% improvement
• YouTube: reduced 30% buffering
• Facebook similar protocol: 2% improvement
• 75% of requests can be optimized
QUIC

59. Use Zopfli
Data Transfer
• Save 3-8% data transfer with GZIP
• It’s ~80x slower

60. Use Brotli
Data Transfer
• Save ~25% data transfer compared with GZIP
• Check Encoding Header

61. Use Brotli
Data Transfer
• LinkedIn: 4% savings in load time
• Facebook: 17% savings on CSS, 20% on JavaScript

62. Readable Streams
Data Transfer
• Process data as it arrives in chunks
• 45% savings on paint metrics
(when data is client-side rendered)

63. Hack Resource Loading

64. HTTP/2 Push (?)
Resource Loading
• On most situations it can be an anti-pattern
• You can be pushing files that are in the client

65. Modern Cache Control
Resource Loading
• Hash in filenames is common for versioning
• Browsers make conditional requests

66. Modern Cache Control
Resource Loading
• Hello to Cache-Control: immutable

67. Modern Cache Control
Resource Loading
• It’s a common new pattern to
• 1) serve from the cache
• 2) update it in the background for later

68. Modern Cache Control
Resource Loading
Cache-Control: stale-while-revalidate=99

69. Warming up engines
Resource Loading
• Help the browser to start processes ASAP
• DNS Queries: ~200ms
• TCP and TLS connection: ~200ms

70. Announce DNS queries ASAP
<link rel="dns-prefetch" href=“https://newdomain.com">
HTML
Resource Loading

71. Announce TLS connections ASAP
<link rel="preconnect" href=“https://newdomain.com”
crossorigin>
HTML
Resource Loading

72. Announce on HTTP Response
Link: <https://my-analytics.com>; rel=preconnect;
crossorigin
HTTP
Resource Loading

73. To bundle or not to bundle
Resource Loading
• On HTTP/2 might seem an anti-pattern
• But it’s not!

74. Resource Loading

75. To bundle or not to bundle
Resource Loading
• Bundle!
• But not everything
• First, code-splitting and load only the important

76. Web Fonts
Resource Loading
• Avoid FOUT (Flash of Unstyled Text)
• font-display: optional or swap

77. Preloading
Resource Loading
• Help the browser prioritize resources for rendering

78. Preloading
Resource Loading
<link rel="preload" href=“styles.css” as=“style”>
HTML

79. Preloading
Resource Loading
Link: <https://otherhost.com/font.woff2>; rel=preload;
as=font; crossorigin
HTTP

80. Cache Storage
Resource Loading
• With Service Workers now everywhere
• Time to use Cache Storage everywhere we can

81. Hack Images

82. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders
A picture is worth a thousand
words…

83. … if it loads

84. 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)

85. Time to replace JPEG and PNG
Images

86. Lossy format: WebP (weppy) 25-40%
Images

87. Lossy format: JPEG 2000 (JPX) 20%
Images

88. Lossy format: JPEG XR (JXR) 25%
Images

89. Lossy format: HEIF (heef) 25%
Images

90. Lossless format: Zopfli PNG
https://github.com/imagemin/zopflipng-bin
20%
Images

91. Lossless format: Guetzli JPEG
https://github.com/google/guetzli
20-30%
Images

92. Deal with compatibility!
Images
• Service Workers decoders
• Hello to <picture>

93. <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>

94. Meet HTTP Client Hints
Images
• Browser will expose data to the server
<meta http-equiv="Accept-CH"
content="DPR, Viewport-Width, Downlink, Device-Memory”>
HTML

95. Meet HTTP Client Hints
Images
• Chrome 67 includes more Hints
• RTT
• Downlink
• ECT (2g, 3g, 4g, slow-2g)

96. Decode images in a thread
Images
• github.com/GoogleChrome/offthread-image

97. Stop using Animated GIFs!
Images
• Use Animated PNGs or Animated WebP
• Use muted videos
• Use <img> with video (iOS 12)

98. The future looks interesting!
Images
• AVIF
• BPG
• FLIF

99. Hack User Experience

100. Consistent Frame Rate and
Response Times
User Experience
• Don’t execute JS for more than 50ms
• Use LongTask API for detection
• Use WebWorkers or requestIdleCallback

101. Avoid calculations and repaints
User Experience
• Promote animated layers to the GPU
CSS will-change
• Limit browser’s ability to style, layout and paint
CSS Containment

102. Passive Event Listener
User Experience

103. Reactive Web Performance
User Experience

104. Know about the context
User Experience
• Client-side Performance APIs
• Network Information API
• Device Memory Client Hint
• Save-Data Client Hint

105. Consistent Experience
User Experience
• Web Fonts
• Change SW’s cache policy
• Reduce amount of loaded data
• 1x image not matter DPR

106. Feeling bad enough?

107. Performance is TOP PRIORITY
Push it even more
It’s a worthwhile effort

108. Make it fast!

109. Foto de freefoto.com
firtman@gmail.com
@firt