-
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
“DOM ready” refers to the amount of time it takes for the page’s HTML to be received and parsed by the browser. Actual page elements, such as images, haven’t appeared yet. (It’s kind of like getting ready to cook. Your cookbook is open, your recipe is in front of you, and your ingredients are on standby.)
It is the same as the DOM Content Loaded event in nav timing but the polyfill version that works across all browsers.
PRO: easily measured
CON: includes third parties and ATF content
DOM_ready + load time gets us up to 89.5% accuracy on the predictions
Takeaway: External blocking scripts (such as third-party ads, analytics, and social widgets) and styles (such as externally hosted CSS and fonts) have the greatest impact on DOM ready times. Site owners should measure the impact that these external elements have on their pages and conduct ongoing monitoring to ensure that scripts and styles are available and fast. Whenever possible, scripts should be served asynchronously (in parallel with the rest of the page) or in a non-blocking fashion.
DOM_ready + load time gets us up to 89.5% accuracy on predictions
PRO: can be measured with synthetic (benchmarking), ok correlations to biz metrics
CON: only measures *start*
PRO: extremely precise; used for both synthetic and RUM
CON: you need to know your pages; require some expertise to implement and manage
Etsy, Chrome, West Coast
Home Depot, Chrome, West Coast
Amazon, Chrome, West Coast