2015 04-23 o reilly speed-curve webinar

April 23, 2015 ‹#›

what do data heroes do?

© 2015 SOASTA. All rights reserved. April 23, 2015 ‹#›

Data heroes…

o Collect meaningful metricso Focus on the most important datao Use data to advocate for the user

experienceo Create a common language for

interdisciplinary teams


44% Consumers say slow transactions make them

anxious about transaction success.

http://www.webperformancetoday.com/2013/05/06/psychology-waiting-faster-online-checkout/


51% Consumers say slowness is the top reason they would

abandon a purchase online.

http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/05/case-study-page-load-time-conversions/

performance has different meanings


o Page Load Time

o TCP Latency

o Front-End Time

o Back-End Time

o DNS Resolution Time

o Time to First Byte

o SSL Handshake Time

o Front-End SPOFs

o Time to Critical Content

application developer


o Cart Conversion Rate

o Bounce Rate

o Average Order Value

o Pages per Visit

o Retention Rate

o Click Through Rate

o Customer Lifetime Value

o Revenue per Minute

o Abandonment Rate

business executive

o Page Load Time

o TCP Latency

o Front-End Time

o Back-End Time




o Front-End SPOFs



o Bounce Rate


o Pages per Visit

o Retention Rate




o Abandonment Rate

“I just want to buy my Mom’s birthday present.”

user

o Page Load Time

o TCP Latency

o Front-End Time

o Back-End Time




o Front-End SPOFs



o Bounce Rate


o Pages per Visit

o Retention Rate




o Abandonment Rate

“I just want to buy my Mom’s birthday present.”


what should my performance budget be?


All sites deliver both good and bad experiences every day, at the same time


(Baseline conversion rate: 2.9%)

2.9 sec = 5.8% convert

9.9 sec = 1.4% convert

flickr.com/photos/timdorr

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

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

“We made the new platform 60% faster and this resulted in a 14% increase in

donation conversions.”

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

load quickly on mobile devices.”

flickr.com/photos/jronaldlee

designers & developers often work in silos



some designs are hard to make fast



some designs are hard to make fast

being fast is important


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 under2 seconds.

DAN/TBWA

Engage quickly and then make it feel like you’re there.Tourists are making a big decision so they want to know that it’s worth it.

People need to know they are in the right place - hook them immediately with engaging imagery.

Unobtrusively stream in lots of rich content.

DAN/TBWA

small interdisciplinary teams

prototype early

performance budgets

measure performance from the start

flickr.com/photos/josterpi

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


in-page reminders


in-page remindersshow what’s beaconed


in-page remindersshow what’s beaconedbookmarklets

“window.onload is not the best metric

for measuring website speed”

onload: 3.9s

onload: 3.9s 98% ATF rendered: 4.7s


overly optimistic

99% ATF rendered: 2.0s


overly optimistic

99% ATF rendered: 2.0s onload: 9.7s


overly optimistic

99% ATF rendered: 2.0s onload: 9.7s


overly optimistic

too critical

flickr.com/photos/goincase

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

filmstrips

custom metrics

custom metricsdefine most important

elements on the page


elements on the pagemeasure using User Timing


elements on the pagemeasure using User Timingtrack with RUM and synthetic

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

<head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head>



performance .getEntriesByName("hero.jpg")[0] .duration




var observer = new MutationObserver(obsCallback);

observer.observe(document, { childList: true, attributes: true, subtree: true });




function imagePolling() { var hero = document.getElementById('hero'); if ( hero.offsetHeight ) { performance.mark('hero'); } else { setTimeout(imagePolling, 100); } }




<img src="hero.jpg"> <script> performance.mark("hero"); </script>

max(image onload, inline script)

<img src="hero.jpg" onload="performance.mark('hero1')">

<script> performance.mark("hero2"); </script>

when is image displayed?

custom metrics


Data heroes…

o Collect meaningful metricso Focus on the most important datao Use data to advocate for the user

experienceo Create a common language for

interdisciplinary teams


mPulse and SpeedCurve for $99

o Start an interdisciplinary conversation about performance

o Understand how delays affect your business

o Determine your performance budget

o Measure the most important parts of the page with User Timing

soasta.com/speedcurve

http://soasta.com/speedcurve

2015 04-23 o reilly speed-curve webinar

Data & Analytics

Transcript of 2015 04-23 o reilly speed-curve webinar