Most marketers know that improving site speed leads to better engagement, conversion rates, and even improved performance in search engines. Still, many marketers don’t get involved in web performance optimization projects, expecting them to be handled entirely by developers. In this talk, you’ll learn about marketing’s critical role in measuring, auditing, and optimizing performance to drive greater impact for your business.

1. The Marketer’s Guide TO
PERFORMANCE
bit.ly/searchlovespeed
OPTIMIZATION

2. #Searchlove @goutaste

3. #Searchlove @goutaste
fast

4. #searchlove @goutaste
#Thestruggleisreal

5. #Searchlove @goutaste
Image: @lukew

6. #searchlove @goutaste
Marketing Principle Number Two Hundred Seventy One:
Try not to piss off the people
WHO MAKE YOU MONEY

7. #searchLove @goutaste
BBC
1 SECOND ADDED =
10% AUDIENCE LOST
https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale

8. #searchlove @goutaste
COOK FrOZEN MEALS
7% CONVERSION RATE
10% ENGAGEMENT
.85 SEC AVG PAGE LOAD
https://www.nccgroup.trust/uk/about-us/resources/cook-real-user-monitoring-case-study/?style=Website+Performance&resources=Case+Studies
7% BOUNCE RATE

9. #searchlove @goutaste
ALI EXPRESS
10.5% ORDERS
https://edge.akamai.com/ec/us/highlights/keynote-speakers.jsp#edge2016futureofcommercemodal
27% CONVERSIONS
36% AVG LOAD TIME
For New Customers

10. #searchLove @goutaste
MOBIFY
100 MS REMOVED =
$376,789 REVENUE
INCREASE
http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html
(Corresponding to a 1.11% improvement in session-based conversions)

11. #searchLove @goutaste
TRAINLINE
300 MS REMOVED =
£800 MIL/ YEAR
https://www.youtube.com/watch?v=ai-6qwT6ES8&feature=youtu.be&t=462
IN INCREASED CUSTOMER SPENDING

12. #searchLove @goutaste
IMPORTANT FOR SEO?
PERFORMANCE
Why is

13. #searchLove @goutaste
SPEED
UPDATEhttps://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

14. #searchLove @goutaste
SPEED
UPDATEhttps://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
⚡ Impacts RANKING not indexing
⚡ Hurts SLOW pages
⚡ No BOOST to fast pages
⚡ Small number of queries impacted
⚡ The page that is judged is the page
a user will see in mobile SERPs
TLDR;

15. #searchLove @goutaste
SPEED
UPDATEhttps://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
⚡ Impacts RANKING not indexing
⚡ Hurts SLOW pages
⚡ No BOOST to fast pages
⚡ Small number of queries impacted
⚡ The page that is judged is the page
a user will see in mobile SERPs
TLDR;

16. #searchLove @goutaste
SPEED
UPDATEhttps://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
⚡ Impacts RANKING not indexing
⚡ Hurts SLOW pages
⚡ No BOOST to fast pages
⚡ Small number of queries impacted
⚡ The page that is judged is the page
a user will see in mobile SERPs
TLDR;

17. #searchLove @goutaste
SPEED
UPDATEhttps://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
⚡ Impacts RANKING not indexing
⚡ Hurts SLOW pages
⚡ No BOOST to fast pages
⚡ Small number of queries impacted
⚡ The page that is judged is the page
a user will see in mobile SERPs
TLDR;

18. #searchLove @goutaste
EVEN IF IT DOESN’T IMPACT YOUR RANKING...
Does it still impact the searcher?

19. #Searchlove @goutaste
WE SUCK
https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf
Sample: >900,000
Adwords Landing Pages
(People paid to promote
these!)
Best Practice
(3 sec)

20. #Searchlove @goutaste
BOSTON WEBSITES ARE ON
THE STRUGGLE BUS, TOO
*”speed” = the 90th percentile of “First Contentful Paint” measurements from Chrome User Experience Report (“CrUX”)
https://www.thinkwithgoogle.com/feature/mobile/

21. #searchLove @goutaste
PERFORMANCE
Why do we suck at it?

22. #searchlove @goutaste
IT’S HARD
(duh)

23. #searchlove @goutaste
But SERIOUSLY, It’s Super hard
http://bit.ly/web-dev-challenges

24. #searchlove @goutaste
But SERIOUSLY, It’s Super hard
http://bit.ly/web-dev-challenges
1. Devs don’t know
what the goals
that they need to
aim for are

25. #searchlove @goutaste
But SERIOUSLY, It’s Super hard
1. Devs don’t know
what the goals
that they need to
aim for are
2. Devs don’t have all
the info about
their user base &
the impact
http://bit.ly/web-dev-challenges

26. #searchLove @goutaste
HOW DO WE
FIX THIS?

27. #searchLove @goutaste
1. Choose your Key Metrics
2. Get your data
3. Optimize the Experience
A FRAMEWORK

28. #searchLove @goutaste
1. Choose your Key Metrics
2. Get your data
3. Optimize the Experience
A FRAMEWORK

29. #searchlove @goutaste
Measurements are a Proxy for
FEELINGS

30. #searchlove @goutaste
Is it happening? Is it useful? Is it useable?
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2
WHAT DOES “FAST” FEEL LIKE?

31. #Searchlove @goutasteImage by @addyosmani / https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

32. #Searchlove @goutaste
Some metrics correlate with your business metrics
https://www.slideshare.net/nicjansma/reliably-measuring-responsiveness

33. #searchLove @goutaste
1. Choose your Key Metrics
2. Get your data
3. Optimize the Experience
A FRAMEWORK

34. #searchlove @goutaste
"
#LAB TESTS
VS
R.U.M.Real user metrics

35. #searchlove @goutaste
Lab Test Tools
+ Dev Tools
#

36. #Searchlove @goutaste
Simulated Performance
https://www.webpagetest.org/easy
#

37. #Searchlove @goutastehttps://www.webpagetest.org/easy
Simulated Performance#

38. #Searchlove @goutastehttps://www.webpagetest.org/easy
Simulated Performance#

39. #Searchlove @goutastehttps://developers.google.com/web/tools/lighthouse/
Simulated Performance#

40. #searchlove @goutaste
Simulated Performance pros & cons
• Almost no setup required
• Easy to track
competitors
• Can test pages before
they launch
• Controlled variables, so
consistent (which is great
for debugging)
• Can test on multiple
networks
#

41. #searchlove @goutaste
Simulated Performance pros & cons
• Almost no setup required
• Easy to track
competitors
• Can test pages before
they launch
• Controlled variables, so
consistent (which is great
for debugging)
• Can test on multiple
networks
#

42. #searchlove @goutaste
Simulated Performance pros & cons
• Almost no setup required
• Easy to track
competitors
• Can test pages before
they launch
• Controlled environment,
so consistent (which is
great for debugging)
• Can test on multiple
networks
#

43. #searchlove @goutaste
Simulated Performance pros & cons
• Almost no setup required
• Easy to track
competitors
• Can test pages before
they launch
• Controlled environment,
so consistent (which is
great for debugging)
• Can test on multiple
networks/ devices
#

44. #searchlove @goutaste
• Hard to scale & keep
current
• Have to run multiple tests
• Doesn’t account for real
world conditions
• Difficult to get a good
understanding on pages
with dynamic content
such as ads
• Almost no setup required
• Easy to track
competitors
• Can test pages before
they launch
• Controlled environment,
so consistent (which is
great for debugging)
• Can test on multiple
networks/ devices
Simulated Performance pros & cons#

45. #searchlove @goutaste
• Hard to scale & keep
current
• Have to run multiple tests
• Doesn’t account for real
world conditions
• Difficult to get a good
understanding on pages
with dynamic content
such as ads
• Almost no setup required
• Easy to track
competitors
• Can test pages before
they launch
• Controlled environment,
so consistent (which is
great for debugging)
• Can test on multiple
networks/ devices
Simulated Performance pros & cons#

46. #Searchlove @goutastehttps://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
Real user metrics"

47. #Searchlove @goutastehttps://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
Real user metrics"

48. #searchlove @goutaste
Real user metrics tools
Performance Observer
Paint Timing API
Navigation Timing API
"
CrUX
(Chrome User Experience Report)
+

49. #searchlove @goutaste
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

50. #searchlove @goutaste
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

51. #searchlove @goutaste
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

52. #searchlove @goutaste
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

