Emily Grossman's talk from BrightonSEO 2018

1. Emily Grossman
@goutaste
Skyscanner
Mobile Performance
Optimization for Marketers

2. #brightonseo @goutaste
THE REASONS TO CARE
ABOUT MOBILE SITE SPEED
ARE PILING ON

3. #brightonseo @goutaste
Image: @lukew
SLOW SITES STRESS OUT PEOPLE

4. #brightonseo @goutaste
BBC
1 SECOND ADDED =
10% AUDIENCE LOST
https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
SLOW SITES LOSE USERS

5. #brightonseo @goutaste
FAST SITES GET MORE ENGAGEMENT
https://www.nccgroup.trust/uk/about-us/resources/cook-real-user-monitoring-case-study/?style=Website+Performance&resources=Case+Studies
COOK FrOZEN MEALS
10% ENGAGEMENT
.85 SEC AVG PAGE LOAD

6. #brightonseo @goutaste
FAST SITES GET MORE ORDERS
ALI EXPRESS
10.5% ORDERS
https://edge.akamai.com/ec/us/highlights/keynote-speakers.jsp#edge2016futureofcommercemodal
36% AVG LOAD TIME

7. #brightonseo @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
PEOPLE SPEND MORE ON FAST SITES

8. #brightonseo @goutaste
IF USERS, ENGAGEMENT,
AND MONEY
WEREN’T ENOUGH…

9. #brightonseo @goutaste
GOOGLE HAS STARTED TO
INCENTIVISE MOBILE SITE
SPEED IMPROVEMENT

10. #brightonseo @goutaste
SPEED
UPDATE
https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
July 9

11. #brightonseo @goutastehttps://developers.google.com/web/updates/2018/07/search-ads-speed
SPEED
UPDATE 2:this time it’s advertisers
July 26

12. #brightonseo @goutaste
WE STILL 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)

13. #brightonseo @goutaste
BIG BRANDS, TOO
*”speed” = the 90th percentile of “First Contentful Paint” measurements from Chrome User Experience Report (“CrUX”)
https://www.thinkwithgoogle.com/feature/mobile/

14. #brightonseo @goutaste
SITE SPEEDWhy do we suck at it?
MOBILE

15. #brightonseo @goutaste
IT’S NOT BECAUSE WE
DON’T KNOW HOW TO FIX
SLOW WEBSITES

16. #brightonseo @goutaste
“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
THE APPROACH IS (MOSTLY)
THE SAME

17. #brightonseo @goutaste
YOU COULD LITERALLY
GOOGLE THIS TOPIC

18. #brightonseo @goutaste
SO LET’S NOT GO
THROUGH ANOTHER
HIGHLIGHT REEL OF ALL
THE TOP TIPS WE’VE BEEN
AVOIDING FOR YEARS

19. #brightonseo @goutaste
TODAY, LET’S TALK
ABOUT WHY WE’RE
FAILING, AND HOW WE
SHOULD FIX IT

20. Performance
MOBILE
OPTIMISATION

21. #brightonseo @goutaste
13 REASONS
WHY YOU’RE SLOW

22. #brightonseo @goutaste
1. You don’t
know how slow
you are

23. #brightonseo @goutaste
YOU
Images owned by Apple inc and Motorola

24. #brightonseo @goutaste
YOU
Images owned by Apple inc and Motorola
YOUR POTENTIAL CUSTOMER

25. #brightonseo @goutaste
YOU
Images owned by Apple inc and Motorola
YOUR POTENTIAL CUSTOMER
£1000 £100
Hexa-Core
A12
Bionic chip
1.2GHz
quad-core
Processor
Company Fiber
WiFi 3G Network

26. #brightonseo @goutastehttps://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
JS PROCESSING FOR CNN.COM

27. #brightonseo @goutaste

28. #brightonseo @goutaste
https://www.webpagetest.org/easy

29. #brightonseo @goutaste
2. You don’t
know how to get
organizational
buy-in

30. #brightonseo @goutastehttp://bit.ly/speedimpact

31. #brightonseo @goutastehttps://www.thinkwithgoogle.com/feature/mobile/

32. #brightonseo @goutaste
3. You think
performance is
Not My Job™

33. #brightonseo @goutaste
DO YOU CARE ABOUT:
✅
✅
✅
bounce rate
conversion rate
revenue

34. #brightonseo @goutaste
CONGRATS,
IT’S YOUR JOB NOW

35. #brightonseo @goutaste
IS IT ONLY
YOUR JOB?

36. #brightonseo @goutaste
THAT MEANS YOU
HAVE TO FIGURE OUT
OWNERSHIP

37. #brightonseo @goutaste
MARKETING OWNS:
✅
✅
✅
problem statements
prioritisation (w/ dev)
validating hard tradeoffs
against KPIsFor
example

38. #brightonseo @goutaste
DEVELOPMENT OWNS:
✅
✅
✅
diagnosing issues
prioritisation (w/ marketing)
For
example
implementing solutions

39. #brightonseo @goutaste
4. You don’t
know what to
measure

40. #brightonseo @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?

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

42. #brightonseo @goutaste
5. You don’t
know how to
measure

