PERFORMANCE
OPTIMIZATION
why we should care & how to plan it
disclaimer
Design Decisions through the Lens of Performance
by Yesenia Perez Cruz
Designing for Performance
by Lara Callender Hogan
Props to those two awesome women!
premise of the talk
why optimize, you say?
Fast sites are memorable.
Listen to the users
Online shoppers expected pages to load in 2 seconds
and at 3 seconds,
a large share abandon the site.
People will visit a Web site less often
if it is slower
than a close competitor
by more than 250 milliseconds.
more preci$ely
Amazon observed
a 1% decrease in
revenue
for every
100ms added to
page load.
For every 1 second
that page load
time decreased,
Walmart saw up
to a 2% increase
in conversions.
Obama campaign made the new platform
60% faster
and this
resulted in a 14% in donation conversions.
Etsy added 160k to a page and it resulted in
an increase of 12% for its bounce rate
on mobile
Performance is a
marketable feature.
Performance is a
marketable feature.
how to optimize?
so if we all know why AND
we all know how...
SLOW SITES ARE A RESULT OF...
here is the proof:
what wrong then?
" Deciding a page can't exceed 500kb when a mock-up containing three
carousels and a full-screen high-resolution background image has
already been approved isn’t going to do you much good "
–Tim Kadlec
performance needs
to be a project goal
Make performance part of
everyone’s workflow.
Make performance part of
everyone’s workflow.
it is nobody's
fault really
so how do we really do it?
performance budgets, FTW!
A performance goal used
to
guide design &
development
A performance goal used to
guide design & development
A TANGIBLE and objective WAY
TO TALK ABOUT PERFORMANCE.
example
But how do you get there ?
- Establish the standard
- Allocate the budget
- Stick to it
- Document and remind
1. establish the standard
- page weight
- start render time
- fully loaded time
- speed index
1. (..)
don't forget to check
the competition
1. (...)
just for fun
1. (...)
2. Allocate that budget
- Fonts
- Images
- Markup
- JS
2. (...)
You will face
tough decisions
from the get go
- 150kb in fonts
- 500kb in images
3. stick to it
4. document and remind
No one and everyone is
the performance cop.
(Psssst)
Quick note about style guides
- Their HTML is 48% smaller
- 21% faster load time
- 60% faster time to first byte
- Reduced unused CSS by 135kb
- Search results page views increased by 11%
- Property detail page views increased by 3%
the takeaway
what impacts the performance
to justify their decisions
Sources
have any questions,
fears or needs?
what's next for dynamo?
that's it!
How to plan of performance
By Simon Walsh
How to plan of performance
A quick introduction to the pros of using Angularjs in your project
- 599