How slow load times hurt UX (and what you can do about it) [FluentConf 2016]

How slow load times hurt UX
(and what you can do about it)

@tameverts
performancebeacon.com
WPOstats.com

What do users want?
What metrics does performance affect?
What are the most common
performance issues?
What can you do to fix them?

“47% of consumers expect a web
page to load in 2 seconds or less.”
Akamai, 2009

“But my site
is different.”

Performance affects everything…
for everyone

Every 1 second of load time
improvement equals a 2% conversion
rate increase for Walmart.com
Staples.com shaves 1 second from
median load time, improves conversion
rate by 10%
Intuit cuts load times by more than half,
increases conversions by 14%

http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

At Google, a 500-millisecond
slowdown equals a 25% decrease in
searches
GQ cuts load time by 80%, grows
traffic by 83%
Edmunds.com shaves 7 seconds off
load time, sees 17% increase in page
views and 3% increase in ad revenue

Lara Hogan, Senior Engineering Manager
“We ran this experiment on mobile web
where we added 160 kilobytes of hidden images,
meaning the user saw nothing different.
We just dumped a bunch of hidden images onto the
page and increased page weight by 160 kilobytes.
It triggered a 12% increase in bounce rate. Insane.
Twelve percent is a lot of percent.”

What are the most common
performance/UX issues?

Why?????
Poorly executed stylesheets
e.g. carousels, sliders, RWD, custom fonts
Blocking/unoptimized JS
e.g. third-party scripts, pop-ups
Massive resources
e.g. high-res hero images
Designing, developing, and testing in an ivory tower
Little/no real user monitoring of live sites

19 things you can do*
*There are waaaaay more than 19 things you can do

Front-end
Back-end
“80-90% of end-user response time is
at the front end. Start there.”
Steve Souders, ‘High Performance Web Sites’

http://www.soasta.com/blog/more-bandwidth-isnt-a-magic-bullet-for-web-performance/

Know where your page weight
is coming from
Create a performance budget
for your pages
Measure, measure, measure
Solutions

How to set a performance budget
http://timkadlec.com/2013/01/setting-a-
performance-budget/
Performance budget metrics
http://timkadlec.com/2014/11/performance-budget-
metrics/

Reformat
Compress
Defer/lazy load
Adaptive images
Auto-preloading
Solutions

http://www.oreilly.com/pub/e/3425

Consolidate resources
Make sure stylesheets are in the document
HEAD
Optimize web fonts (See Ilya Grigorik’s post:
http://soasta.io/1R8ySpw)
Optimize pop-up scripts
Monitor performance ALL THE TIME
Solutions

http://www.slideshare.net/nzakas/enough-withthejavascriptalready
https://vimeo.com/79098392

http://blog.codinghorror.com/the-principle-of-least-power/

Third-party content
can make up >50%
of page requests

What if my third parties fail?
Original: 3.5s
SPOF: 22.7s

Defer scripts
Use asynchronous versions
(when possible)
Know your scripts and their
performance penalties
Monitor constantly
Solutions

http://soasta.io/timei
smoneybook

Thanks!
@tameverts
performancebeacon.com
WPOstats.com

How slow load times hurt UX (and what you can do about it) [FluentConf 2016]

More Related Content

How slow load times hurt UX (and what you can do about it) [FluentConf 2016]