Upload
tammy-everts
View
816
Download
3
Embed Size (px)
Citation preview
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
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