Slow sites frustrate consumers. Frustration costs money. To delight consumers, beat competitors, and to please Google, your site will need to load in under a second. And you’ll need to get there fast, otherwise, your competitors might beat you to the finish line. Sound impossible? Web performance is no longer an art, but a science. Yoast’s Jono Alderson shares the tips, tricks, tools, and tactics you need to speed up your website. In this presentation, learn: – The tactics to get your site to load in under a second. – How to prioritize all the different pieces when optimizing site speed. – How improved web performance can help you get better rankings and conversions.

1. @jonoalderson
How to Take Your Website Beyond Fast

2. @jonoalderson
Hello!

3. @jonoalderson
WARNING!

4. @jonoalderson
Users expect fast

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

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

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

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

9. @jonoalderson
Time is money

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

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

12. @jonoalderson
We suck

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

14. @jonoalderson
But not for long...

15. @jonoalderson

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

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

18. @jonoalderson
“Speed underpins
user experience”

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

20. @jonoalderson
And for Google, speed = efficiency

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

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

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

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

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

26. @jonoalderson
You win by a thousand tweaks

27. @jonoalderson
Now, and every day, forever

28. @jonoalderson
Make bits of it FASTER

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

30. @jonoalderson
There are two truths

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

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

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

34. @jonoalderson
But, what does that mean?

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

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

37. @jonoalderson
We need better definitions

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

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

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

41. @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

42. @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

43. @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

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

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

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

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

48. @jonoalderson
Let’s grab an example

49. @jonoalderson

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

51. @jonoalderson

52. @jonoalderson
Site looks & feels faster :)

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

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

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

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

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

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

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

60. @jonoalderson
Perceived speed is hard to quantify!

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

62. @jonoalderson

63. @jonoalderson

64. @jonoalderson
Service workers

65. @jonoalderson
Service workers
After load

66. @jonoalderson
Scary?

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

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

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

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

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

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

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

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

75. @jonoalderson
If only there was a guide...

76. @jonoalderson
Google, Web Fundamentals, http://bit.ly/2ZrAiZj

77. @jonoalderson
But everybody’s site is different

78. @jonoalderson
Where do you start?

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

80. @jonoalderson
Use tools to spot problems

81. @jonoalderson
Webpagetest

82. @jonoalderson
Webpagetest

83. @jonoalderson
Webpagetest

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

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

86. @jonoalderson

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

88. @jonoalderson

89. @jonoalderson
0.6 seconds

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

91. @jonoalderson

92. @jonoalderson

93. @jonoalderson

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

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

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

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

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

99. @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(?)

100. @jonoalderson
0. Load less stuff

101. @jonoalderson
● Plugins, extensions and integrations
● Bytes transferred
● DOM complexity
● Fonts
● Colours, details, icons, lines, borders, shadows
● JavaScript
[BASICS]

102. @jonoalderson
● Lazy-loading, deferring or async’ing resources
● Cross-domain resource reduction
● DNS & asset prefetch/preload
[ADVANCED]

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

104. @jonoalderson
1. Tidy up your CMS

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

106. @jonoalderson

107. @jonoalderson
2. Bolt on a CDN

108. @jonoalderson

109. @jonoalderson

110. @jonoalderson

111. @jonoalderson
● Page rules
● Edge workers
● Server push
[ADVANCED]

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

113. @jonoalderson
3. Get better hosting

114. @jonoalderson

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

116. @jonoalderson
4. Use a static page cache

117. @jonoalderson

118. @jonoalderson
5. Optimise your resources

119. @jonoalderson
tinypng.com

120. @jonoalderson
Squoosh.app

121. @jonoalderson
Squoosh.app

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

123. @jonoalderson
Chrome Dev Tools, Coverage report

124. @jonoalderson
6. Use Amp (?)

125. @jonoalderson
amp.dev

126. @jonoalderson
“The official” AMP WordPress plugin, wordpress.org/plugins/amp/

127. @jonoalderson
This stuff makes a difference

128. @jonoalderson

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

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

