Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance Optimization

1,493 views

Published on

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.

SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance Optimization

  1. 1. The Marketer’s Guide TO PERFORMANCE bit.ly/searchlovespeed OPTIMIZATION
  2. 2. #Searchlove @goutaste
  3. 3. #Searchlove @goutaste fast
  4. 4. #searchlove @goutaste #Thestruggleisreal
  5. 5. #Searchlove @goutaste Image: @lukew
  6. 6. #searchlove @goutaste Marketing Principle Number Two Hundred Seventy One: Try not to piss off the people WHO MAKE YOU MONEY
  7. 7. #searchLove @goutaste BBC 1 SECOND ADDED = 10% AUDIENCE LOST https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
  8. 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. 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. 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. 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. 12. #searchLove @goutaste IMPORTANT FOR SEO? PERFORMANCE Why is
  13. 13. #searchLove @goutaste SPEED UPDATEhttps://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
  14. 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. 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. 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. 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. 18. #searchLove @goutaste EVEN IF IT DOESN’T IMPACT YOUR RANKING... Does it still impact the searcher?
  19. 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. 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. 21. #searchLove @goutaste PERFORMANCE Why do we suck at it?
  22. 22. #searchlove @goutaste IT’S HARD (duh)
  23. 23. #searchlove @goutaste But SERIOUSLY, It’s Super hard http://bit.ly/web-dev-challenges
  24. 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. 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. 26. #searchLove @goutaste HOW DO WE FIX THIS?
  27. 27. #searchLove @goutaste 1. Choose your Key Metrics 2. Get your data 3. Optimize the Experience A FRAMEWORK
  28. 28. #searchLove @goutaste 1. Choose your Key Metrics 2. Get your data 3. Optimize the Experience A FRAMEWORK
  29. 29. #searchlove @goutaste Measurements are a Proxy for FEELINGS
  30. 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. 31. #Searchlove @goutasteImage by @addyosmani / https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2
  32. 32. #Searchlove @goutaste Some metrics correlate with your business metrics https://www.slideshare.net/nicjansma/reliably-measuring-responsiveness
  33. 33. #searchLove @goutaste 1. Choose your Key Metrics 2. Get your data 3. Optimize the Experience A FRAMEWORK
  34. 34. #searchlove @goutaste " #LAB TESTS VS R.U.M.Real user metrics
  35. 35. #searchlove @goutaste Lab Test Tools + Dev Tools #
  36. 36. #Searchlove @goutaste Simulated Performance https://www.webpagetest.org/easy #
  37. 37. #Searchlove @goutastehttps://www.webpagetest.org/easy Simulated Performance#
  38. 38. #Searchlove @goutastehttps://www.webpagetest.org/easy Simulated Performance#
  39. 39. #Searchlove @goutastehttps://developers.google.com/web/tools/lighthouse/ Simulated Performance#
  40. 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. 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. 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. 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. 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. 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. 46. #Searchlove @goutastehttps://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics Real user metrics"
  47. 47. #Searchlove @goutastehttps://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics Real user metrics"
  48. 48. #searchlove @goutaste Real user metrics tools Performance Observer Paint Timing API Navigation Timing API " CrUX (Chrome User Experience Report) +
  49. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 63. #searchLove @goutaste 1. Choose your Key Metrics 2. Get your data 3. Optimize the Experience A FRAMEWORK
  64. 64. #searchlove @goutaste THE EXPERIENCE OPTIMIzING= OPTIMIzING OPTIMIzING SITE UX Actual Speed User Perception +
  65. 65. #searchlove @goutaste IF YOU WANT TO GO FAST, GO ALONE. IF YOU WANT TO GO FAR, GO TOGETHER.
  66. 66. #searchlove @goutaste OPTIMIzINGSITE Please make all of our images SVG format. How to NOT motivate developers ???
  67. 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. 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. 69. #Searchlove @goutaste OPTIMIzINGSITE https://images.guide FACT: Images are still the #1 cause of bloat on the web
  70. 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. 71. #Searchlove @goutaste OPTIMIzINGSITE Third Party SCRIPTS
  72. 72. #Searchlove @goutaste OPTIMIzINGSITE Third Party SCRIPTS
  73. 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. 74. #Searchlove @goutaste OPTIMIzINGSITE Third Party SCRIPTS https://www.practicalecommerce.com/quickly-drop-seconds-sites-load-time By @hamletbatista
  75. 75. #Searchlove @goutaste OPTIMIzINGSITE Third Party SCRIPTS https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/
  76. 76. #Searchlove @goutaste OPTIMIzINGSITE RENDER-BLOCKING SCRIPTS
  77. 77. #Searchlove @goutaste OPTIMIzINGSITE RENDER-BLOCKING SCRIPTS - A/B Testing
  78. 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. 79. #Searchlove @goutaste OPTIMIzINGSITE Tag Managers Tag Managers Should load asynchronously Everything they are doing should also be asynchronous
  80. 80. #Searchlove @goutaste OPTIMIzINGSITE SERVER-SIDE RENDERING IMAGES: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
  81. 81. #Searchlove @goutaste OPTIMIzINGSITE SERVER-SIDE RENDERING IMAGES: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
  82. 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. 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. 84. #Searchlove @goutaste OPTIMIzINGSITE Repeat Views - Lean on a Service Worker
  85. 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. 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. 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. 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. 89. #searchlove @goutaste OPTIMISING UX
  90. 90. #Searchlove @goutaste OPTIMIzING UX Putting users in an “Active Wait” state
  91. 91. #Searchlove @goutaste OPTIMIzING UX Putting users in an “Active Wait” state
  92. 92. #Searchlove @goutaste OPTIMIzING UX Putting users in an “Active Wait” state http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  93. 93. #searchlove @goutaste 1. Simplify your Performance KPIs https://hackernoon.com/measuring-web-performance-its-really-quite-simple-adeda8f7f39e GET EVERYONE ON BOARD:$ % &'
  94. 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. 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. 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. 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. 98. #searchLove @goutaste BBC 1 SECOND ADDED = 10% AUDIENCE LOST https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
  99. 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. 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. 101. #searchLove @goutaste HOW MUCH are you LEAVING ON THE TABLE?
  102. 102. #Searchlove @goutastehttp://bit.ly/speedimpact
  103. 103. #searchLove @goutaste THANKS Stalk ME: linkedin.com/in/emilygrossman TWEET ME: @GOUTASTE Work with me: skyscanner.net/jobs/growth/
  104. 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. 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

×