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.

13 Reasons Why You're Slow (and what you can start to do about it)

934 views

Published on

Emily Grossman's talk from BrightonSEO 2018

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

13 Reasons Why You're Slow (and what you can start to do about it)

  1. 1. Emily Grossman
 @goutaste Skyscanner Mobile Performance Optimization for Marketers
  2. 2. #brightonseo @goutaste THE REASONS TO CARE ABOUT MOBILE SITE SPEED ARE PILING ON
  3. 3. #brightonseo @goutaste Image: @lukew SLOW SITES STRESS OUT PEOPLE
  4. 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. 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. 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. 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. 8. #brightonseo @goutaste IF USERS, ENGAGEMENT, AND MONEY WEREN’T ENOUGH…
  9. 9. #brightonseo @goutaste GOOGLE HAS STARTED TO INCENTIVISE MOBILE SITE SPEED IMPROVEMENT
  10. 10. #brightonseo @goutaste SPEED UPDATE https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html July 9
  11. 11. #brightonseo @goutastehttps://developers.google.com/web/updates/2018/07/search-ads-speed SPEED UPDATE 2:this time it’s advertisers July 26
  12. 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. 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. 14. #brightonseo @goutaste SITE SPEEDWhy do we suck at it? MOBILE
  15. 15. #brightonseo @goutaste IT’S NOT BECAUSE WE DON’T KNOW HOW TO FIX SLOW WEBSITES
  16. 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. 17. #brightonseo @goutaste YOU COULD LITERALLY GOOGLE THIS TOPIC
  18. 18. #brightonseo @goutaste SO LET’S NOT GO THROUGH ANOTHER HIGHLIGHT REEL OF ALL THE TOP TIPS WE’VE BEEN AVOIDING FOR YEARS
  19. 19. #brightonseo @goutaste TODAY, LET’S TALK ABOUT WHY WE’RE FAILING, AND HOW WE SHOULD FIX IT
  20. 20. Performance MOBILE OPTIMISATION
  21. 21. #brightonseo @goutaste 13 REASONS WHY YOU’RE SLOW
  22. 22. #brightonseo @goutaste 1. You don’t know how slow you are
  23. 23. #brightonseo @goutaste YOU Images owned by Apple inc and Motorola
  24. 24. #brightonseo @goutaste YOU Images owned by Apple inc and Motorola YOUR POTENTIAL CUSTOMER
  25. 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. 26. #brightonseo @goutastehttps://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 JS PROCESSING FOR CNN.COM
  27. 27. #brightonseo @goutaste
  28. 28. #brightonseo @goutaste https://www.webpagetest.org/easy
  29. 29. #brightonseo @goutaste 2. You don’t know how to get organizational buy-in
  30. 30. #brightonseo @goutastehttp://bit.ly/speedimpact
  31. 31. #brightonseo @goutastehttps://www.thinkwithgoogle.com/feature/mobile/
  32. 32. #brightonseo @goutaste 3. You think performance is Not My Job™
  33. 33. #brightonseo @goutaste DO YOU CARE ABOUT: ✅ ✅ ✅ bounce rate conversion rate revenue
  34. 34. #brightonseo @goutaste CONGRATS, IT’S YOUR JOB NOW
  35. 35. #brightonseo @goutaste IS IT ONLY YOUR JOB?
  36. 36. #brightonseo @goutaste THAT MEANS YOU HAVE TO FIGURE OUT OWNERSHIP
  37. 37. #brightonseo @goutaste MARKETING OWNS: ✅ ✅ ✅ problem statements prioritisation (w/ dev) validating hard tradeoffs against KPIsFor example
  38. 38. #brightonseo @goutaste DEVELOPMENT OWNS: ✅ ✅ ✅ diagnosing issues prioritisation (w/ marketing) For example implementing solutions
  39. 39. #brightonseo @goutaste 4. You don’t know what to measure
  40. 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. 41. #brightonseo @goutasteImage by @addyosmani / https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2
  42. 42. #brightonseo @goutaste 5. You don’t know how to measure
  43. 43. #brightonseo @goutaste " #LAB TESTS VS R.U.M.Real user metrics
  44. 44. #brightonseo @goutastehttps://www.webpagetest.org/easy Simulated Performance#
  45. 45. #brightonseo @goutastehttps://developers.google.com/web/tools/lighthouse/ Simulated Performance#
  46. 46. #brightonseo @goutastehttps://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics Real user metrics"
  47. 47. #brightonseo @goutastehttps://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics Real user metrics"
  48. 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. 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. 50. #brightonseo @goutaste 6. You don’t know how to prioritise
  51. 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. 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. 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. 54. #brightonseo @goutaste 7. You don’t know how to ask for help from your developers
  55. 55. #brightonseo @goutaste Please make all of our images SVG format. Avoid Solutionising ??? Images from open clip art
  56. 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. 57. #brightonseo @goutaste 8. You don’t know how to say no
  58. 58. #brightonseo @goutaste Third Party SCRIPTS
  59. 59. #brightonseo @goutaste
  60. 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. 61. #brightonseo @goutastehttps://www.practicalecommerce.com/quickly-drop-seconds-sites-load-time By @hamletbatista Third Party SCRIPTS
  62. 62. #brightonseo @goutastehttps://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/ Third Party SCRIPTS
  63. 63. #brightonseo @goutaste 9. You don’t think about the site speed impact of your SEO decisions
  64. 64. #brightonseo @goutaste OPTIMIzINGSITE SERVER-SIDE RENDERING IMAGES: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
  65. 65. #brightonseo @goutaste 10. You don’t think about the SEO impact of your site speed decisions
  66. 66. #brightonseo @goutastehttps://images.guide FACT: Images are still the #1 cause of bloat on the web
  67. 67. #brightonseo @goutaste MAKE LAZY-LOADED IMAGES SEarch-FRIENDLY https://www.youtube.com/watch?v=PFwUbgvpdaQ Google Best Practices: Noscript or schema.org
  68. 68. #brightonseo @goutaste 11. You don’t consider perceived performance
  69. 69. #brightonseo @goutaste THE EXPERIENCE OPTIMIzING= OPTIMIzING OPTIMIzING SITE UX Actual Speed User Perception +
  70. 70. #brightonseo @goutaste SLOW QUEUES FAST QUEUES
  71. 71. #brightonseo @goutaste OPTIMIzING UX Putting users in an “Active Wait” state
  72. 72. #brightonseo @goutaste OPTIMIzING UX Putting users in an “Active Wait” state
  73. 73. #brightonseo @goutaste OPTIMIzING UX Putting users in an “Active Wait” state http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  74. 74. #brightonseo @goutaste 12. You don’t consider repeat view performance
  75. 75. #brightonseo @goutaste Repeat Views - Lean on a Service Worker
  76. 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. 77. #brightonseo @goutaste 13. You fix the problem but the site gets slow again
  78. 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. 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. 80. #brightonseo @goutasteRead: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/
  81. 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. 82. #brightonseo @goutaste 1. EVANGELISE your Performance KPIs 2. ENFORCE PERFORMANCE BUDGETS 3. TREAT PERF ISSUES LIKE BUGS OPERATIONALISE PERFORMANCE $ % &'
  83. 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. 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. 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. 86. THANKS TWEET ME: @GOUTASTE skyscanner.net/jobs/growth/ Work with me:

×