0.6 seconds is the new slow

Slow sites frustrate consumers. Frustration costs money. To delight your audience, beat competitors, and please Google, your site will need to load in under a second. Web performance is no longer an art, but a science. You have 600 milliseconds; how will you spend them?

Transcript

1. @jonoalderson
   0.6 seconds is the new slow
   

   View Slide

2. @jonoalderson
   Hello!
   

   View Slide

3. @jonoalderson
   WARNING!
   

   View Slide

4. @jonoalderson
   Users expect fast
   

   View Slide

5. @jonoalderson
   Delays of over 3 seconds can lead
   to over 40% abandonment
   Google, 2016, via http:/
   /bit.ly/2OBDJGq
   

   View Slide

6. @jonoalderson
   Wired Magazine, 2014
   47% of people expect a site to
   load in less than 2 seconds
   

   View Slide

7. @jonoalderson
   20% of users abandon their cart
   if the transaction process is too
   slow
   Radware, 2014, http:/
   /bit.ly/2weioeS
   

   View Slide

8. @jonoalderson
   Baqend, 2018, http:/
   /bit.ly/2MA4nSZ
   

   View Slide

9. @jonoalderson
   Time is money
   

   View Slide

10. @jonoalderson
    Think with Google, http:/
    /bit.ly/2N3BXRz
    

    View Slide

11. @jonoalderson
    So, how well are we performing?
    

    View Slide

12. @jonoalderson
    We suck
    

    View Slide

13. @jonoalderson
    Industry USA UK Germany Japan
    Automotive 9.5 12.3 11.0 10.3
    Business & Industrial Markets 8.7 8.3 8.2 8.1
    Classifieds & Local 7.9 8.3 7.0 8.3
    Finance 8.3 8.0 8.6 7.6
    Media & Entertainment 9.0 8.8 7.6 8.4
    Retail 9.8 10.3 10.3 8.3
    Technology 11.3 10.6 8.8 10.0
    Travel 10.1 10.9 7.1 8.2
    MachMetrics, 2018, http:/
    /bit.ly/2PiFzgK
    Seconds to “visually loaded” on a 3g connection
    

    View Slide

14. @jonoalderson
    But not for long...
    

    View Slide

15. @jonoalderson
    

    View Slide

16. @jonoalderson
    Google Webmaster Blog, 2018, http:/
    /bit.ly/2wggdHs
    

    View Slide

17. @jonoalderson
    Google Webmaster Blog, 2018, http:/
    /bit.ly/2wggdHs
    

    View Slide

18. @jonoalderson
    “Speed underpins
    user experience”
    

    View Slide

19. @jonoalderson
    User experience is the biggest
    ranking factor*
    

    View Slide

20. @jonoalderson
    And for Google, speed = efficiency
    

    View Slide

21. @jonoalderson
    User
    experience
    Crawl
    efficiency
    Speed
    

    View Slide

22. @jonoalderson
    

    View Slide

23. @jonoalderson
    

    View Slide

24. @jonoalderson
    

    View Slide

25. @jonoalderson
    So, efficiency speed
    improvements will continue to
    drive revenue
    

    View Slide

26. @jonoalderson
    So, if you wait until your
    competitors are faster than you,
    you’ll be too late
    

    View Slide

27. @jonoalderson
    And as sites get faster,
    slow is going to feel slower
    

    View Slide

28. @jonoalderson
    “So, what do we need to do?”
    

    View Slide

29. @jonoalderson
    HINT: It’s not a big web
    (re)development project
    

    View Slide

30. @jonoalderson
    “We have a big site redevelopment
    process in the works, scheduled for
    Summer 2019”
    

    View Slide

31. @jonoalderson
    “We have a big site redevelopment
    process in the works, scheduled for
    Summer 2019”
    No
    No
    

    View Slide

32. @jonoalderson
    You win by a thousand tweaks
    

    View Slide

33. @jonoalderson
    Now, and every day, forever
    

    View Slide

34. @jonoalderson
    Make bits of it FASTER
    

    View Slide

35. @jonoalderson
    But what does that mean?
    And where do you start?
    

    View Slide

