0.6 seconds is the new slow

@jonoalderson 0.6 seconds is the new slow

@jonoalderson Hello!

@jonoalderson WARNING!

@jonoalderson Users expect fast

@jonoalderson Delays of over 3 seconds can lead to over
40% abandonment Google, 2016, via http:/ /bit.ly/2OBDJGq

@jonoalderson Wired Magazine, 2014 47% of people expect a site
to load in less than 2 seconds

@jonoalderson 20% of users abandon their cart if the transaction
process is too slow Radware, 2014, http:/ /bit.ly/2weioeS

@jonoalderson Baqend, 2018, http:/ /bit.ly/2MA4nSZ

@jonoalderson Time is money

@jonoalderson Think with Google, http:/ /bit.ly/2N3BXRz

@jonoalderson So, how well are we performing?

@jonoalderson We suck

@jonoalderson Industry USA UK Germany Japan Automotive 9.5 12.3 11.0
10.3 Business & Industrial Markets 8.7 8.3 8.2 8.1 Classifieds & Local 7.9 8.3 7.0 8.3 Finance 8.3 8.0 8.6 7.6 Media & Entertainment 9.0 8.8 7.6 8.4 Retail 9.8 10.3 10.3 8.3 Technology 11.3 10.6 8.8 10.0 Travel 10.1 10.9 7.1 8.2 MachMetrics, 2018, http:/ /bit.ly/2PiFzgK Seconds to “visually loaded” on a 3g connection

@jonoalderson But not for long...

@jonoalderson

@jonoalderson Google Webmaster Blog, 2018, http:/ /bit.ly/2wggdHs

@jonoalderson “Speed underpins user experience”

@jonoalderson User experience is the biggest ranking factor*

@jonoalderson And for Google, speed = eﬀiciency

@jonoalderson User experience Crawl eﬃciency Speed

@jonoalderson

@jonoalderson So, eﬀiciency speed improvements will continue to drive revenue

@jonoalderson So, if you wait until your competitors are faster
than you, you’ll be too late

@jonoalderson And as sites get faster, slow is going to
feel slower

@jonoalderson “So, what do we need to do?”

@jonoalderson HINT: It’s not a big web (re)development project

@jonoalderson “We have a big site redevelopment process in the
works, scheduled for Summer 2019”

@jonoalderson “We have a big site redevelopment process in the
works, scheduled for Summer 2019” No No

@jonoalderson You win by a thousand tweaks

@jonoalderson Now, and every day, forever

@jonoalderson Make bits of it FASTER

@jonoalderson But what does that mean? And where do you
start?

@jonoalderson There are two truths

@jonoalderson [1] There’s no such thing as speed.

@jonoalderson How do you measure ‘speed’?

@jonoalderson “The time how long it takes for a page
to finish loading”

@jonoalderson But, what does that mean?

@jonoalderson What if the server responds quickly, but then it
takes ages to show the content?

@jonoalderson What if the page has components which only load
when you interact, or scroll? Are they “finished”?

@jonoalderson We need better deﬁnitions

@jonoalderson Most stock metrics from speed check + optimisation tools
suck

@jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/

@jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/ Doesn’t actually measure

@jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/ At that point
in time, for that URL, for that config, from that location Doesn’t actually measure

@jonoalderson Pingdom, Website speed test, https:/ /tools.pingdom.com/ Relative to other
people testing their homepages At that point in time, for that URL, for that config, from that location Doesn’t actually measure

@jonoalderson Load fewer, smaller things, duh Pingdom, Website speed test,
https:/ /tools.pingdom.com/ Relative to other people testing their homepages At that point in time, for that URL, for that config, from that location Doesn’t actually measure

@jonoalderson GTMetrix, https:/ /gtmetrix.com/

@jonoalderson Silly! GTMetrix, https:/ /gtmetrix.com/

@jonoalderson Google Analytics

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2BxHcEw

@jonoalderson !!! “First contentful paint” Google PageSpeed Insights, http:/ /bit.ly/2BxHcEw

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2LbGw7j

@jonoalderson “How quickly can we show something interesting?”

@jonoalderson Let’s grab an example

@jonoalderson

@jonoalderson Nav interactivity Fonts Personalised / account stuff Share buttons
Author images Comments, related posts, all sorts! Video Big image Tons of CSS jQuery(!)

@jonoalderson

@jonoalderson Lazy video placeholder Skeleton container for image Stopped these
assets from loading on the initial page load Personalised / account stuff via ajax Nav interactivity loads later Prioritise font loading

@jonoalderson [Things we’re obsessing about] • Lazy loading • Bytes
transferred • Complexity of DOM, CSS and JS • Painting, layout and layering • Colours, details, icons

@jonoalderson Site looks & feels faster :)