131. @jonoalderson
Canonical AMP
Automatic CSS
tree shaking!

132. @jonoalderson
Post-load
interaction
improvements

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

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

135. @jonoalderson
Resources

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

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

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

139. @jonoalderson

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

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

142. @jonoalderson
Links & References

143. @jonoalderson
5. “Delays of over 3 seconds can lead to over 50% abandonment”
Google / marketingdive.com 2016, via http://bit.ly/2OBDJGq
7. “20% of users abandon their cart if the transaction process is too slow”
Radware, 2014, http://bit.ly/2weioeS
8. GQ / Google / Amazon speed studies
Baqend, 2018, http://bit.ly/2MA4nSZ
10. Google speed / impact benchmarking tool
Think with Google, http://bit.ly/2N3BXRz
13. Seconds until “visually loaded” research
MachMetrics, 2018, http://bit.ly/2PiFzgK
16. Google announcements about speed as a ranking factor
Google Webmaster Blog, 2018, http://bit.ly/2wggdHs

144. @jonoalderson
39. Issues with Pingdom (and other’s) performance scoring
Pingdom, Website speed test, https://tools.pingdom.com/
45. Google’s PageSpeed Insights tool & First Contentful Paint
Google PageSpeed Insights, http://bit.ly/2BxHcEw
46. Google’s definition of the First Content Paint metric
Google PageSpeed Insights, http://bit.ly/2LbGw7j
56. Google stating “Load is not a single moment in time”
Google, Lighthouse docs, http://bit.ly/2PvhraI
58. Google’s definition of the Time to Interactive metric
Google, Lighthouse docs, http://bit.ly/2PvhraI
70. “You just need to follow the rules”; Google’s 1s loading overview
Google PageSpeed Insights, http://bit.ly/2MhP9lT

145. @jonoalderson
76. Google’s Web Fundamentals documentation 💖
Google, Web Fundamentals, http://bit.ly/2ZrAiZj
81. Waterfall reports from WebPageTest
webpagetest.org
84. Waterfall reports from Pingdom
Pingdom Website Speed Test, http://bit.ly/2MhP9lT
88. Chrome developer console, ‘Network’ report 💖
(ctrl+shift+j on Windows, ctrl+option+j on Mac)
103. How DNS prefetching works
Machmetrics, http://bit.ly/2wrfjYX
105. Query Monitor plugin 💖
https://en-gb.wordpress.org/plugins/query-monitor/

146. @jonoalderson
106. Server/system performance reporting with NewRelic 💖
newrelic.com
108. Cloudflare 💖
cloudflare.com
112. “An introduction to HTTP/2 & Service Workers for SEOs”
Tom Anthony, Distilled, http://bit.ly/2MhP9lT
115. Recommended hosting companies* 💖
117. Static page cache recommendations*
119. Systemised image compression/optimisation from TinyPNG
tinypng.com
*(my personal opinion, my own experience; your mileage may differ!)

147. @jonoalderson
120. On-demand image optimisation from Squoosh
squoosh.app
123. The ‘Coverage’ report in Chrome’s developer tools 💖
125. AMP
amp.dev
126. The ‘Official’ WordPress AMP plugin 💖
wordpress.org/plugins/amp/
132. The ‘Performance’ report in Chrome’s developer tools
133. A (proposed) new approach to CSS in WordPress
Me, https://bit.ly/2D5Dlgy
134. Performant Web Animations and Interactions: Achieving 60 FPS
Emily Hayman, http://bit.ly/2MILD4c

148. @jonoalderson
136. “The Marketer’s Guide to Performance Optimization”
Emily Grossman, SkyScanner, http://bit.ly/2wjnkzR
137. “Site Speed. You need it. Here's how to get it.”
Jon Henshaw, http://bit.ly/2wwy5xZ
138. "Super speed around the globe"
Bastian Grimm, Peak Ace, http://bit.ly/2wjnkzR
See also…
● Yoast.com
● JonoAlderson.com
● @jonoalderson

149. @jonoalderson

150. @jonoalderson
Thanks!

151. @jonoalderson