53. #searchlove @goutaste
Google Confirms Chrome Usage Data Used to
Measure Site Speed
https://moz.com/blog/google-chrome-usage-data-measure-site-speed // via @tomanthonySEO

54. #searchlove @goutaste
• Requires more eng
effort to set up
• Survivorship bias
• Limited to the browsers
& networks of your
audience
• Highly variable, so more
difficult to use for
debugging
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

55. #searchlove @goutaste
• Requires more eng
effort to set up
• Survivorship bias
• Limited to the browsers
& networks of your
audience
• Highly variable, so more
difficult to use for
debugging
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

56. #searchlove @goutaste
• Requires more eng
effort to set up
• Survivorship bias
• Limited to the browsers
& networks of your
audience
• Highly variable, so more
difficult to use for
debugging
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

57. #searchlove @goutaste
• Requires more eng
effort to set up
• Survivorship bias
• Limited to the browsers
& networks of your
audience
• Highly variable, so more
difficult to use for
debugging
• Very scaleable
• Real load times of your
users
• Great for seeing where
the real pain is on your
site
• In real time!
• What Google looks at.
RUM Performance pros & cons"

58. #Searchlove @goutaste
LAB & RUM Work TOGETHER
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
Write Code Test in the Lab
Validate with RUM Release to Users
"#

59. #Searchlove @goutaste
Helping Devs Prioritize
RUM* Lab
FP FMP TTI FP FMP TTI
URL/
templ
ate
1 2 3 0.5 1 1.5
URL/
templ
ate
0.3 0.6 1 0.5 1 1.5
URL/
templ
ate
1 2 7 2 3 4
*Ideally you have a few RUM columns tracking the 50-, 75-, and 90th percentile of your audience, controlling for seasonal variation

60. #Searchlove @goutaste*Ideally you have a few RUM columns tracking the 50-, 75-, and 90th percentile of your audience, controlling for seasonal variation
Helping Devs Prioritize
RUM* Lab Analytics Analytics Analytics Analytics
Search
Console
FP FMP TTI FP FMP TTI Traffic
Search
Traffic
Conversion
Rate
Conversion
Rate from
Search
CTR
URL/
templ
ate
1 2 3 0.5 1 1.5 30000 20000 10% 8% 19.7
URL/
templ
ate
0.3 0.6 1 0.5 1 1.5 50000 20000 20% 18% 4.5
URL/
templ
ate
1 2 7 2 3 4 25000 10000 22% 4% 30.9

61. #Searchlove @goutaste*Ideally you have a few RUM columns tracking the 50-, 75-, and 90th percentile of your audience, controlling for seasonal variation
Helping Devs Prioritize
RUM* Lab Analytics Analytics Analytics Analytics
Search
Console
Your Brain
FP FMP TTI FP FMP TTI Traffic
Search
Traffic
Conversion
Rate
Conversion
Rate from
Search
CTR Effort Score
URL/
templ
ate
1 2 3 0.5 1 1.5 30000 20000 10% 8% 19.7 2
URL/
templ
ate
0.3 0.6 1 0.5 1 1.5 50000 20000 20% 18% 4.5 8
URL/
templ
ate
1 2 7 2 3 4 25000 10000 22% 4% 30.9 4

62. #Searchlove @goutaste*Ideally you have a few RUM columns tracking the 50-, 75-, and 90th percentile of your audience, controlling for seasonal variation
How bad is it? What is the potential impact?
RUM* Lab Analytics Analytics Analytics Analytics
Search
Console
Your Brain
FP FMP TTI FP FMP TTI Traffic
Search
Traffic
Conversion
Rate
Conversion
Rate from
Search
CTR Effort Score
URL/
templ
ate
1 2 3 0.5 1 1.5 30000 20000 10% 8% 19.7 2
URL/
templ
ate
0.3 0.6 1 0.5 1 1.5 50000 20000 20% 18% 4.5 8
URL/
templ
ate
1 2 7 2 3 4 25000 10000 22% 4% 30.9 4
Effort?
Helping Devs Prioritize

63. #searchLove @goutaste
1. Choose your Key Metrics
2. Get your data
3. Optimize the Experience
A FRAMEWORK

