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!
2. LOST POTENTIAL
Page Load
3G
19 Seconds
Average Load Time
>3 Seconds
53% Abandonment Rate
Source: Google /DoubleClick 2015 @NicholaStott
3. …for every second of improvement,
Walmart.com experienced up to a 2%
conversionrate increase.
7.2 > 2.9
WALMART.COM
@NicholaStottSource: think with Google
4. Via: Emily Grossman – Mobile Moxie BrightonSEO2017
SLOW IS STRESSFULL
@NicholaStott
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. METRICS THAT MATTER?
Time To First Byte
Time to First (Meaningful) Paint
Time to First Interactive
Visually Complete PSI
@NicholaStottLighthouse: More on PSI Measures
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
18. CASE 1
• Horrible CMS.
• No js improvements, no lazy load
• Created optimised images, used <picture> and variable limited srcset
PSI
7.4
@NicholaStott
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
33. IMAGE CREDITS
Rhys Korberly
Mark Asthoff
Nikolas Behrendt
Sabine Van Straaten
Tyson Dudley
Matthew Henry
Brandon Holmes
Rainer Taepper
Ryan Jacques
@NicholaStott