Site speed for in-house marketers | BrightonSEO

Maria Camanes
Builtvisible
Site Speed for in-house marketers: creating a
culture of performance
https://builtvisible.com/site-speed-for-in-house-marketers
@mariacamanes

© Copyright 2018 Builtvisible. All rights reserved. Private and Confidential
Impact on your brand
Maria Camanes | Technical SEO Consultant | maria@builtvisible.com | @Mariacamanes

Website performance is user
experience

“Almost 50% of visitors would abandon a site if it takes more than 3 seconds
to load and once they leave, they aren’t likely to be back:46% of users don’t
revisit poorly performing websites”
The average user has no patience and slower page
response times result in increases in page
abandonment

Performance Impacts Conversion:
every second counts

A 1 second delay in page response can result in a 7%
reduction in conversions
Website owners have a mere 5 seconds to engage
visitors before they consider leaving
For a site making £100,000 per day, a 1 second page
delay could potentially cost $2.5 million in lost sales
every year

Source

The wrong approach

Site speed performance more often comes down
to a cultural challenge, rather than just a
technical one

Web standards evolve (e.g.
HTTP/2) which eradicates some
existing
performance constraints
Browsers continue to evolve
Existing designers and
developers with great
performance habits leave
As time marches on, so many things will continue to create
performance challenges for even the most stable site:
New performance
techniques emerge
The site’s hardware, brand and
code age
New designers and developers
are hired

Having a dedicated team of people responsible for keeping
track of these kinds of evolutions is important.
A performance champion (or a team of champions) is an
excellent tool to lean on as the Web changes.

Look for areas to improve
Learn about emerging
technology and
new methods
Communicate publicly about
changes in performance
A dedicated performance team can focus on
They can keep an eye on
problem areas
Build tools
Raise suggestions to other
people contributing to the site’s
design & development

But the responsibility for maintaining a high-performing site
should not solely rest on one team’s shoulders.
Everyone who works on the site should buy in to the
importance of performance and understand what they can do
to improve it.

So, how can you make performance an
habit?

#1 You’ll need people on your organisation to
buy-in

Convince upper management that the cost of
the time spent can benefit your business as well
as your users

Showcase
performance
within business
metrics
(E.g. conversion rate, total
revenue, returning
visitors, etc.)
Showcase
performance
within user
experience
(help them feel how slow
your site is and empathize
with your end users)

https://wpostats.com/
Translate performance metrics into meaningful metrics
for the business

Run experiments on your own
site to correlate performance
improvements to the metrics
they care about and share
them alongside these case
studies
Focus on finding quick performance
wins with
high impact
It doesn’t matter if you can’t improve
revenue-related metrics
Tie any statistically significant
improvements to the metrics
they care about

https://www.thinkwithgoogle.com/feature/mobile/
New Google tool – Speed Scorecard

https://www.thinkwithgoogle.com/feature/mobile/
Calculate the potential revenue impact

Help upper management understand what your users
are experiencing

But our website is fast!
Your company’s CEO

How fast is my site?

Fast is a vague term
What exactly do we mean by fast?
In what context?
Fast for whom?

Load times vary dramatically from user to user, depending on
their device capabilities and network conditions.
Your page load time is the collection of all load times from
every individual user.

How do people around the globe
experience your site?
How do people experience your site when
they’re not on a desktop computer?

Run multiple WebPagetests using different locations and devices and
compare the results by compiling them into a single filmstrip view
URL structure: webpagetest.org/video/compare.php?tests=<Test 1 ID>,<Test 2 ID>

How fast should I be??

Avoid numbers: Focus on gaining an understanding of how your users
experience your site and your competitor’s in the same time frame

#2 Understanding performance

To fully understand why your site is performing the way it is,
you’ll need to:
Highlight which metrics
really matter
Be able to understand them
Be able to measure them
Assess your site’s performance &
how it is changing
Know where performance issues are
coming from and how to improve
Benchmark and then measure
effectiveness of your work

Traditional performance metrics have little or nothing to do
with the UX.
They are extremely unreliable, as they may not correspond to
when the user thinks the page is loaded.

• Time to First Byte
• Server Response Time
• Time to Title
• DOM Interactive
• DOM Content Loaded
• “Page Load Time”
• Fully Loaded
• Application Ready
• First Paint
• First Contentful Paint
• First Meaningful Paint
• Speed Index
• Visually Complete
• First Interactive
• Consistently Interactive
• Hero Content
Which metric?

Pick metrics that most accurately measure
performance as perceived by a human & will improve
the UX.

• Time to Title
• DOM Interactive
• Fully Loaded
• First Paint
• Speed Index
• Hero Content
Technical metrics

• Time to Title
• DOM Interactive
• Fully Loaded
• First Paint
• Speed Index
• Hero Content
Visual metrics

