0.6 seconds is the new slow

@jonoalderson
0.6 seconds is the new slow

@jonoalderson
[Today’s Plan]
1. Run you through some speed theory
2. Tons of practical “how to” speed stuff
3. What we’ve done, and plan to do on yoast.com
4. SOME AWESOME RESOURCES
5. Glossary

@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
more time = less money
less time = more money

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

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

@jonoalderson
So, how well are we performing?

@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
Because even if your direct
competitors are still
behind the curve...

@jonoalderson
They’ll start reacting soon

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

@jonoalderson
“Speed doesn’t
significantly
affect rankings”

@jonoalderson
“Speed underpins
user experience”

@jonoalderson
User experience is the biggest
ranking factor*

@jonoalderson
And for Google, speed = efficiency

@jonoalderson
User
Experience
Crawl
efficiency
Structured
Data
Speed

@jonoalderson
So, efficiency speed
improvements will continue to
drive revenue

@jonoalderson
Commercial imperative = progress

@jonoalderson
But change is hard

@jonoalderson
Big performance & UX
improvements require significant
architectural change

@jonoalderson
You’ve got to sort out all of your
technical debt

@jonoalderson
You’ve got to
adopt new technologies,
processes and principles

@jonoalderson
More significantly, you need to
develop a culture of speed

@jonoalderson
But… website (re)development
projects, and new talent, run on a
3-5 year cycle

@jonoalderson
Google Webmaster Blog, 2010, http://bit.ly/2wczr0I

@jonoalderson
2018 - 2019
First “culture of speed”
competitors disrupt the
marketplace
2016 - 2017
Brands start to take notice, and
start considering the
implications of speed
2016
Google announces that mobile
speed will affect mobile
rankings
2010
Google first announces that
“site speed” is a ranking factor

@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
You win by a thousand tweaks

@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 page has
components which only load
when you interact, or scroll?
Are they “finished”?

@jonoalderson
What if the page loads instantly,
but then loads a bunch of
adverts which take ages?

@jonoalderson
What if the time-til-first-byte is
fast, but then it takes ages to
load the content? Or, vice-versa?

@jonoalderson
We need better definitions

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

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

@jonoalderson
Google
Pagespeed
score

@jonoalderson
Google
Pagespeed
score
At that point in time, for
that URL, for that config,
from that location

@jonoalderson
Google
Pagespeed
score
Relative to other
people testing
their homepages
from that location

@jonoalderson
Load fewer, smaller things, duh
Google
Pagespeed
score
Relative to other
people testing
their homepages
from that location

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

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

@jonoalderson
(actually, that’s not completely true)

@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
Nav
interactivity
Fonts
Personalised /
account stuff
Share buttons
Author
imagesComments, related
posts, all sorts!
Video
Big image
Tons of CSS
jQuery(!)

@jonoalderson
Lazy video
placeholder
Skeleton
container
for image

@jonoalderson
This goes beyond lazy loading

@jonoalderson
[Things we improved]
● Bytes transferred
● Complexity of DOM, CSS and JS
● Painting, layout and layering
● Colours, details, icons

@jonoalderson
Site looks & feels faster.
Scores didn’t change.

@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
“How quickly can we make it
feel ready?”

@jonoalderson
Perceived speed is hard to
quantify and manage.

@jonoalderson
And trade-offs abound.

@jonoalderson
0n / off
Fast Slow

@jonoalderson
1 9
● Low compression
● Fast server response
● Slow delivery & processing
● High compression
● Slow server response
● Faster delivery & processing

@jonoalderson
You need to solve for your users

@jonoalderson
There are lots of moving parts
you can play with.

@jonoalderson
Service workers
After load

@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
Hosting, servers,
CDNs

@jonoalderson
Hosting, servers,
CDNs
WP, themes
& plugins

@jonoalderson
Hosting, servers,
CDNs
WP, themes
& plugins
HTML,
CSS & JS

@jonoalderson
Let’s do this.

@jonoalderson
What’s our target?

@jonoalderson
“It is not easy to meet the one second time budget. Luckily for us, the whole page doesn’t have to render within
this budget, instead, we must deliver and render the above the fold (ATF) content in under one second, which
allows the user to begin interacting with the page as soon as possible. Then, while the user is interpreting the
first page of content, the rest of the page can be delivered progressively in the background.”

@jonoalderson
Start with optimising:
Time until first byte
Time until first meaningful paint
Time until first interactive
Time until DOM content loaded

@jonoalderson
Start with optimising:
Time until DOM content loaded
Time until first meaningful paint
Time until first interactive
Time until first byte

@jonoalderson
Just go and find the slow stuff.

@jonoalderson
Use tools to spot problems

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

@jonoalderson
So we refactored that file...

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

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

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

@jonoalderson
What have we already done?

@jonoalderson
[Hosting & CDN]
● Enterprise > Mid-tier > DIY

@jonoalderson
[Hosting & CDN]
● Cloudflare > MaxCDN
● Load balancing + Nginx caching
● Cloudflare Page Rules, Argo & Worker scripts
● SiteGround > WP Engine / Servebolt > Digital Ocean

@jonoalderson
[Request/Response]
● HTTP/2
● HTTP/2 Server Push

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

@jonoalderson
● HTTP/2
[Request/Response]
● DNS & asset prefetch/preload

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

@jonoalderson
● HTTP/2
[Request/Response]
● DNS & asset prefetch/preload
● Cross-domain resource reduction

@jonoalderson
[WordPress]
● Minimised plugin overhead
● Managed database indexes
● Used transient + object caching
● Stripped unnecessary enqueues
● Disabled WP-CRON

@jonoalderson
● JS and CSS modularisation & async’ing (WIP)
● Font optimisation (WIP)
● Heavy use of Google Tag Manager
● SRCSETs and image scaling (WIP)*
● WebP & SVG images
● Asset versioning and heavy caching
[Media & Assets]

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

@jonoalderson
So, what’s still to do?

@jonoalderson
Better HTTP2 Push
Jake Archibald, http://bit.ly/2C1djwq

@jonoalderson
Canonical AMP
Automatic CSS
tree shaking!

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

@jonoalderson
Post-load
interaction
improvements

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

@jonoalderson
We’re not doing...
But you should
consider...

@jonoalderson
Lazy loading images

@jonoalderson
Above-the-fold CSS /
Critical path CSS /
Deferred CSS

@jonoalderson
Skeleton screens

@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
Google Web Fundamentals, http://bit.ly/2wlVeUI

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

0.6 seconds is the new slow

More Related Content

What's hot

Similar to 0.6 seconds is the new slow

More from Jono Alderson

Recently uploaded

0.6 seconds is the new slow

Editor's Notes