Let's Talk About Responsive Images and Performance

Let’s Talk About
Images!
@jennlukas
#talkimages
http://i.imgur.com/jR6CrMx.jpg

AS DEVICE
NUMBERS GROW,
OUR SITE SIZES
NEED TO SHRINK
http://bradfrost.com/wp-content/uploads/2013/11/devices-copy.jpg

100 MILLISECONDS
is how long you have for the user to feel like the task was
instantaneous
http://www.nngroup.com/articles/response-times-3-important-limits/
1 SECOND
is how long you have for the user’s state of ﬂow to remain
uninterrupted (though the delay will still be noticeable)
10 SECONDS
is how long you have before the user loses interest entirely and
will want to multitask while the task is completing

To keep an uninterrupted ﬂow,
we want to aim for a ﬁrst
render time of
1 SECOND

40%
of people abandon a website
that takes more than 3 seconds
to load
blog.kissmetrics.com/loading-time/

AKAMAI has reported that 75%
of online shoppers who
experience an issue such as a site
freezing, crashing, taking too long
to load, or having a convoluted
checkout process will not buy from
that site
http://calendar.perfplanet.com/2014/changing-culture-at-your-organization/

WALMART.COM found that for every
second of load time improvement,
conversions increased by up to 2%
radware.com/fall-sotu2014/
STAPLES.COM found that for every one
second of improvement conversions
increased by 10%

Over the last 2 years, the average web
page size has grown from:
828KB (2012)
1687KB (2013)
1931KB (2014)

Images on the web can
account for up to 75% of
our total page loading time!
Image use is now averaging
a whopping 1243KB on
websites.

IMAGE STRATEGY needs to
be a top priority for enhancing
our websites

ECOMMERCE
http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg

The top 100 Ecommerce
home pages take
6.5 SECONDS
to render and
11.4 SECONDS
to fully load

llbean.com 0.67MB
forever21.com 0.88MB
ae.com 1.21MB
zappos.com 1.36MB
abercrombie.com 2.37MB
modcloth 14.18MB

Identify areas to use
browser text and CSS
effects for enhancing your
site and avoid extra server
calls and page weight

Content strategy
must be a part of your
image strategy

PERFORMANCE
BUDGET

clearleft.com/thinks/responsivedesignonabudget/
timkadlec.com/2013/01/setting-a-performance-budget/

The Speed Index metric measures how
page loading is perceived by users than
load time is.
The industry goal is a speed index of
1000.

We want our pages to load in 3
seconds or under on a cable
connection.
40% of people abandon a website that
takes more than 3 seconds to load.

20% Rule
The 20% rule from Steven Seow states that
people perceive tasks slower or faster when
there is a difference of at least 20% from the
current speed.
We need to make our site 20% faster than our
own site and/or top competitors.

CHOOSE IMAGES
WISELY

1920x1080
281KB
500x281
10KB96% SAVINGS

SRCSET
&
SIZES
http://i.imgur.com/QTpl1.jpg

http://caniuse.com/#feat=srcset

RETINA
IMAGES
http://tercerahkan.com/wp-content/uploads/2014/05/70191-b460ba-500-333.jpg

THE
PICTURE
ELEMENT
http://i.imgur.com/QTpl1.jpg

Use the picture element
to enhance art direction

codepen.io/Jenn/pen/ef916555aa228574247599d7948b578c

<picture>
<source media="(min-width: 60em)"
srcset="/images/feature-xl.jpg">
srcset="/images/feature-large.jpg">
</picture>

<picture>
srcset="/images/feature.jpg,
/images/feature@1.5x.jpg 1.5x,
/images/feature@2x.jpg 2x">
</picture>

TYPE
ATTRIBUTE
http://www.cat-breed-info.com/images/grouphomepage.jpg

sarasoueidan.com/blog/svg-picture

CHOOSE THE
BEST
SOLUTION FOR
YOU
http://www.cat-breed-info.com/images/grouphomepage.jpg

Let's Talk About Responsive Images and Performance

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Let's Talk About Responsive Images and Performance