36. @jonoalderson
    There are two truths
    

    View Slide

37. @jonoalderson
    [1]
    There’s no such thing as speed.
    

    View Slide

38. @jonoalderson
    How do you measure ‘speed’?
    

    View Slide

39. @jonoalderson
    “The time how long it takes for
    a page to finish loading”
    

    View Slide

40. @jonoalderson
    But, what does that mean?
    

    View Slide

41. @jonoalderson
    What if the server responds
    quickly, but then it takes ages to
    show the content?
    

    View Slide

42. @jonoalderson
    What if the page has
    components which only load
    when you interact, or scroll?
    Are they “finished”?
    

    View Slide

43. @jonoalderson
    We need better definitions
    

    View Slide

44. @jonoalderson
    Most stock metrics from speed
    check + optimisation tools suck
    

    View Slide

45. @jonoalderson
    Pingdom, Website speed test, https:/
    /tools.pingdom.com/
    

    View Slide

46. @jonoalderson
    Pingdom, Website speed test, https:/
    /tools.pingdom.com/
    Doesn’t actually
    measure
    

    View Slide

47. @jonoalderson
    Pingdom, Website speed test, https:/
    /tools.pingdom.com/
    At that point in time, for
    that URL, for that config,
    from that location
    Doesn’t actually
    measure
    

    View Slide

48. @jonoalderson
    Pingdom, Website speed test, https:/
    /tools.pingdom.com/
    Relative to other
    people testing
    their homepages
    At that point in time, for
    that URL, for that config,
    from that location
    Doesn’t actually
    measure
    

    View Slide

49. @jonoalderson
    Load fewer, smaller things, duh
    Pingdom, Website speed test, https:/
    /tools.pingdom.com/
    Relative to other
    people testing
    their homepages
    At that point in time, for
    that URL, for that config,
    from that location
    Doesn’t actually
    measure
    

    View Slide

50. @jonoalderson
    GTMetrix, https:/
    /gtmetrix.com/
    

    View Slide

51. @jonoalderson
    GTMetrix, https:/
    /gtmetrix.com/
    

    View Slide

52. @jonoalderson
    GTMetrix, https:/
    /gtmetrix.com/
    

    View Slide

53. @jonoalderson
    Silly!
    GTMetrix, https:/
    /gtmetrix.com/
    

    View Slide

54. @jonoalderson
    Google Analytics
    

    View Slide

55. @jonoalderson
    Google Analytics
    

    View Slide

56. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2BxHcEw
    

    View Slide

57. @jonoalderson
    !!!
    “First
    contentful
    paint”
    Google PageSpeed Insights, http:/
    /bit.ly/2BxHcEw
    

    View Slide

58. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2LbGw7j
    

    View Slide

59. @jonoalderson
    “How quickly can we show
    something interesting?”
    

    View Slide

60. @jonoalderson
    Let’s grab an example
    

    View Slide

61. @jonoalderson
    

    View Slide

62. @jonoalderson
    Nav
    interactivity
    Fonts
    Personalised /
    account stuff
    Share buttons
    Author
    images
    Comments, related
    posts, all sorts!
    Video
    Big image
    Tons of CSS
    jQuery(!)
    

    View Slide

63. @jonoalderson
    

    View Slide

64. @jonoalderson
    Lazy video
    placeholder
    Skeleton
    container
    for image
    Stopped these
    assets from
    loading on the
    initial page load
    Personalised /
    account stuff
    via ajax
    Nav
    interactivity
    loads later
    Prioritise
    font loading
    

    View Slide

65. @jonoalderson
    [Things we’re obsessing about]
    ● Lazy loading
    ● Bytes transferred
    ● Complexity of DOM, CSS and JS
    ● Painting, layout and layering
    ● Colours, details, icons
    

    View Slide

66. @jonoalderson
    Site looks & feels faster :)
    

    View Slide

