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.

Fast Is The Only Speed


Published on

Today most consumer website visitors use their mobile phones. A slow and unresponsive experience on a mobile device can be far more offputting than a desktop experience. Such a negative experience in fact, that one of the studies cited in the presentation reveals that a painfully slow website can be more stressful than watching a horror film!

So what does matter to developers and technical marketers seeking to deliver a more useful and pleasant experience to visitors?

In this deck we examine user-focused performance metrics; the main front and server-side optimisation works to improve the perceived performance of our site. Which tools are best for these new performance metrics.

Finally we look at some really positive results that Erudite have achieved for clients, as well as a great way to use Element Visibility in Google Tag Manager, to measure improvements to performance elements with confidence!

Published in: Data & Analytics

Fast Is The Only Speed

  1. 1. 13-14-15, NOVEMBER 2017 FAST IS THE ONLY SPEED Nichola Stott Managing Director & Founder of Erudite @NicholaStott
  2. 2. LOST POTENTIAL Page Load 3G 19 Seconds Average Load Time >3 Seconds 53% Abandonment Rate Source: Google /DoubleClick 2015 @NicholaStott
  3. 3. …for every second of improvement, experienced up to a 2% conversionrate increase. 7.2 > 2.9 WALMART.COM @NicholaStottSource: think with Google
  4. 4. Via: Emily Grossman – Mobile Moxie BrightonSEO2017 SLOW IS STRESSFULL @NicholaStott
  5. 5. Thinking about Performance Optimisation less in terms of developer metrics and more about delivering on experience and improving perception… SEO/CRO DEV COMMUNITY SHIFT @NicholaStottSpeed, Perception & Lighthouse – Weyl and Ahammad
  6. 6. METRICS THAT MATTER? Time To First Byte Time to First (Meaningful) Paint Time to First Interactive Visually Complete PSI @NicholaStottLighthouse: More on PSI Measures
  7. 7. HAPPENING? USEFUL? USABLE? @NicholaStottCREDIT: Addy Osmani: Google Engineering Manager – FluentConf Deck
  9. 9. METRICS THAT MATTER? Perceptual Speed Index RESULTS @NicholaStottLighthouse: More on PSI Measures
  10. 10. Reliably Measuring Responsiveness in the Wild Shubie Panicker and Nic Jansma at FluentConf (h/t Emily Grossman) TTI Correlates Highly With Conversion Rate @NicholaStott
  11. 11. HTML5 local storage motion/react native-like SECURE/MOBILE DEVICE H/2 reduce latency minimise protocol overhead request prioritisation @NicholaStott
  12. 12. >Multiplexing/Single TCP Connection >Server Push (CSS & JS) Previously >7,000ms Correlates with step-change in form completions >20% ≈ 2s @NicholaStott
  13. 13. But Googlebot Doesn’t Support HTTP/2!!! “Disabling HTTP/1 was a bad idea”… - Bartosz Góralewicz @NicholaStottSource: Bartosz on Moz Blog
  14. 14. IMAGE OPTIMISATION @NicholaStott
  15. 15. YouTube 10% reduction in page load time using WebP thumbnails @NicholaStottSource: Chromium Blog
  16. 16. <picture> to size appropriately or handle format prioritise ATF or lazy load rest @NicholaStott
  17. 17. LIGHTHOUSE TOOL @NicholaStottLighthouse Chrome Dev Tools
  18. 18. CASE 1 • Horrible CMS. • No js improvements, no lazy load • Created optimised images, used <picture> and variable limited srcset PSI 7.4 @NicholaStott
  19. 19. CASE 1 PSI 3.4 PSI is HALVED! @NicholaStott
  20. 20. LIGHTER JS LIBRARY Preact Polymer Vue Lower parse and compile times. Developers: see HNPWA for list of live examples frameworks/libraries. @NicholaStottAddy Osmani – PWAs: Google I/O 17
  21. 21. PWAs (mostly) are & feel faster @NicholaStott
  22. 22. APP-LIKE FEELS Add to home screen Push notifications Offline content @NicholaStott
  23. 23. APP MANIFEST @NicholaStott
  24. 24. SERVICE WORKERS Manage offline content Send push notification @NicholaStottJake Archibald – Trained to Thrill/Github
  25. 25. STANDARD.CO.UK WORKS OFFLINE! @NicholaStott
  26. 26. PRACTICAL TAKE-AWAY @NicholaStott
  27. 27. PROVING ROI USING GTM:ELEMENT VISIBILITY @NicholaStottSee: Simo Ahava Introduction
  28. 28. @NicholaStott HIT STAMP CONFIGURED THUS
  29. 29. 3% NEVER SEE HERO BANNER @NicholaStott
  30. 30. HTTP/2 HERO BANNER TTFV >50% FASTER @NicholaStott
  32. 32. COLLATED REFERENCES experience/ @NicholaStott
  33. 33. IMAGE CREDITS Rhys Korberly Mark Asthoff Nikolas Behrendt Sabine Van Straaten Tyson Dudley Matthew Henry Brandon Holmes Rainer Taepper Ryan Jacques @NicholaStott