Responsive designs are inherently slow so this presentation outlines emerging standards for optimizing image delivery. This speeds up the load time on responsive web designs.

1. Supercharge Responsive Design
SMX Milan 2014

2. 2
Search
Experience
Op.miza.on®
Evolve
Responsively.
It’s
about
intercep(ng
the
most
produc.ve
audiences
and
delivering
experien(al
content

3. 3
Responsive
Design
Fits
the
Lifestyle
Make
the
experience
fast
so
it
responds
seamlessly
throughout
the
day
Commu(ng
(7am
–
10am)
Work
Time
(10am
–
5pm)
Leisure
Time
(8pm
–
12am)
Source:

4. Supercharge
Responsive
Design
Google’s
recommended
mobile
configura.on
is
inherently
slow
2.81
13.5
11.64
M. Site RWD Laptop
16
14
12
10
8
6
4
2
0
Responsive Design and Load Time
• Don’t
load
the
same
assets
to
web
and
mobile
• Use
SVG
images
for
icons
and
logos
• Leverage
emerging
standards
for
srcset
and
<picture>
• Responsive
backend
with
“Vary:
User-­‐
Agent”
in
h]p
response
• Op.mize
for
PageSpeed
best
prac.ces
• Ensure
videos,
images,
stylesheets
and
scripts
are
fully
accessible
Avg.
Load
Times
for
Mobile
Configura.ons
(seconds)
Source: High Performance Responsive Design By Tom Barker – O'Reilly Media

5. Responsive
sites
ocen
serve
the
same
high-­‐res
images
to
desktop
and
mobile
5
Responsive
Images
in
a
Re.na
World
Both
experiences
serve
the
same
heavy
image

6. Images
on
Responsive/Re.na
Templates
are
Heavy
6
Considering
the
web,
images
account
for
62%
of
total
weight
Avg.
PageSpeed
42%
Source: HTTP Archive – http://goo.gl/o4ucTh

7. Don’t
Serve
the
Same
Assets
to
Mobile
7
With
the
same
assets
served
to
mobile,
avg.
PageSpeed
is
13%
lower
Avg.
Mobile
PageSpeed
29%

8. SVG
Images
8
SVG
has
strong
browser
compa.bility
and
should
be
used
for
icons
and
logos

9. Scale
Images
Using
SRCSET
and
SIZES
Scale
images
across
varying
viewport
widths
and
screen
resolu.ons.
<img
src="yacht_race@fallback.jpg”
srcset=“
img/yacht_race@mobile.jpg
320w,
img/yacht_race@wide-­‐mobile.jpg
480w,
img/yacht_race@tablet.jpg
768w,
img/yacht_race@desktop.jpg
1024w,
img/yacht_race@hires.jpg
1280w"
sizes=“
(max-­‐width:
20em)
30vw,
(max-­‐width:
30em)
60vw,
(max-­‐width:
40em)
90vw"
alt="A
very
exci.ng
yacht
race.”
/>
9
• SRC
Source: http://goo.gl/qXGhlj
serves
as
the
fallback
image
• SRCSET
provides
alternate
images
for
varying
widths
• SIZES
provide
an
es.mated
image
layout
width
• Allows
media
condi.ons

10. Direct
Images
with
PICTURE
and
SOURCE
MEDIA
The
picture
element
allows
for
various
image
sizes
at
different
resolu.ons.
<picture>
<!-­‐-­‐
16:9
crop
-­‐-­‐>
<source
media="(min-­‐width:
36em)"
srcset="quilt_2/detail/large.jpg
1920w,
quilt_2/detail/medium.jpg
960w,
quilt_2/detail/small.jpg
480w"
/>
<!-­‐-­‐
square
crop
-­‐-­‐>
<source
srcset="quilt_2/square/large.jpg
822w,
quilt_2/square/medium.jpg
640w,
quilt_2/square/small.jpg
320w"
/>
<img
• SOURCE
src="quilt_2/detail/medium.jpg"
alt="Detail
of
the
above
quilt,
highligh.ng
the
embroidery
and
exo.c
s.tchwork."
/>
</picture>
10
Source: http://goo.gl/qXGhlj
uses
media
queries
for
advanced
customiza.on
• Apply
CSS
to
the
IMG,
not
the
PICTURE

11. Desired
Results
from
<picture>
11
The
results
show
a
more
detailed
and
firng
image
to
mobile
users.
Source: http://goo.gl/qXGhlj

12. Responsive
Back-­‐End
• WURFL
Cloud
is
useful
for
server-­‐side
customiza.on
– Serve
unique
mobile
content
(e.g.
store
locator)
– Requires
“Vary:
User-­‐Agent”
12
Server-­‐side
customiza.on
is
fast.
Easy
to
retrieve
device
informa.on

13. Use
“Vary:
User-­‐Agent”
when
Dynamic
• The
“Vary:
User-­‐Agent”
direc.ve
should
be
used
when
the
content
is
different
on
mobile
vs
laptop
• “Vary:
User-­‐Agent”
let’s
the
ISP
know
to
consider
the
user
agent
when
serving
cached
assets
13
GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

14. Op.mize
Load
Times
Purpose
Minimize
load
.me
because
users
and
engines
strongly
favor
pages
that
load
within
one
or
two
seconds.
Recommendations
• Reduce
server
response
.me
• Leverage
browser
caching
• Reduce
the
file
sizes
of
images
• Reduce
the
number
of
JavaScript
includes
• Reduce
h]p
requests
by
consolida.ng
include
files
• Minify
JavaScript
includes
to
reduce
file
size
• Move
JavaScript
includes
to
bo]om
of
markup
MOBILE
48
100
Figure 1. Mobile PageSpeed score for
SeroquelXR.com

15. Make
Assets
Fully
Accessible
Purpose
Google
requires
access
to
digital
assets
like
videos,
images,
stylesheets
and
scripts.
Robots.txt
Don’t
block
videos,
images,
stylesheets
or
scripts.
XML Sitemap
Include
videos
and
high
resolu.on
images
in
XML
sitemap.
Figure 1. 100% site saturation occurs when the number of
submitted pages matches the number of indexed pages.

16. 16

17. A
Supercharged
Responsive
Design…
…uses the best attributes from each of the recommended mobile configurations
17
A
Supercharged
Responsive
Design
Source: metrics for illustrative purposes only
Separate
Dynamic
Responsive
§ Highly
customized
§ Very
fast
§ Customiza.on
from
client-­‐side
§ Only
one
URL
§ No
Redirects
Average
Load
Time
in
Seconds
Post
Op.miza.on
Load
Time
5.81
9.14
1.34
1.65
10
8
6
4
2
0
Site
1
Site
2