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!

1. 13-14-15, NOVEMBER 2017
FAST
IS THE ONLY
SPEED
Nichola Stott
Managing Director & Founder
of Erudite
@NicholaStott

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

7. HAPPENING? USEFUL? USABLE?
@NicholaStottCREDIT: Addy Osmani: Google Engineering Manager – FluentConf Deck

8. PROVIDING
REASSURANCE
@NicholaStott

9. METRICS THAT MATTER?
Perceptual Speed
Index
RESULTS
@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

11. HTML5
local storage
motion/react
native-like
SECURE/MOBILE DEVICE
H/2
reduce latency
minimise protocol overhead
request prioritisation
@NicholaStott

12. >Multiplexing/Single TCP
Connection
>Server Push (CSS & JS)
Previously >7,000ms
Correlates with step-change in form completions >20%
≈ 2s
@NicholaStott

13. But Googlebot
Doesn’t Support
HTTP/2!!!
“Disabling HTTP/1 was a
bad idea”… - Bartosz Góralewicz
@NicholaStottSource: Bartosz on Moz Blog

14. IMAGE
OPTIMISATION
@NicholaStott

15. YouTube
10% reduction in
page load time using
WebP thumbnails
@NicholaStottSource: Chromium Blog

16. <picture>
to size appropriately
or handle format
prioritise ATF or lazy load rest
@NicholaStott

17. LIGHTHOUSE
TOOL
@NicholaStottLighthouse Chrome Dev Tools

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. CASE 1
PSI
3.4
PSI is HALVED!
@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

21. PWAs (mostly)
are & feel faster
@NicholaStott

22. APP-LIKE FEELS
Add to home screen
Push notifications
Offline content
@NicholaStott

23. APP MANIFEST
@NicholaStott

24. SERVICE WORKERS
Manage offline content
Send push notification
@NicholaStottJake Archibald – Trained to Thrill/Github

25. STANDARD.CO.UK
WORKS OFFLINE!
@NicholaStott

26. PRACTICAL TAKE-AWAY
@NicholaStott

27. PROVING ROI USING
GTM:ELEMENT
VISIBILITY
@NicholaStottSee: Simo Ahava Introduction

28. @NicholaStott
HIT STAMP
CONFIGURED THUS

29. 3% NEVER SEE
HERO BANNER
@NicholaStott

30. HTTP/2
HERO BANNER
TTFV
>50% FASTER
@NicholaStott

31. VISITOR PERCEPTION MATTERS
MOST.
ASK - HOW FAST DOES IT FEEL?
MAKE IT USEFUL AND PROVE IT
WITH DATA…
@NicholaStott

32. COLLATED REFERENCES
https://www.slideshare.net/MobileMoxie/introduction-to-pwas-new-js-frameworks-for-mobile-79805928
https://www.thinkwithgoogle.com/marketing-resources/experience-design/speed-is-key-optimize-your-mobile-
experience/
https://www.youtube.com/watch?v=uXfj6A_CDRU&list=PLUj8-Hhrb-a13Tmr177jC1X345vIPrh3a
https://developers.google.com/web/fundamentals/performance/rail
https://moz.com/blog/challenging-googlebot-experiment
https://developers.google.com/web/tools/lighthouse/audits/speed-index
https://developers.google.com/web/tools/lighthouse/
https://github.com/jakearchibald/trained-to-thrill
https://www.standard.co.uk/
https://www.simoahava.com/analytics/element-visibility-trigger-google-tag-manager/
@NicholaStott

33. IMAGE CREDITS
Rhys Korberly
Mark Asthoff
Nikolas Behrendt
Sabine Van Straaten
Tyson Dudley
Matthew Henry
Brandon Holmes
Rainer Taepper
Ryan Jacques
@NicholaStott