1.
#SmashingConf
connecting the dots
between design, performance,
and conversion rates

2.
@tameverts
WPOstats.com

3.
performance matters

4.
the average web user believes they waste
two days a year waiting for pages to load

5.
“web stress”
when apps or sites are slow,
we have to concentrate
up to 50% harder to stay on task
@tameverts

6.
Rebuilding Pinterest pages for performance
resulted in 40% decrease in wait time, 15%
increase in SEO traffic, and 15% increase in
signup conversion rate
Ancestry.com saw a 7% increase in
conversions after improving render time by
68%, page weight by 46% and load time by
64%
Staples reduced median page load time by 1
second and 98th percentile load time by 6
seconds, resulting in a 10% conversion rate@tameverts

7.
@tameverts

8.
how fast is fast enough?
which design issues matter?
which metrics should I monitor?

9.
how fast is fast enough?

10.
optimal load times for peak conversions
@tameverts

11.
even 100ms delays matter
@tameverts

12.
which design issues matter?

13.
real user data +
machine learning
https://www.thinkwithgoogle.com/marketing-resources/
experience-design/mobile-page-speed-load-time/

14.
collected 1M+ beacons of real user data
across 93 attributes, including…
• 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…

15.
sessions that convert
have fewer images
than sessions that don’t

16.
@tameverts

17.
so what can you do
with these numbers?

18.
46%
@tameverts

19.
pages with more scripts
are less likely to convert

20.
160+ scripts… uh-oh
@tameverts

21.
https://speakerdeck.com/csswizardry/its-my-third-party-and-ill-cry-if-i-want-to

22.
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
Embrace performance budgets and
learn to live within them.
For mobile, aim for a JS budget of
<170KB minified/compressed.
Uncompressed this is still ~0.7MB of
code.
Addy Osmani • Google engineer

23.
which page metrics matter?

24.
TTFB DNS TCP Start render
DOM loading DOM ready Page load Fully loaded
TTI Resource timing Number of requests Bytes in
Speed Index PageSpeed Navigation timing DOM elements
DOM size Visually complete TTFP TTFMP

25.
DOM ready (aka DOM content
loaded) and average session
load time were the best
indicators of bounce rate

26.
load time
the time from the start of the initial navigation
until the beginning of the window load event

27.
up to 89.5% accuracy
@tameverts

28.
@tameverts

29.
start render is
important, too

30.
start render
the time from the start of the initial navigation
until the first non-white content is painted to
the browser display

31.
NB: first paint is not start render!
first paint (Chrome) start render
@tameverts

32.
start render repeat visits

33.
wow!
@tameverts

34.
start render
problem
blocking CSS
blocking JS
webfonts
solution
inline critical CSS, loadCSS
async, defer, lazy load
display:optional
>
>
>

35.
but… sometimes metrics fail

36.
custom metrics FTW!
measure performance with high-precision
timestamps, using both synthetic and real user
monitoring
https://www.w3.org/TR/user-timing/
https://speedcurve.com/blog/user-timing-and-custom-metrics/

37.
how long does it take
to display the main
product image on my
site?

38.
Time to First Tweet
The time from clicking the link to viewing
the first tweet on each page’s timeline
Pinner Wait Time (PWT)
The time from initiating an action (e.g.,
tapping a pin) until the action is complete
(pin close-up view is loaded)
@tameverts

39.
@tameverts

40.
hero rendering times
H1
largest image
largest background image
https://speedcurve.com/blog/web-performance-monitoring-hero-times/

41.
quick case study

42.
issue 1
image quality and
compression
issue 2
image sprite blocking
page load

43.
average site Fanatics
@tameverts

44.
2-second improvement
in median page load time
almost doubled mobile conversions
@tameverts

45.
takeaways

46.
1. You can’t understand what you don’t measure
2. You don’t have to optimize everything
3. Focus on user-centered metrics
4. Validate your metrics regularly
5. Set targets (e.g., performance budgets)
6. Make yourself accountable (e.g., alerts)
7. Remember that even small design changes can
make a big difference

47.
thank you
@tameverts
speedcurve.com/blog