@jonoalderson Scores didn’t change much :(

@jonoalderson Don’t optimise for scores. Just make it faster.

@jonoalderson [2] The only thing which matters is the perception
of speed.

@jonoalderson Google, Lighthouse docs, http:/ /bit.ly/2PvhraI

@jonoalderson However, there’s one golden moment...

@jonoalderson Google, Lighthouse docs, http:/ /bit.ly/2PvhraI

@jonoalderson “How quickly can we make it feel ready?”

@jonoalderson Perceived speed is hard to quantify!

@jonoalderson And there are lots of moving parts.

@jonoalderson

@jonoalderson Service workers

@jonoalderson Service workers After load

@jonoalderson Scary?

@jonoalderson Performance optimisation is no longer an art. It’s a
science.

@jonoalderson Every site in the world can load in <1s.

@jonoalderson You just need to follow the rules.

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT The internet, the speed
of light

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT Hosting, servers, CDNs The
internet, the speed of light

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT Hosting, servers, CDNs The
internet, the speed of light CMS, plugins & extensions

@jonoalderson Google PageSpeed Insights, http:/ /bit.ly/2MhP9lT Hosting, servers, CDNs HTML,
CSS & JS The internet, the speed of light CMS, plugins & extensions

@jonoalderson Where do we start?

@jonoalderson Me, just now

@jonoalderson Just go and ﬁnd the slow stuﬀ.

@jonoalderson Use tools to spot problems

@jonoalderson Webpagetest

@jonoalderson Pingdom Website Speed Test, http:/ /bit.ly/2MhP9lT

@jonoalderson

@jonoalderson So we refactored that ﬁle... 1 dev, 1 day

@jonoalderson

@jonoalderson 0.6 seconds

@jonoalderson Wow!

@jonoalderson However… I may not have been completely honest with
you.

@jonoalderson

@jonoalderson 0.6 seconds on a fast desktop wiﬁ 2.7 seconds
on ‘fast 3g’ emulation slow!

@jonoalderson That’s a bit rubbish...

@jonoalderson We’re on a journey of 1,000 tweaks. There is
no magic bullet.

@jonoalderson So what can you do, today?

@jonoalderson Here’s how you shortcut speed Some “quick” wins!

@jonoalderson 0. Load less stuﬀ 1. Tidy up your CMS
2. Bolt on a CDN (Cloudﬂare) 3. Get good hosting 4. Use a static page cache 5. Optimise your resources 6. Use AMP(?)

@jonoalderson 0. Load less stuﬀ

@jonoalderson • Plugins, extensions and integrations • Fonts • JavaScript
[BASICS]

@jonoalderson • Lazy-loading resources • Cross-domain resource reduction • DNS
& asset prefetch/preload [ADVANCED]

@jonoalderson Machmetrics, http:/ /bit.ly/2wrfjYX

@jonoalderson 1. Tidy up your CMS

@jonoalderson [BASICS] • Use plugins, extensions and integrations to measure(!)

@jonoalderson

@jonoalderson 2. Bolt on a CDN

@jonoalderson

@jonoalderson • HTTP/2 • Server Push [ADVANCED]

@jonoalderson Tom Anthony, Distilled, http:/ /bit.ly/2MhP9lT

@jonoalderson 3. Get better hosting

@jonoalderson

@jonoalderson DIY sites (any size) Managed small-medium sites Large /
enterprise sites

@jonoalderson 4. Use a static page cache

@jonoalderson

@jonoalderson 5. Optimise your resources

@jonoalderson

@jonoalderson • Oﬀload media to, e.g., Amazon S3 • Use
an image CDN like Cloudinary or Imgix • Modularise CSS and JavaScript [ADVANCED]

@jonoalderson Chrome Dev Tools, Coverage report

@jonoalderson 6. Use Amp (?)

@jonoalderson

@jonoalderson This stuﬀ makes a diﬀerence

@jonoalderson

@jonoalderson 0.4 seconds

@jonoalderson 0.4 seconds on a fast desktop wiﬁ 1.9 seconds
on ‘fast 3g’ emulation Less slow!

@jonoalderson So, what’s still to do?

@jonoalderson Canonical AMP Automatic CSS tree shaking!

@jonoalderson PWAMP AMP Project, http:/ /bit.ly/2wog8lN

@jonoalderson Post-load interaction improvements

@jonoalderson New ways of thinking about CSS Me, https:/ /bit.ly/2D5Dlgy

@jonoalderson Emily Hayman, http:/ /bit.ly/2MILD4c

@jonoalderson Resources

@jonoalderson Emily Grossman, SkyScanner, http:/ /bit.ly/2wjnkzR

@jonoalderson Jon Henshaw, http:/ /bit.ly/2wwy5xZ

@jonoalderson Bastian Grimm, Peak Ace, http:/ /bit.ly/2wjnkzR

@jonoalderson

@jonoalderson Google Web Fundamentals, http:/ /bit.ly/2wlVeUI

@jonoalderson AMP Project, http:/ /bit.ly/2PhDKj1

@jonoalderson

@jonoalderson Thanks!

0.6 seconds is the new slow

0.6 seconds is the new slow

More Decks by Jono Alderson

Other Decks in Marketing & SEO

Featured

Transcript