the small things that add uphow to fix the design issues that matter on the pages that matter

@tameverts #smashingconf

performance matters

Every 1 second of median 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 median load times by more than half, increases conversions by 14%@tameverts

#smashingconf

fast

slow

@tameverts #smashingconf

@tameverts #smashingconf

WPOstats.com

which design issues matter?which metrics matter?which pages matter?

which metrics matter?

what we used to think…

@tameverts #smashingconf

what we know now…

not everything matters

machine learning FTW!https://github.com/WPO-Foundation/beacon-

ml

collected beacon data for 93 attributes

• top-level – domain, timestamp, SSL• session – start time, length (in pages), total load time• user agent – browser, OS, mobile ISP• geo – country, city, organization, ISP, network speed• bandwidth • timers – base, custom, user-defined• custom metrics• HTTP headers• much more…

https://docs.soasta.com/whatsinbeacon/ @tameverts

#smashingconf

finding 1DOM ready (aka DOM content loaded)

and average session load time were the best combined indicators

of bounce rate

@tameverts #smashingconf

Up to 89.5% accuracy

@tameverts #smashingconf

@tameverts #smashingconf

bounce probability jumps to ~60% at 4.5s

finding 2start render is important, too

@tameverts #smashingconf

NB: first paint is not start render!first paint (Chrome) start render

@tameverts #smashingconf

finding 3mobile-related metrics

were not meaningful predictors of conversions

@tameverts #smashingconf

@tameverts #smashingconf

start render repeat visits

wow!

UserTimingmeasure performance of your applications

through high-precision timestamps

https://www.w3.org/TR/user-timing/

how long does it take to display

the main product image on my

site?

<img src=“image1.gif” onload=“performance.mark(‘image1’)”>

measure hero image delayhttp://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/

measure aggregate times to get “above the fold” time

http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html

http://soasta.io/perftimings

which pages matter?

what we used to think…

what we know now…

it depends

source: webperf.io

@tameverts #smashingconf

load times for “checkout” pages goes from 4 to 9 seconds

conversion rate barely decreases

@tameverts #smashingconf

load time for “browse” pages grows from 1 to 6 seconds

conversion rate shrinks by ~50%

@tameverts #smashingconf

Conversion Impact ScoreThe Conversion Impact Score (CIS) is a relative score that ranks page groups by their propensity to negatively impact conversions due to high load times. For each page group, the Conversion Impact Score is calculated using the proportion of overall requests that are associated with that group, along with the Spearman Ranked Correlation between its load times and number of conversions. The Conversion Impact Score will always be a number between -1 and 1, though scores much greater than zero should be very rare. The more negative the score, the more detrimental to conversions that high load times for that page group are, relative to the other page groups.

TL;DRHow much impact does the performance

of this page have on conversions?

what you needaccess to 100% of your user data

(including historical data)tag pages into meaningful groups,

(products, departments, search, promotions, checkout)

correlate performance data to conversion rate

avoid these mistakeswasting massive optimization resources

on the wrong pagescontinuing to optimize pages that are

already fast enoughignoring pages that have relatively good

performanceforgetting that every site is different

soasta.io/ConversionImpactScore

soasta.io/ActivityImpactScore

which design issues matter?

what we used to think…

@tameverts #smashingconf

@tameverts #smashingconf

@tameverts #smashingconf

what we know now…

it’s the same(but we know more)

pages with more scripts are less likely to

convert

@tameverts #smashingconf

@tameverts #smashingconf

160+ scripts… uh-oh

the number of DOMelements on the page

matters… A LOT

@tameverts #smashingconf

@tameverts #smashingconf

optimal: 400-700

sessions that convert have fewer images

than sessions that don’t

@tameverts #smashingconf

number of images per page (median)

@tameverts #smashingconf

image format matters

@tameverts #smashingconf

http://www.webperformancetoday.com/2014/09/17/progressive-image-rendering-good-evil

/

@tameverts #smashingconf

quick case study

issue 1image quality and compression

issue 2 image sprite blocking page load

average site Fanatics

2-second improvement in median page load time almost doubled mobile

conversions

takeaways

1 Every site and app is different2 User behaviour is context sensitive and

always changing3 Performance issues are unpredictable4 You can’t understand what you don’t

measure5 You don’t have to optimize everything 6 Even small design changes can make

a big difference@tameverts

#smashingconf

thank you!@tameverts

performancebeacon.comWPOstats.com