• Time to Title
• DOM Interactive
• Fully Loaded
• First Paint
• Speed Index
• Hero Content
Interactive metrics

Benchmark your current performance before making
any changes so that you can track improvements.
Anytime you optimize your site, make sure you record
your progress against these same metrics.

Synthetic Testing
Availability & Reliability
RUM
Real User Experience

Consistent stable baseline
Can measure and compare any website
Detailed analysis of assets
Video recording and filmstrips of the UX
Waterfall charts
Limited sample size
Limited geography
Datacentre based so average network conditions
are mimicked
Shows you exactly how users engage on your site
Large sample size
Real network and browser conditions
Geographic spread
Conversion & KPI correlation with performance metrics
Requires Javascript installed
Limited performance metrics
No detailed analysis of assets
No performance waterfall charts
Synthetic Testing RUM

What tool is best for what?

WebPagetest

Grades for several performance metrics

Detailed information for each request

Specify requests to be blocked

Pro tip:
Host a private instance of WebPagetest yourself and test a development
(nonlive) site before launching a new feature

Pro tip:
This can be great for incorporating performance into your design &
development workflow

Google Lighthouse

Critical Request Chains diagram

Performing batch tests
How to do it: https://builtvisible.com/using-google-lighthouse-to-monitor-webpage-performance/

Other key features
HTTP/2
WebP Images
First Meaningful Paint
Time to Interactive
Speed Index

It’s time to implement RUM to see what your users are truly
experiencing daily on your site

https://bit.ly/2v1GVq9
Home page
Top landing pages
Checkout flows
High-traffic areas
Location
(e.g. distance from
datacentre)
Network type
(e.g. Wi-Fi, mobile)
More RUM tools: https://bit.ly/2r1NqD6
https://newrelic.com

A few other tools suggested by industry experts

#3 Educate and empower your team

Educating

Develop
baselines
Educating

What’s acceptable for page
load time?
Measure your worst-performing
pages too
Benchmark against the best-
performing pages
Easy-to-follow guidelines and
benchmarks
Provide them with tools

Develop
baselines
Performance
budgets
Educating

For each new project, develop a performance budget and make sure all
designers and developers understand what it means
Make sure your outlined
performance goals are
measurable!!!!

Develop
baselines
Performance
budgets
Automated
emails
Educating

Send automated emails if any performance regressions occur across the
website.
Inform them as it happens will empower them to immediately fix it.

Develop
baselines
Performance
budgets
Automated
emails
Part of your
workflows
Educating

Make performance
work part of your
daily routine and
automate as much
as possible
Minimize the
operational costs
of this work over
time

Automate image compression as
new images are added to your site
Copy-and-pasteable design patterns
in a style guide for easy reuse
Check your page weight and critical
path using browser plug-ins
Incorporate performance into your
project documentation
Use an image resizing service and
caching by breakpoint
http://adaptive-images.com

Develop
baselines
Performance
budgets
Automated
emails
Part of your
workflows
Celebrate
Educating

As others contribute to the overall performance of
your site, motivate them to keep going by celebrating
their work

#4 Always work on your page speed

Maintain
expertise
• Update your tools,
metrics & best
practices
• Continue to teach
& train your team

Maintain
expertise
Continue to
measure
metrics & best
practices
& train your team
• As you iterate & test
your designs
• As you create new
designs & features

Maintain
expertise
Continue to
measure
Keep working
on it
metrics & best
practices
& train your team
• Your site is never
too fast
• Conduct routine
checks
your designs
designs & features

Maintain
expertise
Continue to
measure
Keep working
on it
Continue to
celebrate
metrics & best
practices
& train your team
• “Performance
hero“ dashboard
your designs
designs & features
• Your site is never
too fast
• Conduct routine
checks

To conclude…

Limiting the responsibility of performance to a small
group of people will make it impossible to keep the
site’s speed under control

Everyone should value the impact of performance in
UX and the business and is your responsibility to
achieve that culture of performance

Your site will never be too fast. Your work in site speed will
never be done

Learn more
Looking for further reading and want to view today’s
presentation? Head on over to our blog:
https://builtvisible.com/site-speed-for-in-house-marketers
Need our expertise?
If you’re looking to improve your site speed, get in touch.
Contact Us
Maria Camanes Fores
Technical SEO Consultant
49 Tabernacle Street
London EC2A 4AA
Maria@Builtvisible.com | @MariaCamanes

Site speed for in-house marketers | BrightonSEO

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Site speed for in-house marketers | BrightonSEO

Similar a Site speed for in-house marketers | BrightonSEO (20)

Más de Builtvisible

Más de Builtvisible (20)

Último

Último (20)

Site speed for in-house marketers | BrightonSEO