64. #searchlove @goutaste
THE EXPERIENCE
OPTIMIzING=
OPTIMIzING
OPTIMIzING
SITE
UX
Actual Speed
User Perception
+

65. #searchlove @goutaste
IF YOU WANT TO GO
FAST, GO ALONE.
IF YOU WANT TO GO
FAR, GO TOGETHER.

66. #searchlove @goutaste
OPTIMIzINGSITE
Please
make all of
our images
SVG
format.
How to NOT
motivate developers
???

67. #searchlove @goutaste
OPTIMIzINGSITE
We have a serious
problem with the speed
our site is loading.
Estimates show we are
losing $X per second
delay.
Our goal is to shave
500ms off our First
Meaningful Paint and
Time to Interactive
metrics for real users.
How to
motivate developers
OK,
FUN!

68. #Searchlove @goutaste
OPTIMIzINGSITE
“It mostly boils down to:
Ship less stuff to your
customers, and what
you do ship, try and
deliver in an optimal
order.”
-Patrick Meenan, creator
of webpagetest.org
http://amzn.to/2E4qxbt

69. #Searchlove @goutaste
OPTIMIzINGSITE
https://images.guide
FACT: Images are still the #1 cause of bloat on the web

70. #Searchlove @goutaste
OPTIMIzINGSITE
MAKE LAZY-LOADED IMAGES SEarch-FRIENDLY
https://www.youtube.com/watch?v=PFwUbgvpdaQ
Google Best Practices: Noscript or schema.org

71. #Searchlove @goutaste
OPTIMIzINGSITE
Third Party SCRIPTS

72. #Searchlove @goutaste
OPTIMIzINGSITE
Third Party SCRIPTS

73. #Searchlove @goutaste
OPTIMIzINGSITE
Third Party SCRIPTS
“AMP’s biggest advantage isn’t the
library… It isn’t the AMP cache…
AMP’s biggest advantage is the
restrictions it draws on how much stuff
you can cram into a single page.”
https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/

74. #Searchlove @goutaste
OPTIMIzINGSITE
Third Party SCRIPTS
https://www.practicalecommerce.com/quickly-drop-seconds-sites-load-time By @hamletbatista

75. #Searchlove @goutaste
OPTIMIzINGSITE
Third Party SCRIPTS
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/

76. #Searchlove @goutaste
OPTIMIzINGSITE
RENDER-BLOCKING SCRIPTS

77. #Searchlove @goutaste
OPTIMIzINGSITE
RENDER-BLOCKING SCRIPTS - A/B Testing

78. #Searchlove @goutaste
OPTIMIzINGSITE
RENDER-BLOCKING SCRIPTS - A/B Testing
“Move all
your A/B
testing
decisions to
the backend.”
Patrick Meenan, creator of webpagetest.org
https://youtu.be/gDNK_61Fh0c?t=34m32s

79. #Searchlove @goutaste
OPTIMIzINGSITE
Tag Managers Tag Managers
Should load
asynchronously
Everything they
are doing should
also be
asynchronous

80. #Searchlove @goutaste
OPTIMIzINGSITE
SERVER-SIDE RENDERING
IMAGES: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

81. #Searchlove @goutaste
OPTIMIzINGSITE
SERVER-SIDE RENDERING
IMAGES: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

82. #Searchlove @goutaste
OPTIMIzINGSITE
Repeat Views - Lean on a Service Worker
Image: https://www.heise.de/developer/artikel/Progressive-Web-Apps-Teil-2-Die-Macht-des-Service-Worker-3740464.html

83. #Searchlove @goutaste
OPTIMIzINGSITE
Repeat Views - Lean on a Service Worker
Image: https://www.heise.de/developer/artikel/Progressive-Web-Apps-Teil-2-Die-Macht-des-Service-Worker-3740464.html

84. #Searchlove @goutaste
OPTIMIzINGSITE
Repeat Views - Lean on a Service Worker

85. #Searchlove @goutaste
“Resource Hinting” - DL Assets for Next page
BUY A CAT TOY
(links to checkout)
WE SELL CAT TOYS CAT TOY CHECKOUT
Cat.gif
Cat.gif
Hey, after you’re done loading
this page, if the user is still
here, can you get started on
this Cat.gif for the checkout?
OPTIMIzINGSITE
https://w3c.github.io/resource-hints/

