how to fix the design issues that matter on the pages that matter [2016 smashing conference...
TRANSCRIPT
![Page 1: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/1.jpg)
the small things that add uphow to fix the design issues that matter on the pages that matter
@tameverts #smashingconf
![Page 2: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/2.jpg)
performance matters
![Page 3: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/3.jpg)
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
![Page 4: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/4.jpg)
fast
slow
@tameverts #smashingconf
![Page 5: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/5.jpg)
@tameverts #smashingconf
![Page 6: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/6.jpg)
WPOstats.com
![Page 7: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/7.jpg)
which design issues matter?which metrics matter?which pages matter?
![Page 8: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/8.jpg)
![Page 9: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/9.jpg)
which metrics matter?
![Page 10: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/10.jpg)
what we used to think…
![Page 11: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/11.jpg)
@tameverts #smashingconf
![Page 12: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/12.jpg)
what we know now…
![Page 13: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/13.jpg)
not everything matters
![Page 14: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/14.jpg)
machine learning FTW!https://github.com/WPO-Foundation/beacon-
ml
![Page 15: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/15.jpg)
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
![Page 16: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/16.jpg)
finding 1DOM ready (aka DOM content loaded)
and average session load time were the best combined indicators
of bounce rate
@tameverts #smashingconf
![Page 17: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/17.jpg)
Up to 89.5% accuracy
@tameverts #smashingconf
![Page 18: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/18.jpg)
@tameverts #smashingconf
bounce probability jumps to ~60% at 4.5s
![Page 19: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/19.jpg)
finding 2start render is important, too
@tameverts #smashingconf
![Page 20: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/20.jpg)
NB: first paint is not start render!first paint (Chrome) start render
@tameverts #smashingconf
![Page 21: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/21.jpg)
finding 3mobile-related metrics
were not meaningful predictors of conversions
@tameverts #smashingconf
![Page 22: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/22.jpg)
@tameverts #smashingconf
![Page 23: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/23.jpg)
start render repeat visits
![Page 24: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/24.jpg)
wow!
![Page 25: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/25.jpg)
UserTimingmeasure performance of your applications
through high-precision timestamps
https://www.w3.org/TR/user-timing/
![Page 26: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/26.jpg)
how long does it take to display
the main product image on my
site?
<img src=“image1.gif” onload=“performance.mark(‘image1’)”>
![Page 27: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/27.jpg)
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
![Page 29: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/29.jpg)
which pages matter?
![Page 30: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/30.jpg)
what we used to think…
![Page 31: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/31.jpg)
![Page 32: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/32.jpg)
![Page 33: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/33.jpg)
what we know now…
![Page 34: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/34.jpg)
it depends
![Page 35: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/35.jpg)
![Page 36: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/36.jpg)
![Page 37: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/37.jpg)
![Page 38: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/38.jpg)
source: webperf.io
@tameverts #smashingconf
![Page 39: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/39.jpg)
load times for “checkout” pages goes from 4 to 9 seconds
conversion rate barely decreases
@tameverts #smashingconf
![Page 40: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/40.jpg)
load time for “browse” pages grows from 1 to 6 seconds
conversion rate shrinks by ~50%
@tameverts #smashingconf
![Page 41: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/41.jpg)
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.
![Page 42: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/42.jpg)
TL;DRHow much impact does the performance
of this page have on conversions?
![Page 43: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/43.jpg)
![Page 44: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/44.jpg)
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
![Page 45: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/45.jpg)
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
![Page 46: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/46.jpg)
soasta.io/ConversionImpactScore
soasta.io/ActivityImpactScore
![Page 47: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/47.jpg)
which design issues matter?
![Page 48: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/48.jpg)
what we used to think…
![Page 49: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/49.jpg)
@tameverts #smashingconf
![Page 50: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/50.jpg)
@tameverts #smashingconf
![Page 51: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/51.jpg)
@tameverts #smashingconf
![Page 52: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/52.jpg)
![Page 53: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/53.jpg)
what we know now…
![Page 54: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/54.jpg)
it’s the same(but we know more)
![Page 55: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/55.jpg)
pages with more scripts are less likely to
convert
@tameverts #smashingconf
![Page 56: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/56.jpg)
@tameverts #smashingconf
160+ scripts… uh-oh
![Page 57: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/57.jpg)
the number of DOMelements on the page
matters… A LOT
@tameverts #smashingconf
![Page 58: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/58.jpg)
@tameverts #smashingconf
optimal: 400-700
![Page 59: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/59.jpg)
sessions that convert have fewer images
than sessions that don’t
@tameverts #smashingconf
![Page 60: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/60.jpg)
number of images per page (median)
@tameverts #smashingconf
![Page 61: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/61.jpg)
image format matters
@tameverts #smashingconf
![Page 62: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/62.jpg)
http://www.webperformancetoday.com/2014/09/17/progressive-image-rendering-good-evil
/
![Page 63: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/63.jpg)
@tameverts #smashingconf
![Page 64: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/64.jpg)
quick case study
![Page 65: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/65.jpg)
issue 1image quality and compression
issue 2 image sprite blocking page load
![Page 66: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/66.jpg)
![Page 67: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/67.jpg)
average site Fanatics
![Page 68: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/68.jpg)
2-second improvement in median page load time almost doubled mobile
conversions
![Page 69: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/69.jpg)
takeaways
![Page 70: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/70.jpg)
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
![Page 71: How to fix the design issues that matter on the pages that matter [2016 Smashing Conference Barcelona]](https://reader035.vdocuments.site/reader035/viewer/2022081605/58f9b348760da3da068bd485/html5/thumbnails/71.jpg)
thank you!@tameverts
performancebeacon.comWPOstats.com