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.

SearchLeeds 2019 - Luke Monaghan - Site speed: Time to meet the mobile expectation

292 views

Published on

The need for speed is increasing, especially on mobile. At a time where mobile-users expect their needs to be met within 3 seconds, why do we find ourselves falling much shorter on this? Luke's SearchLeeds talk highlights the current standards delivered by industries on mobile, the differing standards we see cross-device, how shortfalls ultimately impact businesses and what we can do to ensure we deliver optimal mobile site speed performance. He also looked at existing and upcoming tools and technologies that we have at our disposal.

Published in: Marketing
  • Be the first to comment

SearchLeeds 2019 - Luke Monaghan - Site speed: Time to meet the mobile expectation

  1. 1. Measurably DaringTMMeasurably DaringTM Luke Monaghan @ #SearchLeeds Site Speed: Time to Meet the Mobile Expectation 20/06/2019
  2. 2. Who am I? Luke Monaghan Director, SEO @ Fetch @LukeTheMono
  3. 3. Covered Today: 1. The importance of site speed 2. Mobile vs. Desktop experience 3. How we can meet the mobile expectation 4. The future of mobile performance @LukeTheMono
  4. 4. Measurably DaringTMMeasurably DaringTM Site speed is important. @LukeTheMono
  5. 5. Measurably DaringTMMeasurably DaringTM Crawlers Users @LukeTheMono
  6. 6. It’s a ranking factor Source: Using site speed in web search ranking, Google, 2010 Source: Using page speed in mobile search ranking, Google, 2018 @LukeTheMono
  7. 7. Measurably DaringTMMeasurably DaringTM It’s an expectation Source: Find out how you stack up to new industry benchmarks for mobile page speed, Google, 2017 @LukeTheMono
  8. 8. Measurably DaringTMMeasurably DaringTM An expectation with real-world impact. @LukeTheMono
  9. 9. Measurably DaringTMMeasurably DaringTM 10%The percentage of users lost for each additional second it takes for the BBC to load. Source: How the BBC builds websites that scale, Creative Blog, 2018 @LukeTheMono
  10. 10. $1.6 BillionThe yearly sales cost that a one second page slowdown could have to Amazon. Source:: How One Second Could Cost Amazon $1.6 Billion In Sales, Fast Company, 2012 @LukeTheMono
  11. 11. Measurably DaringTMMeasurably DaringTM So, all this considered… @LukeTheMono
  12. 12. …why are we still seeing this? Source: WebPagetest.org @LukeTheMono
  13. 13. Measurably DaringTMMeasurably DaringTM Source: User Centric Performance Metrics, Google 28.9s0.5s 5.8s 10.1s 22.7s First Contentful Paint First Meaningful Paint Time to Interactive Fully LoadedTime to First Byte Is it happening? Is it useful? Is it usable? @LukeTheMono
  14. 14. Measurably DaringTMMeasurably DaringTM Especially when we’re now here? Source: Desktop vs. Mobile Market Share Worldwide, statcounter @LukeTheMono
  15. 15. Measurably DaringTMMeasurably DaringTM We are not yet truly mobile-first @LukeTheMono
  16. 16. Recognise this? @LukeTheMono
  17. 17. Measurably DaringTMMeasurably DaringTM Main Mobile vs. Desktop Variables @LukeTheMono CPU Network
  18. 18. Measurably DaringTMMeasurably DaringTM We shouldn’t settle for this disparity. @LukeTheMono
  19. 19. Measurably DaringTMMeasurably DaringTM Meeting the Mobile Site Speed Expectation
  20. 20. Measurably DaringTMMeasurably DaringTM “There are multiple moments during the load experience that can affect whether a user perceives it as "fast" or "slow"”. Source: Time to Interactive, Google @LukeTheMono
  21. 21. Measurably DaringTMMeasurably DaringTM “The only thing which matters is the perception of speed.” Source: https://youtu.be/-WTI3w-wYyw @LukeTheMono
  22. 22. Measurably DaringTMMeasurably DaringTM It’s not about reaching 100/100 in @LukeTheMono
  23. 23. Measurably DaringTMMeasurably DaringTM Or a Grade A in @LukeTheMono
  24. 24. Measurably DaringTMMeasurably DaringTM It’s about making your site feel fast to the user @LukeTheMono
  25. 25. Measurably DaringTMMeasurably DaringTM “Research has shown that any delay longer than a second will cause the user to interrupt their flow of thought” Source: Mobile Analysis in PageSpeed Insights, Google @LukeTheMono
  26. 26. Measurably DaringTMMeasurably DaringTM The Aim: Deliver above the fold content in under one second. @LukeTheMono
  27. 27. Measurably DaringTMMeasurably DaringTM Deliver the perception of speed. @LukeTheMono
  28. 28. Perception vs. Reality Perceived Load: 4.0s @LukeTheMono
  29. 29. Of 900,000 mobile landing pages analysed, 70% took more than 5 seconds to display visual content above the fold. Source: Find out how you stack up to new industry benchmarks for mobile page speed, Google, 2018. @LukeTheMono
  30. 30. Measurably DaringTMMeasurably DaringTM Achieving the Perception
  31. 31. Measurably DaringTMMeasurably DaringTM TEST OPTIMISE MONITOR REPEAT PROFILE @LukeTheMono
  32. 32. Measurably DaringTMMeasurably DaringTM Profile
  33. 33. Measurably DaringTMMeasurably DaringTM Make users the centre of all performance optimisation efforts @LukeTheMono
  34. 34. Measurably DaringTMMeasurably DaringTM Build out a profile of the typical mobile user on-site to accurately uncover their pain points. @LukeTheMono
  35. 35. Measurably DaringTMMeasurably DaringTM Google Analytics • Device model • Browser (type and version) • Operating system • Geolocation @LukeTheMono
  36. 36. NetInfo API Uncover data around mobile connection type and performance within Google Analytics. Source: GA Mobile Connection Type, Antoinebr @LukeTheMono
  37. 37. Measurably DaringTMMeasurably DaringTM Establish key testing profiles and associated conditions. @LukeTheMono
  38. 38. Measurably DaringTMMeasurably DaringTM Each user will be browsing with different variables. @LukeTheMono
  39. 39. Measurably DaringTMMeasurably DaringTM TProfile. 1 iPhone 7 4G Chrome TProfile. 2 @LukeTheMono Galaxy S5 3G IE
  40. 40. Experiences will vary @LukeTheMono
  41. 41. Measurably DaringTMMeasurably DaringTM Test
  42. 42. Measurably DaringTMMeasurably DaringTM Start testing user-experience, not technology. @LukeTheMono
  43. 43. Measurably DaringTMMeasurably DaringTM Focus on metrics that matter. @LukeTheMono
  44. 44. First Contentful Paint Is it happening? @LukeTheMono
  45. 45. First Meaningful Paint Is it useful? @LukeTheMono
  46. 46. Time to Interactive Is it usable? @LukeTheMono
  47. 47. Testing tools aplenty There are many tools we can access when testing, some including: • Lighthouse • PageSpeed Insights • ChromeDevTools • WebPageTest • GTmetrix • SpeedCurve @LukeTheMono
  48. 48. Measurably DaringTMMeasurably DaringTM One URL at a time? @LukeTheMono
  49. 49. Measurably DaringTMMeasurably DaringTM Test at scale @LukeTheMono
  50. 50. Measurably DaringTMMeasurably DaringTM Crawl Data Collection Scalable Tool Analytics Data Performance Data @LukeTheMono
  51. 51. Measurably DaringTMMeasurably DaringTM Output • Visibility on speed performance at URL-level, sitewide. • Visibility on speed performance at template level – averaged user- metrics. • Insight into current state of revenue and/or visibility driving pages from a speed perspective. @LukeTheMono
  52. 52. Measurably DaringTMMeasurably DaringTM Lab Data vs. Field Data @LukeTheMono
  53. 53. Measurably DaringTMMeasurably DaringTM Controlled Performance True-World Performance @LukeTheMono
  54. 54. Measurably DaringTMMeasurably DaringTM “These tools don't run on your user's devices, so they don't reflect the actual performance experience of your users.” Source: User-centric Performance Metrics, Google @LukeTheMono
  55. 55. Measurably DaringTMMeasurably DaringTM Performance aware Browser APIs @LukeTheMono
  56. 56. Measurably DaringTMMeasurably DaringTM First Contentful Paint First Meaningful Paint Time to Interactive Source: User-centric Performance Metrics, Google PerformanceObserver API UserTiming API tti-polyfill Metric How to Measure @LukeTheMono
  57. 57. PerformanceObserver Enables collection of accurate real user-measurement data. PerformanceObserver API collects performance data at runtime, something that can be pulled into Google Analytics for greater mobile performance testing and reporting. Source: First Contentful Paint @LukeTheMono
  58. 58. UserTiming API Allows you to track how long it takes for specific content to display. Source: User Timing and Custom Metrics, SpeedCurve First Meaningful Paint @LukeTheMono
  59. 59. tti-polyfill Understand when a site can be interacted with through the tracking of long tasks and quiet windows. Image Source: How to Implement Time to Interactive (TTI) using Google Analytics, Thomas Watson Time to Interactive @LukeTheMono
  60. 60. Measurably DaringTMMeasurably DaringTM Google I/O ‘17 Source: Web Performance: Leveraging the Metrics that Most Affect User Experience (Google I/O '17)
  61. 61. Measurably DaringTMMeasurably DaringTM User Timings Report Image Source: How to Implement Time to Interactive (TTI) using Google Analytics, Thomas Watson @LukeTheMono
  62. 62. Measurably DaringTMMeasurably DaringTM Optimise
  63. 63. Measurably DaringTMMeasurably DaringTM Deliver the perception of speed. @LukeTheMono
  64. 64. Measurably DaringTMMeasurably DaringTM Streamline Critical Path Prioritise critical content – the content that is visible within the initial view. • Minification of all critical assets (both html and CSS) • Inline critical CSS (typically that needed for the header and main above the fold module) • Load non-critical CSS asynchronously Image Source: The need for Speed: Advanced, Bastian Grimm @LukeTheMono
  65. 65. Lazy Loading Defer all non-critical resource when a page is initially loaded, loading them when needed. @LukeTheMono
  66. 66. Measurably DaringTMMeasurably DaringTM Images Optimise your images! They’re a big part of most mobile webpages. @LukeTheMono
  67. 67. Measurably DaringTMMeasurably DaringTM The average mobile website is around 50% images. Source: State of the Web: Top Image Optimization Strategies, HTTP Archive @LukeTheMono
  68. 68. Choose the right image format Compress images
  69. 69. Measurably DaringTMMeasurably DaringTM Compression Two main compression types: • Lossy • Lossless @LukeTheMono 110.39 KB 72.48 KB
  70. 70. Choose the right image format Compress images Responsive images
  71. 71. Images That’s not all, there are many other ways to drive performance efficiencies with images: Source: Automating image optimization, Google @LukeTheMono
  72. 72. Measurably DaringTMMeasurably DaringTM Code Splitting Reduce the size of your pages by identifying unexecuted code. Splitting out resources based on what is and isn’t needed can have a huge impact on page load. @LukeTheMono
  73. 73. Resource Hints Resource hints help to indicate to browsers crucial resources for an optimal user-experience. Source: Resource prioritization, Google @LukeTheMono <link rel="preload" as="script" href="super-important.js"> <link rel="preload" as="style" href="critical.css"> <link rel="preconnect" href="https://example.com"> Preload Preconnect <link rel="prefetch" href="page-2.html"> Prefetch
  74. 74. Measurably DaringTMMeasurably DaringTM Chrome DevTools is your best-friend. @LukeTheMono
  75. 75. Measurably DaringTMMeasurably DaringTM Polly @ Delete Even more recommendations on how to optimise performance. @LukeTheMono
  76. 76. Measurably DaringTMMeasurably DaringTM Monitor
  77. 77. Measurably DaringTMMeasurably DaringTM Many solutions available that provide real-time performance monitoring capabilities. @LukeTheMono
  78. 78. Measurably DaringTMMeasurably DaringTM User Timings Report Image Source: How to Implement Time to Interactive (TTI) using Google Analytics, Thomas Watson @LukeTheMono
  79. 79. Measurably DaringTMMeasurably DaringTM Search Console Speed Report • Provides an aggregated view of a site’s field metrics. • Will help to identify issues with speed performance. Image Source: Search Engine Land, 2019 @LukeTheMono
  80. 80. Impact Calculator Highlight potential impact of changes based on initial observations from monitoring. Source: Impact Calculator, Google @LukeTheMono
  81. 81. Measurably DaringTMMeasurably DaringTM TEST OPTIMISE MONITOR REPEAT PROFILE @LukeTheMono
  82. 82. Measurably DaringTMMeasurably DaringTM The Future
  83. 83. Measurably DaringTMMeasurably DaringTM Users will expect quicker, more seamless browsing experiences. @LukeTheMono
  84. 84. Measurably DaringTMMeasurably DaringTM This being said, it’s not all doom and gloom, we’re getting better. @LukeTheMono
  85. 85. Measurably DaringTMMeasurably DaringTM “We observed improvements across the whole web ecosystem. On a per country basis, more than 95% of countries had improved speeds”. Source: User experience improvements with page speed in mobile search, Google, 2019. @LukeTheMono
  86. 86. Measurably DaringTMMeasurably DaringTM And enhancements are continually being developed. @LukeTheMono
  87. 87. Measurably DaringTMMeasurably DaringTM 5G Image Source: 5G: The new network arrives, Deloitte @LukeTheMono
  88. 88. Measurably DaringTMMeasurably DaringTM 5G brings higher speeds, lower latency and greater capacity. Source: The Race to 5G, Deloitte @LukeTheMono
  89. 89. Measurably DaringTMMeasurably DaringTM Source: Speed & Performance Optimisation: How to Meet Users’ High Expectations, Rachel Costello @LukeTheMono Rachell @ Deepcrawl Exciting developments in website performance, including personalising performance via the Network Information API.
  90. 90. Measurably DaringTMMeasurably DaringTM Key Takeaways
  91. 91. Measurably DaringTMMeasurably DaringTM 1. Design a fast web experience, across all devices. @LukeTheMono
  92. 92. Measurably DaringTMMeasurably DaringTM 2. Deliver the perception of speed. @LukeTheMono
  93. 93. Measurably DaringTMMeasurably DaringTM 3. Measure metrics that matter to the user. @LukeTheMono
  94. 94. Measurably DaringTMMeasurably DaringTM 4. Continually refine the performance experience. @LukeTheMono
  95. 95. Measurably DaringTMMeasurably DaringTM 5. Take your developers for a drink, you’re doing to need them on your side. @LukeTheMono
  96. 96. Measurably DaringTMMeasurably DaringTM Resources
  97. 97. Useful Resources • https://www.deepcrawl.com/wp-content/uploads/2018/06/deepcrawl- ultimate-guide-to-site-speed-performance.pdf • https://developers.google.com/web/fundamentals/performance/why- performance-matters/ • https://developers.google.com/web/fundamentals/performance/user- centric-performance-metrics • https://www.searchlaboratory.com/2018/10/how-to-implement-time-to- interactive-tti-using-google-analytics/ • https://www.youtube.com/watch?v=hwExNydg0j0 • https://www.slideshare.net/bastiangrimm/the-need-for-speed- advanced-webperf-seoday-2018 • https://www.slideshare.net/PollyPospelova/how-to-get-a-100- lighthouse-performance-score • https://codelabs.developers.google.com/codelabs/performance- analytics/index.html#0 • https://github.com/Antoinebr/Ga-mobile-connection-type
  98. 98. Thank you! Measurably DaringTM Luke Monaghan Questions? Drop me a tweet: @LukeTheMono #SearchLeeds

×