86. #Searchlove @goutaste
“Resource Hinting” - DL Assets for Next page
BUY A CAT TOY
(links to checkout)
WE SELL CAT TOYS CAT TOY CHECKOUT
Cat.gif
OPTIMIzINGSITE
https://w3c.github.io/resource-hints/
<link rel="prefetch"
href=“//example.com/
cat.gif" as=“image">

87. #Searchlove @goutaste
“Resource Hinting” - DL Assets for this page
BUY A CAT TOY
(links to checkout)
We Sell Cat Toys
Hey browser, this page has a
super important font
CatFont
that you don’t discover until
super late. Can you make
sure to grab it early?
OPTIMIzINGSITE
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

88. #Searchlove @goutaste
“Resource Hinting” - DL Assets for this page
BUY A CAT TOY
(links to checkout)
WE SELL CAT TOYS
OPTIMIzINGSITE
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
<link rel="preload"
href="catfont.woff2"
as="font"
type="font/woff2"
crossorigin>

89. #searchlove @goutaste
OPTIMISING UX

90. #Searchlove @goutaste
OPTIMIzING UX
Putting users in an “Active Wait” state

91. #Searchlove @goutaste
OPTIMIzING UX
Putting users in an “Active Wait” state

92. #Searchlove @goutaste
OPTIMIzING UX
Putting users in an “Active Wait” state
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

93. #searchlove @goutaste
1. Simplify your Performance KPIs
https://hackernoon.com/measuring-web-performance-its-really-quite-simple-adeda8f7f39e
GET EVERYONE
ON BOARD:$ %
&'

94. #searchlove @goutaste
1. Simplify your Performance KPIs
2. Clarify Their Importance to the org
https://hackernoon.com/measuring-web-performance-its-really-quite-simple-adeda8f7f39e
GET EVERYONE
ON BOARD:$ %
&'

95. #searchlove @goutaste
1. Simplify your Performance KPIs
2. Clarify Their Importance to the org
3. Associate Load time with Real $$$
https://hackernoon.com/measuring-web-performance-its-really-quite-simple-adeda8f7f39e
GET EVERYONE
ON BOARD:$ %
&'

96. #searchlove @goutaste
LEARN TO ASK:
CAN WE
AFFORD IT?
Read: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

97. #searchlove @goutaste
“if the BBC site is slowing down due to load, certain
features will automatically switch off to bring the speed
up again. These will be low-importance things – such as a
promo box at the bottom of a page – that are expensive on
the server and few users will miss.”
SPEED > PROMO BOX

98. #searchLove @goutaste
BBC
1 SECOND ADDED =
10% AUDIENCE LOST
https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale

99. #searchLove @goutaste
MOBIFY
100 MS REMOVED =
$376,789 REVENUE
INCREASE
http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html
(Corresponding to a 1.11% improvement in session-based conversions)

100. #searchLove @goutaste
TRAINLINE
300 MS REMOVED =
£800 MIL/ YEAR
https://www.youtube.com/watch?v=ai-6qwT6ES8&feature=youtu.be&t=462
IN INCREASED CUSTOMER SPENDING

101. #searchLove @goutaste
HOW MUCH are you
LEAVING ON
THE TABLE?

102. #Searchlove @goutastehttp://bit.ly/speedimpact

103. #searchLove @goutaste
THANKS
Stalk ME: linkedin.com/in/emilygrossman
TWEET ME: @GOUTASTE
Work with me: skyscanner.net/jobs/growth/

104. #searchLove @goutaste
MORE READING
http://amzn.to/2FDyMIT http://amzn.to/2GExxdI
https://pathtoperf.com
(podcast)
http://amzn.to/2E4qxbt bit.ly/2018performance

105. #searchLove @goutaste
FOLLOW THEM:
Bastian Grimm
@basgr
Tim Kadlec
@tkadlec
Nichola Stott
@NicholaStott
Alex Russell
@slightlylate
Addy Osmani
@addyosmani
Tammy Everts
@tameverts
Lara Hogan
@lara_hogan
Estelle Weyl
@estellevw
Jono Alderson
@jonoalderson
Tom Anthony
@TomAnthonySEO
Paul Irish
@paul_irish