Design+Performance

Design + Performance

Steve Souders@souders

bringing designers & developers closer

together

flickr.com/photos/timdorr

flickr.com/photos/easyflow

https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

en.oreilly.com/velocity2009/public/schedule/detail/8523

…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

blog.mozilla.com/metrics/category/website-optimization/

We made the new platform 60% faster and this resulted in a 14% increase in donation conversions.

kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

blog.mozilla.com/metrics/category/website-optimization/

…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!


slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377

“traffic jumped from 6M to 11M uniques…time spent on site rose from 5.9 to 7.8

minutes…interaction rate on ads rose 108%”

Screen shot of blog post…we've decided to take site speed into account in our search rankings.

googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

“To stay in Google's good graces, websites must be designed so they load quickly on

mobile devices.”

huffingtonpost.com/2015/04/17/google-search-update_n_7085642.html

Fast is Good

flickr.com/photos/krissen/

designers & developers often work in silos

some designs are hard to make fast

being fast is importantflickr.com/photos/jronaldlee

Design + Performance

flickr.com/photos/easyflow

small interdisciplinary teams

guiding principles

flickr.com/photos/nihaogirl

Speed is more important than design embellishment.

People are filling small gaps in their day with news. It must load fast on all touchpoints.

The design should feel light and nimble, always fresh and up to date. Never heavy, slow to load or clogged up with content.

Users expect sites to render in under 2 seconds.

DAN/TBWA

example

prototype early

measure performance from the start

flickr.com/photos/josterpi

performance budgets

https://speakerdeck.com/lara/mobile-web-at-etsy

in-page remindersshow what’s beaconedbookmarklets

flickr.com/photos/josterpi

Measuring Performance

flickr.com/photos/thatguyfromcchs08

"The graph below shows the average number of seconds it takes 35 different computers located throughout the world to download our homepage."

2002

flickr.com/photos/cataniamichele

window.onload RUM• metrics from real users - COOL!• reflect actual geo, hw, bw, etc.• but, "start" time isn't right• and timer has latency2008

Navigation Timingoverall page metricsperformance.timing,.now()

Resource Timingindividual HTTP requestsperformance.getEntries()

User Timingcustom metricsperformance.mark(),.measure()

W3C Web Timing Specs

flickr.com/photos/zamboniandrea

“window.onload is not the best metric for measuring website

speed”

99% ATF rendered: 2.0s onload: 9.7s

onload: 3.9s 98% ATF rendered: 4.7s

overly optimistic

too critical

domInteractive

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

domInteractive .onload Speed Index

Bing

Disqus

CNN

MSN

There is no single metric that captures

the UX on all websites.

flickr.com/photos/packethunter

flickr.com/photos/15609463@N03

flickr.com/photos/kk

custom metrics

custom metricsdefine most important elements on the page

custom metricsdefine most important elements on the pagemeasure using User Timing

custom metricsdefine most important elements on the pagemeasure using User Timingtrack with RUM and synthetic

https://blog.twitter.com/2012/improving-performance-on-twittercom

image load time custom metric

<div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""> <strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part> Eric Lawrence </strong>

DISPLAY


<div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js-user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup-with-id" data-aria-label-part> Eric Lawrence </strong>

DISPLAY

custom metrics

flickr.com/photos/stevendepolo

flickr.com/photos/cataniamichele

There is no single metric that captures

the UX on all websites.

flickr.com/photos/packethunter

custom metricsdefine most important elements on the pagemeasure using User Timingtrack with RUM and synthetic

flickr.com/photos/kk

@soudersstevesouders.com/talks

Design+Performance

Internet

Transcript of Design+Performance