PERFORMANCE 

OPTIMIZATION



why we should care & how to plan it

(And how to really plan it)

disclaimer


This presentation is somewhat heavily inspired by two talks given at 
An Event Apart conference in San Francisco, 2015:


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


No one ever wanted to create a site 
or an app that is non-performant

why optimize, you say?



Good performance is good design.

Fast sites build trust.

Fast sites are memorable. 


Your users want content fast.

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.

how to optimize?


Compression

Clean code

Optimize for the medium (mobile)

Web fonts

Style guides

Etc.

so if we all know why AND

we all know how...

SLOW SITES ARE A RESULT OF... 


Poor planning

Poor communication 

Poor discipline 

Poor awareness

here is the proof:


Bizdev (33%)
Pitching ideas
Expectations
Big picture


Design (33%)
Brainstorm
Style tiles, mood boards
Mocks


Dev (33%)
R&R
Integration
Performance optimisation

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



Bizdev (33%)
Design (33%)
Dev (33%)
Performance optimisation

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 TANGIBLE and objective WAY 

TO TALK ABOUT PERFORMANCE. 

" The important point is to look at 
every decision, 
right through the design/build process, 
as something that 
has consequence... "

– Mark perkins 


example


Our site should be 400kb 
and make no more than 15 requests. 

It should average a loading time of 10 seconds 
on sub-3G connection. 

This means that I need 
to split 400kb in between CSS/images/JS.

But how do you get there ?


  1. Establish the standard
  2. Allocate the budget
  3. Stick to it
  4. Document and remind

1. establish the standard


Using tools like WebPageTest, determine the:

  1. page weight
  2. start render time
  3. fully loaded time
  4. speed index

So let's try for Dynamo!

http://www.webpagetest.org/result/151123_9D_YJ9/

1. (..)


don't forget to check

the competition



Important reminder: 
a website performance is public


Use the 20% rule to find 
and establish your standards.

1. (...)


just for fun


Dynamo 

vs 

Gin Lane 

vs 

Thoughbot 

http://www.webpagetest.org/video/compare.php?tests=151123_H3_YC1%2C151123_HX_YC3%2C151123_Z5_YC4&thumbSize=150&ival=500&end=visual

1. (...)


So if I want to be 20% faster than my fastest competitor...
my page needs to load in X seconds.


For my page to do that ...
it needs to weigh X kb.


Etc.

2. Allocate that budget


  • Fonts
  • Images
  • Markup
  • JS

2. (...)


You will face 

tough decisions 

from the get go


Example:  If you have a total budget of 1mb
and already are spending:

  • 150kb in fonts
  • 500kb in images

You know that background video won't fly 
(or it will require extra work).

3. stick to it


Use automation tools (grunt, gulp).

Make this part of the dev and deploy process.

Inform the client of the 
impact of new requested features.

4. document and remind


Make those part of pitch documents.

Make those standards part 
of the agency standards.

Also document them in the readme files.

Make it easy for everybody to know them 
and where to find them.

Motivate the team to get 
better results, à la Etsy!

No one and everyone is 
the performance cop.

(Psssst)


Quick note about style guides


http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/


  • 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



Planning for performance and using tools to quantify it...

Makes it easier for PMs to explain to the client

Makes it easier for designers to know
what impacts the performance

Makes it easier for developers
to justify their decisions

Makes it easier for everyone to make 
sure the site is performant

Sources


http://danielmall.com/articles/how-to-make-a-performance-budget/

https://timkadlec.com/2013/01/setting-a-performance-budget/

https://timkadlec.com/2014/11/performance-budget-metrics/

http://blog.fogcreek.com/performance-budgets-for-web-development/

http://cognition.happycog.com/article/designing-with-a-performance-budget

http://blog.invisionapp.com/setting-a-web-performance-budget/

http://clearleft.com/thinks/98

have any questions, 

fears or needs?


what's next for dynamo?

that's it!




Thanks guys :)



Github
https://github.com/simonwalsh

Twitter
https://twitter.com/sim_walsh

Email
simon@godynamo.com
Made with Slides.com