Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl

SLIDESHARE.NET/DEEPCRAWL
SPEED & PERFORMANCE
OPTIMISATION: HOW TO MEET
USERS’ HIGH EXPECTATIONS
RACHEL COSTELLO // DeepCrawl //
@rachellcostello

@rachellcost brightonSEO
WHAT WE’LL COVER
3. The future of web performance and speed.
1. What users expect from websites.
2. User-centric optimisation techniques.
@rachellcostello brightonSEO

Site speed is one of these
key factors.
SEO success has a lot of
dependencies on aspects
centered around UX.

SPEED
SITE
ARCHITECTURE
RELEVANCE
TOINTENT
USER HAPPINESS
UXInformation
Architecture
Site Speed
Content
Relevance
to Intent

“Speed is something that
does matter quite a bit to
us and it has a big effect on
users, so that’s something
that I, personally, would
take seriously.”
John Mueller, Webmaster Trends Analyst at
Google

How are the
UK industries
currently
performing?

Source: Think With Google @rachellcostello brightonSEO
Best practice:
3 seconds

Best practice:
Fewer than 50

Best practice:
Less than 500kb

Let’s get started!
Looks like
there’s a lot of
work to be
done...

WHAT DO
USERS EXPECT
FROM
WEBSITES?
BEYOND PAGE LOAD METRICS

Source: Think With Google

WARNING!
We’re going to go through a
painful experience together.

For meaningful performance optimisation,
we need to feel empathy for our users.

Not all devices
have the same
performance
capabilities.

IPHONE 8 MOTO G4 ALCATEL 1X

Source: Medium

High-end
ALCATEL 1X
Median
MOTO G4IPHONE 8
36s13s4s
Low-end

“Stop taking fast
networks, CPU and
high RAM for granted.”
Addy Osmani, Engineering Manager at Google

That’s a relief…?
Source: Unbounce

Stop using
internet
connection as a
scapegoat.
Users deserve
better.

Take the time to understand your users.

The ’Audience’ tab
in Google Analytics
has some valuable
insights into
browsing
behaviour.

The user’s
perception of
speed is
everything.

Here’s a real-
world example:

The Guardian: Above-the-
fold content populated at
1.2s.
The Telegraph: Above-the-
fold content populated at
6.5s, after The Guardian
homepage has finished
loading completely.

The user doesn’t
know that the entire
Guardian homepage
loaded in 6.4s.
For the user, the
page loaded in 1.2s.

We need to
realign our focus
to concentrate
on what will have
the biggest
impact on the
user.

Source: Addy Osmani, Medium @rachellcostello brightonSEO

Source: Imagebox
CRITICAL RENDERING PATH
Prioritising above-the-
fold content to load as
quickly as possible.

Bastian Grimm did a great talk on this with some
practical and technical optimisation examples.
https://www.slideshare.net/bastiangrimm/web-performance-madness-brightonseo-2018

Throughout your
performance analysis
and optimisation
efforts, keep above-
the-fold, visible
content in mind at all
times.

SPEED
TESTING
TOOLS TO TRY
GETTING THE DATA YOU NEED

1. PAGESPEED INSIGHTS

Useful features of
PageSpeed Insights:
● Combination of lab data
from Lighthouse and field
data from CrUX report.
● Opportunities listed with
estimated savings in
seconds.

2. WEBPAGETEST

Useful features of
WebPagetest:
● Provides video of a
website loading against
competitors.
● Request map shows
resource load times and
dependencies.

3. CHROME DEVTOOLS

Useful features of
Chrome DevTools:
● Resources and JavaScript
waterfall breakdown.
● Tests rendering on
different devices.
● Shows unused scripts.

Source: Twitter @rachellcostello brightonSEO

4. GTMETRIX

Useful features of
GTmetrix:
● Customise tests by
browser, location, device
and connection type.
● Speed metric breakdown
shown in a timeline.

5. DEEPCRAWL

Useful features of
DeepCrawl:
● Monitors fetch time and
page file size trends over
time.
● Can extract Chrome
performance timings for
all pages on a site.

bit.ly/speed-tools
More tools and
further reading:

THE FUTURE
OF WEB
PERFORMANCE
USER-CENTRIC OPTIMISATION

Device Journey Connection
Personalise performance by...

Personalising
performance by
device:
Progressive
enhancement.

PROGRESSIVE ENHANCEMENT
Focuses on the core content
of a page, then progressively
adds more technically
advanced features on top if
the conditions of the client
allow for this.

1 HTML
Clean, accessible content.

2 CSS
Layout and visual alterations.
1 HTML

3 JavaScript
Additional interactivity.
2 CSS
1 HTML

”If your website runs fast on a
slow machine with a poor
screen in a poor browser on a
sub-optimal network, then it
will only run faster on a fast
machine with a good browser
on a decent network.”
Smashing Magazine

The website or application will
fall back to a less complex
experience if the client is
unable to handle the more
complex features.
GRACEFUL DEGRADATION

1 JavaScript
Additional interactivity.
2 CSS
3 HTML

2 CSS
3 HTML

3 HTML

Test how usable
your website is
without JS & CSS
using the Web
Developer browser
plugin.

“If the BBC site is slowing down
due to load, certain features will
automatically switch off to bring
the speed up again. These will be
low-importance things – such as a
promo box at the bottom of a
page – that are expensive on the
server and few users will miss.”

Personalising
performance by
journey:
Resource hints.

RESOURCE HINTS
1. Preload: Specifies the highest priority
resources to be loaded first.
2. Prefetch: Specifies key links and resources
needed next in the journey.
3. Preconnect: Sets up connections with the
server earlier.

Source: YouTube

Personalising
performance by
connection:
Network
Information API.

Provides information
on internet
connection, allowing
you to tailor the
content you serve
around the user’s
connectivity.
NETWORK INFORMATION API

Source: MDN Web Docs
This example code will watch
for changes in the user’s
connection.

Add instructions to this for
when changes are detected.
Source: YouTube

The user won’t know that
there is anything missing
from their experience,
they’ll just be seeing
content. Fast.

Remember, SEOs can’t
do all of this alone.
Get developer support.

Learn from the development team about
what is possible for your website.

Code splitting
Compression
Minification
Asynchronous loading
Concatenation
Dynamic imports
Resource hints
Progressive enhancement
Graceful degradation
Defer loading
Preload
Prefetch
Ask your developers about these terms:

KEY TAKEAWAYS
3. Talk to developers to learn about new
performance optimisation methods.
1. Don’t assume everyone is accessing
your site in optimal conditions.
2. Prioritise loading of above-the-fold
content and perceived performance.

FURTHER READING
https://www.deepcrawl.com/blog/white-papers/site-speed-performance-guide/
https://developer.chrome.com/devsummit/schedule/speed-essentials
https://developers.google.com/speed/
https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/
https://www.deepcrawl.com/blog/releases/using-crawler-to-collect-chrome-page-speed-metrics/
https://www.keycdn.com/blog/resource-hints
https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
https://github.com/guess-js

THANK YOU!
Any questions? Send me a tweet:
@DeepCrawl www.deepcrawl.com

Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl

Similar to Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl (20)

More from DeepCrawl

More from DeepCrawl (13)

Recently uploaded

Recently uploaded (20)

Speed & Performance Optimisation: How to Meet Users' High Expectations - Rachel Costello, Technical SEO & Content Manager at DeepCrawl