67. @jonoalderson
    Scores didn’t change much :(
    

    View Slide

68. @jonoalderson
    Don’t optimise for scores.
    Just make it faster.
    

    View Slide

69. @jonoalderson
    [2]
    The only thing which matters is
    the perception of speed.
    

    View Slide

70. @jonoalderson
    Google, Lighthouse docs, http:/
    /bit.ly/2PvhraI
    

    View Slide

71. @jonoalderson
    However, there’s one
    golden moment...
    

    View Slide

72. @jonoalderson
    Google, Lighthouse docs, http:/
    /bit.ly/2PvhraI
    

    View Slide

73. @jonoalderson
    “How quickly can we make it
    feel ready?”
    

    View Slide

74. @jonoalderson
    Perceived speed is hard to quantify!
    

    View Slide

75. @jonoalderson
    And there are lots of
    moving parts.
    

    View Slide

76. @jonoalderson
    

    View Slide

77. @jonoalderson
    

    View Slide

78. @jonoalderson
    Service workers
    

    View Slide

79. @jonoalderson
    Service workers
    After load
    

    View Slide

80. @jonoalderson
    Scary?
    

    View Slide

81. @jonoalderson
    Performance optimisation is no
    longer an art. It’s a science.
    

    View Slide

82. @jonoalderson
    Every site in the world
    can load in <1s.
    

    View Slide

83. @jonoalderson
    You just need to
    follow the rules.
    

    View Slide

84. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2MhP9lT
    

    View Slide

85. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2MhP9lT
    The internet, the
    speed of light
    

    View Slide

86. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2MhP9lT
    Hosting, servers,
    CDNs
    The internet, the
    speed of light
    

    View Slide

87. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2MhP9lT
    Hosting, servers,
    CDNs
    The internet, the
    speed of light
    CMS, plugins &
    extensions
    

    View Slide

88. @jonoalderson
    Google PageSpeed Insights, http:/
    /bit.ly/2MhP9lT
    Hosting, servers,
    CDNs
    HTML,
    CSS & JS
    The internet, the
    speed of light
    CMS, plugins &
    extensions
    

    View Slide

89. @jonoalderson
    Where do we start?
    

    View Slide

90. @jonoalderson
    Me, just now
    

    View Slide

91. @jonoalderson
    Just go and find the slow stuff.
    

    View Slide

92. @jonoalderson
    Use tools to spot problems
    

    View Slide

93. @jonoalderson
    Webpagetest
    

    View Slide

94. @jonoalderson
    Webpagetest
    

    View Slide

95. @jonoalderson
    Webpagetest
    

    View Slide

96. @jonoalderson
    Pingdom Website Speed Test, http:/
    /bit.ly/2MhP9lT
    

    View Slide

97. @jonoalderson
    Pingdom Website Speed Test, http:/
    /bit.ly/2MhP9lT
    

    View Slide

98. @jonoalderson
    

    View Slide

99. @jonoalderson
    So we refactored that file...
    1 dev, 1 day
    

    View Slide

100. @jonoalderson
     

     View Slide

101. @jonoalderson
     0.6 seconds
     

     View Slide

102. @jonoalderson
     Wow!
     

     View Slide

103. @jonoalderson
     However… I may not have been
     completely honest with you.
     

     View Slide

104. @jonoalderson
     

     View Slide

105. @jonoalderson
     

     View Slide

106. @jonoalderson
     

     View Slide

107. @jonoalderson
     0.6 seconds on a fast desktop wifi
     2.7 seconds on ‘fast 3g’ emulation
     slow!
     

     View Slide

108. @jonoalderson
     That’s a bit rubbish...
     

     View Slide

109. @jonoalderson
     We’re on a journey of 1,000 tweaks.
     There is no magic bullet.
     

     View Slide

110. @jonoalderson
     So what can you do, today?
     

     View Slide

111. @jonoalderson
     Here’s how you shortcut speed
     Some “quick” wins!
     

     View Slide

112. @jonoalderson
     0. Load less stuff
     1. Tidy up your CMS
     2. Bolt on a CDN (Cloudflare)
     3. Get good hosting
     4. Use a static page cache
     5. Optimise your resources
     6. Use AMP(?)
     

     View Slide

113. @jonoalderson
     0. Load less stuff
     

     View Slide

114. @jonoalderson
     ● Plugins, extensions and integrations
     ● Fonts
     ● JavaScript
     [BASICS]
     

     View Slide

115. @jonoalderson
     ● Lazy-loading resources
     ● Cross-domain resource reduction
     ● DNS & asset prefetch/preload
     [ADVANCED]
     

     View Slide

116. @jonoalderson
     Machmetrics, http:/
     /bit.ly/2wrfjYX
     

     View Slide

117. @jonoalderson
     1. Tidy up your CMS
     

     View Slide

118. @jonoalderson
     [BASICS]
     ● Use plugins, extensions and integrations to measure(!)
     

     View Slide

119. @jonoalderson
     

     View Slide

120. @jonoalderson
     2. Bolt on a CDN
     

     View Slide

121. @jonoalderson
     

     View Slide

122. @jonoalderson
     

     View Slide

123. @jonoalderson
     

     View Slide

124. @jonoalderson
     ● HTTP/2
     ● Server Push
     [ADVANCED]
     

     View Slide

125. @jonoalderson
     Tom Anthony, Distilled, http:/
     /bit.ly/2MhP9lT
     

     View Slide

126. @jonoalderson
     3. Get better hosting
     

     View Slide

127. @jonoalderson
     

     View Slide

128. @jonoalderson
     DIY sites (any size)
     Managed
     small-medium sites
     Large / enterprise
     sites
     

     View Slide

129. @jonoalderson
     4. Use a static page cache
     

     View Slide

130. @jonoalderson
     

     View Slide

131. @jonoalderson
     5. Optimise your resources
     

     View Slide

132. @jonoalderson
     

     View Slide

133. @jonoalderson
     ● Offload media to, e.g., Amazon S3
     ● Use an image CDN like Cloudinary or Imgix
     ● Modularise CSS and JavaScript
     [ADVANCED]
     

     View Slide

134. @jonoalderson
     Chrome Dev Tools, Coverage report
     

     View Slide

135. @jonoalderson
     6. Use Amp (?)
     

     View Slide

136. @jonoalderson
     

     View Slide

137. @jonoalderson
     

     View Slide

138. @jonoalderson
     This stuff makes a difference
     

     View Slide

139. @jonoalderson
     

     View Slide

140. @jonoalderson
     0.4 seconds
     

     View Slide

141. @jonoalderson
     0.4 seconds on a fast desktop wifi
     1.9 seconds on ‘fast 3g’ emulation
     Less slow!
     

     View Slide

142. @jonoalderson
     So, what’s still to do?
     

     View Slide

143. @jonoalderson
     Canonical AMP
     Automatic CSS
     tree shaking!
     

     View Slide

144. @jonoalderson
     PWAMP
     AMP Project, http:/
     /bit.ly/2wog8lN
     

     View Slide

145. @jonoalderson
     Post-load
     interaction
     improvements
     

     View Slide

146. @jonoalderson
     New ways of
     thinking
     about CSS
     Me, https:/
     /bit.ly/2D5Dlgy
     

     View Slide

147. @jonoalderson
     Emily Hayman, http:/
     /bit.ly/2MILD4c
     

     View Slide

148. @jonoalderson
     Resources
     

     View Slide

149. @jonoalderson
     Emily Grossman, SkyScanner, http:/
     /bit.ly/2wjnkzR
     

     View Slide

150. @jonoalderson
     Jon Henshaw, http:/
     /bit.ly/2wwy5xZ
     

     View Slide

151. @jonoalderson
     Bastian Grimm, Peak Ace, http:/
     /bit.ly/2wjnkzR
     

     View Slide

152. @jonoalderson
     

     View Slide

153. @jonoalderson
     Google Web Fundamentals, http:/
     /bit.ly/2wlVeUI
     

     View Slide

154. @jonoalderson
     Google Web Fundamentals, http:/
     /bit.ly/2wlVeUI
     

     View Slide

155. @jonoalderson
     AMP Project, http:/
     /bit.ly/2PhDKj1
     

     View Slide

156. @jonoalderson
     

     View Slide

157. @jonoalderson
     Thanks!
     

     View Slide