Talk at YGLF Lithuania 2019 - Why Web Performance is important and how to push it even further

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

5. mobile+web developer & trainer

7. trainer

8. SOON

11. I have 2 goals…

12. Make you feel bad

13. Show you new tricks
😁

14. Let’s Start!

15. I know you know

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

17. Picture from Simon Howden freedigitalphotos.net

18. 18
Picture from Simon Howden freedigitalphotos.net

19. It's mostly frontend responsibility!

20. User-centric metrics

21. User-centric metrics
First Meaningful Paint

22. User-centric metrics
First Interactive

23. User-centric metrics
Speed index

24. Goals
First Meaningful Paint: 1-3s
First Interactive: 2-4s
Speed Index: 2-3s

25. You are already…

26. Optimizing the network transfer
You are already

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

28. CSS as Appetizer
You are already

29. JavaScript as Dessert
You are already

30. Optimizing Images
You are already

31. Defining an HTTP Cache Policy
You are already

32. Using Service Workers
You are already

33. You are already doing this

34. What’s the problem then?

35. First Contentful Paint
The problem
HTTP Archive with Lighthouse

36. Time to Interactive
The problem
HTTP Archive with Lighthouse

37. 2 3 4
5 6 7 8
8.9
1

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

40. The problem
We always
underestimate
mobile

41. iOS and Android

42. Safari and Chrome?

43. browsers with market share

46. Using Cellular Networks!

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

48. www.gsma.com/mobileeconomy - Dec 2018

49. www.gsma.com/mobileeconomy - Dec 2018
~10% of the time 4G is not used

50. Bandwidth
cellular networks

51. RTT - latency
cellular networks
Min Max

52. RTT - latency
cellular networks
Min Max

53. We still have a big performance
problem on the Mobile Web
(
)

54. Chrome Lite Pages 🆕

55. Chrome 73 Android
Chrome Lite Pages
• If users enables Data Saver
⭐🆕

56. Lite Page will be rendered if
Chrome Lite Pages
• You are in a 2G network
OR
• First Contentful Paint greater than 5s
⭐🆕

57. Lite Page?
Chrome Lite Pages
• Cloud-based rendering
• "Smart" Optimizations
• Not all images loaded
⭐🆕

58. Try it!
Chrome Lite Pages ⭐🆕

59. Progressive Web Apps 🆕

60. Progressive Web Apps 🆕

61. Progressive Web Apps 🆕

62. Progressive Web Apps 🆕

63. Progressive Web Apps 🆕

64. Let’s hack Web Performance!

65. Hack First Load

66. Avoid more than one roundtrip
First Load
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB

67. KiB?
🤔

68. How many bytes in a kilobyte?

69. 1 KB = 1024 bytes

70. 1 KB = 1024 bytes

71. 1 KB = 1000 bytes

76. 1 KiB = 1024 bytes

77. Avoid more than one roundtrip
First Load
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB

79. Above the Fold
(ATF)

80. Below the Fold
(BTF)

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

83. Hack Data Transfer

84. QUIC over HTTP
Data Transfer
• Experimental transport protocol over UDP
• Reduces latency and connection messages
• HTTP/2 Interface with TLS
•

85. Data Transfer
Image from Chromium Blog

86. Data Transfer
• Google: +3%
• YouTube: -30% buffering
• Facebook similar protocol: +2%
• 75% of requests can be optimized
QUIC

87. Data Transfer
It's currently the draft of HTTP/3!

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

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

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

91. Hack Resource Loading

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

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

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

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

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

100. Preloading
Resource Loading
Help the browser prioritize resources for rendering

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

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

103. Priority Hints
Resource Loading
<link rel="preload" as="image"
href="hero.jpg" importance="high">
<img src="otherimage.jpg" importance="low">
HTML
🆕

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

105. Resource Loading

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

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

108. Resource Loading

109. Hack Images

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

111. … if it loads

112. Preloading Responsive Images
<link rel="preload" as="image"
imagesrcset="200w.jpg 200w, 300w.jpg 300w"
imagesizes="(max-width: 500px) 50vw, 650px">
HTML
🆕
Images

113. Lazy Image Loading
<img src="photo.png" alt="Never forget it"
loading="lazy">
HTML
🆕
Images

114. Source: addyosmani.com

115. Time to replace standard
JPEG and PNG
Images

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

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

118. Hack User Experience

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

122. Reactive Web Performance
User Experience

123. Know about context with APIs
User Experience
• Network Information
• Performance Observers
• Save-Data Client Hint
• Device Memory Client Hint

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

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

127. First Load
Data Transfer
Resource Loading
Images
User Experience
Hack
Why Performance

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

129. Feeling bad enough?

130. Foto de freefoto.com
www.firt.mobi
@firt
FREE!