Speed & Performance Optimisation: How to Meet Users' High Expectati...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

@rachellcost brightonSEO
WHAT WE’LL COVER
3. The future of web performance and speed.
1. What users expect from websites.
...

Site speed is one of these
key factors.
@rachellcostello brightonSEO
SEO success has a lot of
dependencies on aspects
cent...

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

“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, perso...

How are the
UK industries
currently
performing?
@rachellcostello brightonSEO

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

Source: Think With Google @rachellcostello brightonSEO
Best practice:
Fewer than 50

Source: Think With Google @rachellcostello brightonSEO
Best practice:
Less than 500kb

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

WHAT DO
USERS EXPECT
FROM
WEBSITES?
@rachellcostello brightonSEO
BEYOND PAGE LOAD METRICS

Source: Think With Google
@rachellcostello brightonSEO

Source: Think With Google
@rachellcostello brightonSEO

Source: Think With Google
@rachellcostello brightonSEO

@rachellcostello brightonSEO

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

@rachellcostello brightonSEO

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

Not all devices
have the same
performance
capabilities.
@rachellcostello brightonSEO

IPHONE 8 MOTO G4 ALCATEL 1X
@rachellcostello brightonSEO

Source: Medium
@rachellcostello brightonSEO

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

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

That’s a relief…?
Source: Unbounce
@rachellcostello brightonSEO

Stop using
internet
connection as a
scapegoat.
Users deserve
better.
@rachellcostello brightonSEO

Take the time to understand your users.
@rachellcostello brightonSEO

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

@rachellcostello brightonSEO

The user’s
perception of
speed is
everything.
@rachellcostello brightonSEO

Here’s a real-
world example:
@rachellcostello brightonSEO

The Guardian: Above-the-
fold content populated at
1.2s.
The Telegraph: Above-the-
fold content populated at
6.5s, after T...

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

@rachellcostello brightonSEO
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.
@rachellcost...

@rachellcostello brightonSEO
Bastian Grimm did a great talk on this with some
practical and technical optimisation example...

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

SPEED
TESTING
TOOLS TO TRY
@rachellcostello brightonSEO
GETTING THE DATA YOU NEED

1. PAGESPEED INSIGHTS
@rachellcostello brightonSEO

Useful features of
PageSpeed Insights:
● Combination of lab data
from Lighthouse and field
data from CrUX report.
● Opport...

2. WEBPAGETEST
@rachellcostello brightonSEO

Useful features of
WebPagetest:
● Provides video of a
website loading against
competitors.
● Request map shows
resource lo...

3. CHROME DEVTOOLS
@rachellcostello brightonSEO

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

Source: Twitter @rachellcostello brightonSEO

4. GTMETRIX
@rachellcostello brightonSEO

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

5. DEEPCRAWL
@rachellcostello brightonSEO

Useful features of
DeepCrawl:
● Monitors fetch time and
page file size trends over
time.
● Can extract Chrome
performance ...

@rachellcost brightonSEO
bit.ly/speed-tools
@rachellcostello brightonSEO
More tools and
further reading:

THE FUTURE
OF WEB
PERFORMANCE
@rachellcostello brightonSEO
USER-CENTRIC OPTIMISATION

@rachellcostello brightonSEO

Device Journey Connection
Personalise performance by...
@rachellcostello brightonSEO

Personalising
performance by
device:
Progressive
enhancement.
@rachellcostello brightonSEO

PROGRESSIVE ENHANCEMENT
Focuses on the core content
of a page, then progressively
adds more technically
advanced features ...

@rachellcostello brightonSEO
1 HTML
Clean, accessible content.

@rachellcostello brightonSEO
2 CSS
Layout and visual alterations.
1 HTML
Clean, accessible content.

@rachellcostello brightonSEO
3 JavaScript
Additional interactivity.
2 CSS
Layout and visual alterations.
1 HTML
Clean, acc...

”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 o...

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

@rachellcostello brightonSEO
1 JavaScript
Additional interactivity.
2 CSS
Layout and visual alterations.
3 HTML
Clean, acc...

@rachellcostello brightonSEO
2 CSS
Layout and visual alterations.
3 HTML
Clean, accessible content.

@rachellcostello brightonSEO
3 HTML
Clean, accessible content.

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

“If the BBC site is slowing down
due to load, certain features will
automatically switch off to bring
the speed up again. ...

Personalising
performance by
journey:
Resource hints.
@rachellcostello brightonSEO

RESOURCE HINTS
1. Preload: Specifies the highest priority
resources to be loaded first.
2. Prefetch: Specifies key links a...

<link rel="preload" href="/example.js">
<link rel="prefetch" href="/example.jpg">
<link href="cdn.example.com" rel="precon...

@rachellcostello brightonSEO

@rachellcostello brightonSEO

Source: YouTube
@rachellcostello brightonSEO

Personalising
performance by
connection:
Network
Information API.
@rachellcostello brightonSEO

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

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

@rachellcostello brightonSEO
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.
@rachellco...

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

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

Code splitting
Compression
Minification
Asynchronous loading
Concatenation
Dynamic imports
Resource hints
Progressive enha...

@rachellcost brightonSEO
KEY TAKEAWAYS
3. Talk to developers to learn about new
performance optimisation methods.
1. Don’t...

@rachellcost brightonSEO
FURTHER READING
https://www.deepcrawl.com/blog/white-papers/site-speed-performance-guide/
https:/...

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1036216 views
Storytelling For The Web: Integrate... by Chiara Aliotta 948112 views
Artificial Intelligence, Data and C... by OECD Directorate ... 870219 views
How to Leverage AI to Boost Employe... by SocialHRCamp 365506 views
2024 State of Marketing Report – by... by Marius Sescu 207694 views
Everything You Need To Know About C... by Expeed Software 227895 views

View on Slideshare

1 of 82 Ad

View on Slideshare

1 of 82 Ad