43. #brightonseo @goutaste
"
#LAB TESTS
VS
R.U.M.Real user metrics

44. #brightonseo @goutastehttps://www.webpagetest.org/easy
Simulated Performance#

45. #brightonseo @goutastehttps://developers.google.com/web/tools/lighthouse/
Simulated Performance#

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

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

48. #brightonseo @goutaste
Real user metrics"
https://dev.to/rick_viscomi/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o

49. #brightonseo @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
"#

50. #brightonseo @goutaste
6. You don’t
know how to
prioritise

51. #brightonseo @goutaste
Helping Devs Prioritize
RUM* Lab
FP FMP FID FP FMP TTI
URL/
templ
ate
URL/
templ
ate
URL/
templ
ate
*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?

52. #brightonseo @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 FID FP FMP TTI Traffic
Search
Traffic
Conversion
Rate
Conversion
Rate from
Search
CTR
URL/
templ
ate
URL/
templ
ate
URL/
templ
ate
How bad is it? What is the potential impact?

53. #brightonseo @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 FID FP FMP TTI Traffic
Search
Traffic
Conversion
Rate
Conversion
Rate from
Search
CTR Effort Score
URL/
templ
ate
URL/
templ
ate
URL/
templ
ate
Effort?
Helping Devs Prioritize

54. #brightonseo @goutaste
7. You don’t
know how to ask
for help from
your developers

55. #brightonseo @goutaste
Please
make all of
our images
SVG
format.
Avoid Solutionising
???
Images from open clip art

56. #brightonseo @goutaste
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 First
Input Delay metrics for
real users.
Speak in
problem statements
OK,
FUN!
Images from open clip art

57. #brightonseo @goutaste
8. You don’t
know how to
say no

58. #brightonseo @goutaste
Third Party SCRIPTS

59. #brightonseo @goutaste

60. #brightonseo @goutaste
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/

61. #brightonseo @goutastehttps://www.practicalecommerce.com/quickly-drop-seconds-sites-load-time By @hamletbatista
Third Party SCRIPTS

62. #brightonseo @goutastehttps://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/
Third Party SCRIPTS

63. #brightonseo @goutaste
9. You don’t think
about the site
speed impact of
your SEO
decisions

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

65. #brightonseo @goutaste
10. You don’t
think about the
SEO impact of
your site speed
decisions

66. #brightonseo @goutastehttps://images.guide
FACT: Images are still the #1 cause of bloat on the web

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

68. #brightonseo @goutaste
11. You don’t
consider
perceived
performance

69. #brightonseo @goutaste
THE EXPERIENCE
OPTIMIzING=
OPTIMIzING
OPTIMIzING
SITE
UX
Actual Speed
User Perception
+

70. #brightonseo @goutaste
SLOW QUEUES
FAST QUEUES

71. #brightonseo @goutaste
OPTIMIzING UX
Putting users in an “Active Wait” state

72. #brightonseo @goutaste
OPTIMIzING UX
Putting users in an “Active Wait” state

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

74. #brightonseo @goutaste
12. You don’t
consider repeat
view
performance

75. #brightonseo @goutaste
Repeat Views - Lean on a Service Worker

76. #brightonseo @goutasteImage: https://www.heise.de/developer/artikel/Progressive-Web-Apps-Teil-2-Die-Macht-des-Service-Worker-3740464.html
Repeat Views - Lean on a Service Worker

77. #brightonseo @goutaste
13. You fix the
problem but the
site gets slow
again

78. #brightonseo @goutaste
1. EVANGELISE your Performance KPIs
2. ENFORCE PERFORMANCE BUDGETS
3. TREAT PERF ISSUES LIKE BUGS
https://hackernoon.com/measuring-web-performance-its-really-quite-simple-adeda8f7f39e
OPERATIONALISE
PERFORMANCE
$ %
&'

79. #brightonseo @goutaste
1. EVANGELISE your Performance KPIs
2. ENFORCE PERFORMANCE BUDGETS
3. TREAT PERF ISSUES LIKE BUGS
OPERATIONALISE
PERFORMANCE
$ %
&'
Read: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

80. #brightonseo @goutasteRead: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

81. #brightonseo @goutaste
Embrace performance budgets and learn to
live within them.
For mobile, aim for a JS budget of
< 170KB minified/compressed.
Uncompressed this is still ~0.7MB of
code.
Budgets are critical to success,
however, they can’t magically fix perf
in isolation. Team culture, structure
and enforcement matter. Building without
a budget invites performance regressions
and failure.
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
@addyosmani

82. #brightonseo @goutaste
1. EVANGELISE your Performance KPIs
2. ENFORCE PERFORMANCE BUDGETS
3. TREAT PERF ISSUES LIKE BUGS
OPERATIONALISE
PERFORMANCE
$ %
&'

83. #brightonseo @goutastehttp://www.uniteu.com/assets/images/akamai_eretail_success_whitepaper.pdf (hat tip: Rob Harrop @robertharrop)
MORE PEOPLE
PERMANENTLY
ABANDON SLOW (28%)
THAN DOWN (9%)

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

85. #brightonseo @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

86. THANKS
TWEET ME: @GOUTASTE
skyscanner.net/jobs/growth/
Work with me: