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