Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

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

More Related Content

Fast Is The Only Speed