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.

Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl


Published on

This talk aims to change mindsets from focusing on traditional speed metrics, to thinking about how users actually perceive page load and what their priorities are in order to have positive user experience, and what we can do as SEOs and marketers to optimise for those crucial aspects.

Published in: Marketing
  • Login to see the comments

Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl

  2. 2. @rachellcost brightonSEO WHAT WE’LL COVER 3. The future of web performance and speed. 1. What users expect from websites. 2. User-centric optimisation techniques. @rachellcostello brightonSEO
  3. 3. Site speed is one of these key factors. @rachellcostello brightonSEO SEO success has a lot of dependencies on aspects centered around UX.
  4. 4. SPEED SITE ARCHITECTURE RELEVANCE TOINTENT USER HAPPINESS UXInformation Architecture Site Speed Content Relevance to Intent @rachellcostello brightonSEO
  5. 5. “Speed is something that does matter quite a bit to us and it has a big effect on users, so that’s something that I, personally, would take seriously.” John Mueller, Webmaster Trends Analyst at Google @rachellcostello brightonSEO
  6. 6. How are the UK industries currently performing? @rachellcostello brightonSEO
  7. 7. Source: Think With Google @rachellcostello brightonSEO Best practice: 3 seconds
  8. 8. Source: Think With Google @rachellcostello brightonSEO Best practice: Fewer than 50
  9. 9. Source: Think With Google @rachellcostello brightonSEO Best practice: Less than 500kb
  10. 10. Let’s get started! Looks like there’s a lot of work to be done... @rachellcostello brightonSEO
  12. 12. Source: Think With Google @rachellcostello brightonSEO
  13. 13. Source: Think With Google @rachellcostello brightonSEO
  14. 14. Source: Think With Google @rachellcostello brightonSEO
  15. 15. @rachellcostello brightonSEO
  16. 16. WARNING! We’re going to go through a painful experience together. @rachellcostello brightonSEO
  17. 17. @rachellcostello brightonSEO
  18. 18. For meaningful performance optimisation, we need to feel empathy for our users. @rachellcostello brightonSEO
  19. 19. Not all devices have the same performance capabilities. @rachellcostello brightonSEO
  20. 20. IPHONE 8 MOTO G4 ALCATEL 1X @rachellcostello brightonSEO
  21. 21. Source: Medium @rachellcostello brightonSEO
  22. 22. High-end ALCATEL 1X Median MOTO G4IPHONE 8 36s13s4s Low-end @rachellcostello brightonSEO
  23. 23. “Stop taking fast networks, CPU and high RAM for granted.” Addy Osmani, Engineering Manager at Google @rachellcostello brightonSEO
  24. 24. That’s a relief…? Source: Unbounce @rachellcostello brightonSEO
  25. 25. Stop using internet connection as a scapegoat. Users deserve better. @rachellcostello brightonSEO
  26. 26. Take the time to understand your users. @rachellcostello brightonSEO
  27. 27. @rachellcostello brightonSEO The ’Audience’ tab in Google Analytics has some valuable insights into browsing behaviour.
  28. 28. @rachellcostello brightonSEO
  29. 29. The user’s perception of speed is everything. @rachellcostello brightonSEO
  30. 30. Here’s a real- world example: @rachellcostello brightonSEO
  31. 31. The Guardian: Above-the- fold content populated at 1.2s. The Telegraph: Above-the- fold content populated at 6.5s, after The Guardian homepage has finished loading completely. @rachellcostello brightonSEO
  32. 32. The user doesn’t know that the entire Guardian homepage loaded in 6.4s. For the user, the page loaded in 1.2s. @rachellcostello brightonSEO
  33. 33. @rachellcostello brightonSEO We need to realign our focus to concentrate on what will have the biggest impact on the user.
  34. 34. Source: Addy Osmani, Medium @rachellcostello brightonSEO
  35. 35. Source: Imagebox CRITICAL RENDERING PATH Prioritising above-the- fold content to load as quickly as possible. @rachellcostello brightonSEO
  36. 36. @rachellcostello brightonSEO Bastian Grimm did a great talk on this with some practical and technical optimisation examples.
  37. 37. Throughout your performance analysis and optimisation efforts, keep above- the-fold, visible content in mind at all times. @rachellcostello brightonSEO
  39. 39. 1. PAGESPEED INSIGHTS @rachellcostello brightonSEO
  40. 40. Useful features of PageSpeed Insights: ● Combination of lab data from Lighthouse and field data from CrUX report. ● Opportunities listed with estimated savings in seconds. @rachellcostello brightonSEO
  41. 41. 2. WEBPAGETEST @rachellcostello brightonSEO
  42. 42. Useful features of WebPagetest: ● Provides video of a website loading against competitors. ● Request map shows resource load times and dependencies. @rachellcostello brightonSEO
  43. 43. 3. CHROME DEVTOOLS @rachellcostello brightonSEO
  44. 44. Useful features of Chrome DevTools: ● Resources and JavaScript waterfall breakdown. ● Tests rendering on different devices. ● Shows unused scripts. @rachellcostello brightonSEO
  45. 45. Source: Twitter @rachellcostello brightonSEO
  46. 46. 4. GTMETRIX @rachellcostello brightonSEO
  47. 47. Useful features of GTmetrix: ● Customise tests by browser, location, device and connection type. ● Speed metric breakdown shown in a timeline. @rachellcostello brightonSEO
  48. 48. 5. DEEPCRAWL @rachellcostello brightonSEO
  49. 49. Useful features of DeepCrawl: ● Monitors fetch time and page file size trends over time. ● Can extract Chrome performance timings for all pages on a site. @rachellcostello brightonSEO
  50. 50. @rachellcost brightonSEO @rachellcostello brightonSEO More tools and further reading:
  52. 52. @rachellcostello brightonSEO
  53. 53. Device Journey Connection Personalise performance by... @rachellcostello brightonSEO
  54. 54. Personalising performance by device: Progressive enhancement. @rachellcostello brightonSEO
  55. 55. PROGRESSIVE ENHANCEMENT Focuses on the core content of a page, then progressively adds more technically advanced features on top if the conditions of the client allow for this. @rachellcostello brightonSEO
  56. 56. @rachellcostello brightonSEO 1 HTML Clean, accessible content.
  57. 57. @rachellcostello brightonSEO 2 CSS Layout and visual alterations. 1 HTML Clean, accessible content.
  58. 58. @rachellcostello brightonSEO 3 JavaScript Additional interactivity. 2 CSS Layout and visual alterations. 1 HTML Clean, accessible content.
  59. 59. ”If your website runs fast on a slow machine with a poor screen in a poor browser on a sub-optimal network, then it will only run faster on a fast machine with a good browser on a decent network.” Smashing Magazine @rachellcostello brightonSEO
  60. 60. The website or application will fall back to a less complex experience if the client is unable to handle the more complex features. GRACEFUL DEGRADATION @rachellcostello brightonSEO
  61. 61. @rachellcostello brightonSEO 1 JavaScript Additional interactivity. 2 CSS Layout and visual alterations. 3 HTML Clean, accessible content.
  62. 62. @rachellcostello brightonSEO 2 CSS Layout and visual alterations. 3 HTML Clean, accessible content.
  63. 63. @rachellcostello brightonSEO 3 HTML Clean, accessible content.
  64. 64. Test how usable your website is without JS & CSS using the Web Developer browser plugin. @rachellcostello brightonSEO
  65. 65. “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.” @rachellcostello brightonSEO
  66. 66. Personalising performance by journey: Resource hints. @rachellcostello brightonSEO
  67. 67. RESOURCE HINTS 1. Preload: Specifies the highest priority resources to be loaded first. 2. Prefetch: Specifies key links and resources needed next in the journey. 3. Preconnect: Sets up connections with the server earlier. @rachellcostello brightonSEO
  68. 68. <link rel="preload" href="/example.js"> <link rel="prefetch" href="/example.jpg"> <link href="" rel="preconnect"> @rachellcostello brightonSEO
  69. 69. @rachellcostello brightonSEO
  70. 70. @rachellcostello brightonSEO
  71. 71. Source: YouTube @rachellcostello brightonSEO
  72. 72. Personalising performance by connection: Network Information API. @rachellcostello brightonSEO
  73. 73. Provides information on internet connection, allowing you to tailor the content you serve around the user’s connectivity. NETWORK INFORMATION API @rachellcostello brightonSEO
  74. 74. @rachellcostello brightonSEO Source: MDN Web Docs This example code will watch for changes in the user’s connection.
  75. 75. @rachellcostello brightonSEO Add instructions to this for when changes are detected. Source: YouTube
  76. 76. The user won’t know that there is anything missing from their experience, they’ll just be seeing content. Fast. @rachellcostello brightonSEO
  77. 77. Remember, SEOs can’t do all of this alone. Get developer support. @rachellcostello brightonSEO
  78. 78. Learn from the development team about what is possible for your website. @rachellcostello brightonSEO
  79. 79. Code splitting Compression Minification Asynchronous loading Concatenation Dynamic imports Resource hints Progressive enhancement Graceful degradation Defer loading Preload Prefetch Ask your developers about these terms: @rachellcostello brightonSEO
  80. 80. @rachellcost brightonSEO KEY TAKEAWAYS 3. Talk to developers to learn about new performance optimisation methods. 1. Don’t assume everyone is accessing your site in optimal conditions. 2. Prioritise loading of above-the-fold content and perceived performance. @rachellcostello brightonSEO
  81. 81. @rachellcost brightonSEO FURTHER READING @rachellcostello brightonSEO
  82. 82. @rachellcostello brightonSEO THANK YOU! Any questions? Send me a tweet: @DeepCrawl