Session at ConFoo Montreal 2019 on the latest tips and tricks for achieving the best Web Performance on sites and apps.

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

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
Visually Complete

23. User-centric metrics
Custom Metric

24. I know you know
Performance is important
We need goals to achieve

25. Goals
First Meaningful Paint: 1-3s
First Interactive: 2-4s

26. You are already…

27. Optimizing the network transfer
You are already

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

29. CSS as Appetizer
You are already

30. JavaScript as Dessert
You are already

31. Optimizing Images
You are already

32. Defining an HTTP Cache Policy
You are already

33. Using Service Workers
You are already

34. Avoiding Redirects
You are already

35. You are already doing this

36. What’s the problem then?

37. Average time to load a mobile landing page
The problem
22 seconds
Research by thinkwithgoogle.com

38. If a page takes more than 3 seconds to load
The problem
53% leave it
Research by thinkwithgoogle.com

39. The problem
We always
underestimate
mobile

40. iOS and Android

41. Safari and Chrome?

42. browsers with market share

44. Using Cellular Networks!

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

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

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

48. Bandwidth
cellular networks

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

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

51. Chrome Lite Pages 🆕

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

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

54. Lite Page?
Chrome Lite Pages
• Cloud-based rendering
• "Smart" Optimizations
⭐🆕

55. Let’s hack Web Performance!

56. Hack First Load

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 different 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

60. Hack Data Transfer

61. QUIC over HTTP (aka HTTP/3)
Data Transfer
• Experimental transport protocol over UDP
• Reduces latency and connection messages
• HTTP/2 Interface with TLS
•

62. Data Transfer
Image from Chromium Blog

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

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

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

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

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

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

69. Hack Resource Loading

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

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

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

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

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

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

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

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

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

79. Resource Loading

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

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

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

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

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

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

86. Hack Images

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

88. … if it loads

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

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

91. Time to replace standard
JPEG and PNG
Images

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

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

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

97. Reactive Web Performance
User Experience

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

99. Hack User Experience

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

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

102. Feeling bad enough?

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

104. Foto de freefoto.com
www.firt.mobi
@firt
See you tomorrow 9am
Say hi to AR on the Web