An introduction to Web Performance Optimization in 2016 - Talk delivered in Toronto, Canada, October 18th, 2016

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

2. mobile+web developer & trainer

4. trainer

6. Original Books

7. Translations I
don’t really
understand

9. Let’s start with data

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

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

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

13. -2.2s page load,
+15% downloads
Source: Firefox
:)

14. +60% faster,
+14% donations ($$$)
Source: Obama Campaign
:)

15. Site speed in search rank
Screen shot of blog post
…we’ve decided to take site
speed into account in our
search rankings
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-
search-ranking.html

16. Web Performance
Optimization

17. where to optimize?

18. server frontend development

19. Top 100,000 sites

20. Perception and Goals

21. immediate feedback
100ms
Jakob Nielsen - Usability Engineering

22. losing user’s flow of
thoughts 1s
Jakob Nielsen - Usability Engineering

23. Source: Google Developers
RAIL

24. 100ms
RAIL

25. 100ms 16ms
RAIL

26. 100ms 16ms 50ms
RAIL

27. 100ms 16ms 50ms 1s
RAIL

28. The Web today

29. Desktop and Mobile

30. Chrome, Firefox,
Edge, IE

31. iOS and Android

32. Safari and Chrome?

33. Browsers only?

36. web view browsing
Web View
25%
Browser
75%
Source: MOVR Report

37. Let’s see some data

38. Others
10%
iOS
45%
Android
45%

39. iOS
45%
Safari
100% ?

40. Apps (WebView)
25%
Safari
75%
iOS
45%

41. Others
10%
iOS
45%
Android
45%

42. Android
45%

43. Browser
33%
Chrome
67%
Android
45%

48. Opera
3%
UC Browser
3%
BB
4%
Samsung
11%
Chrome
37%
Safari
42%

49. Cellular
Networks

50. 4G is here! We shouldn’t worry
about performance anymore...
(
)

52. 50% of users are on 2G networks

53. only 21% has 4G Worldwide

54. ~30% of the time 4G not used

55. Bandwidth (Mbps)
0 3.5 7 10.5 14
2G 3G Wifi 4G

56. 2G
3G
4G
Home
0 250 500 750 1000
Min Max
Latency

57. 2G
3G
4G
Home
0 250 500 750 1000
Min Max
Latency

58. latency
request
bandwidth

59. Responsive Web
Design

60. Mobile websites are
the past, right?

63. Responsive Web Design
as a goal

66. who said that?

67. Your goal is more
conversions

68. responsive ->
+conversion?

69. Usability
Speed
Accessibility

70. RWD is a tool

71. RWD is not a goal

72. Wait! Google will penalize
non-responsive websites…
(
)

73. Mmm….
NOT REALLY

74. RESPONSIVE WEB
DESIGN
is the future

75. I’m not advocating for
m.*

77. Don’t penalize your
mobile users

78. Responsive Web Design
is a GREAT TOOL

81. Show me how to
perform better!

82. Basic Tips

83. Consider moving to
HTTP/2
#PERFTIP TLS
only

84. Reduce redirects
#PERFTIP
• Consume 100ms to 1s each
• Social networks will use one

85. Remover App Banners
#PERFTIP

87. idontwantyourfuckingapp.tumblr.com

88. Avoid Client Side
Rendering
• Reduces in 5x page load performance
• Embrace plain HTML for initial loading
#PERFTIP

89. CSS as appetizer
#PERFTIP

90. JavaScript as dessert
#PERFTIP
• Use non-blocking JavaScript

91. Use Responsive Images
#PERFTIP
• Deliver the right image to the current device
• srcset and <picture>

93. Use SVG
#PERFTIP

94. #PERFTIP

95. Careful with Web Fonts
#PERFTIP

96. Extreme tips

97. Load the page in
1 second
#PERFTIP

98. ATF content in
1 second
#PERFTIP

99. We need to separate
ABOVE THE FOLD
(ATF)

100. ATF in 1 second
#PERFTIP
14Kb packet

101. #PERFTIP
14Kb packet
• HTML, embedded CSS, embedded JavaScript
• Images?

102. Reevaluate RWD usage
#PERFTIP

103. Alternative compression
• Zopfli (over Gzip or deflate)
#PERFTIP
•+8% compression ratio

104. • Brotli +25% compression ratio
#PERFTIP TLS
only
Alternative compression

105. Alternative Image
Formats
• PNG with Zopfli (-8%)
• WebP (-35%)
• JPEG-HDR (-30%)
• BPG (-50/-70%)
#PERFTIP

106. Service Workers
• Cache Storage API
• Offline Experience
• Immediate loading experience
#PERFTIP

107. Upgrading to a
Progressive Web App
• Uses Service Workers
• Performance is a key
#PERFTIP

108. AMP

110. AMP-HTML

115. Consider creating AMP
content
• Alternative vs. Replacement
• Where responsive comes?
#PERFTIP

116. ure from Simon Howden freedigitalphotos.net!
uf! we've
covered a
lot!

117. • Performance -> conversion
• Perception Goals
• Understanding Mobile
• Basic Optimizations
• Extreme Optimizations

118. oreilly.com/ideas/mobile-web-performance-checklist

119. Phoo from freefoto.com
firtman@gmail.com
@firt
firt.mobi/hpmw