Slide 1
Slide 1 text
e Performance Implications of
Responsive Web Design
http://www.flickr.com/photos/stuart-dootson/4024407198
Jason Grigsby • @grigs • cloudfour.com
Slides: bit.ly/rwd-performance
Slide 2
Slide 2 text
e web has always been a balancing act…
http://www.flickr.com/photos/classblog/5136926303
Slide 3
Slide 3 text
with many competing priorities.
http://www.flickr.com/photos/tudor/4324056624/
Slide 4
Slide 4 text
Finding that balance
is more difficult…
http://www.flickr.com/photos/superfantastic/50088733/
Slide 5
Slide 5 text
as device diversity increases.
http://www.flickr.com/photos/lyza/7382235106
Slide 6
Slide 6 text
http://www.flickr.com/photos/darrentunnicliff/4232232092/
Responsive web design offers us
for a sensible way to deal with device diversity.
Slide 7
Slide 7 text
And yet the one question I frequently ask myself is…
Slide 8
Slide 8 text
Can a one size ts all solution…
http://www.flickr.com/photos/sldghmmr/6041481069
Slide 9
Slide 9 text
compete with
a tailored experience?
http://www.flickr.com/photos/helloturkeytoe/4932748746/
Slide 10
Slide 10 text
Important question from many perspectives:
Slide 11
Slide 11 text
Important question from many perspectives:
Context
User experience
Advertising
Slide 12
Slide 12 text
Important question from many perspectives:
Context
User experience
Advertising
Search engine optimization
Slide 13
Slide 13 text
And most importantly for those of us at Velocity:
Slide 14
Slide 14 text
And most importantly for those of us at Velocity:
Performance
Slide 15
Slide 15 text
To answer this question, we’re going to look at:
• Why responsive design
• Current performance
• Ways improve performance
• Unsolved challenges
Slide 16
Slide 16 text
Why concern ourselves with
responsive web design?
Slide 17
Slide 17 text
Upcoming Zombie
Apocalypse of Devices
http://www.flickr.com/photos/adactio/6301799843
Slide 18
Slide 18 text
More devices
every day
Slide 19
Slide 19 text
ere is no
Android
Snapshot of 500
Android screen
sizes on EU site
http://stephanierieger.com/the-trouble-with-android/
Slide 20
Slide 20 text
Short run problem is mobile phones
Slide 21
Slide 21 text
Content
& Services
Car sketch: http://www.flickr.com/photos/cloppy/5081768461/
HTML
HTML
HTML
HTML HTML
HTML
HTML
HTML
NATIVE
NATIVE
NATIVE
Long run problem
Slide 22
Slide 22 text
http://www.flickr.com/photos/localcelebrity/6023138435/
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
ree Main Pieces to Responsive Web Design
Fluid Grids
Flexible Images
Media Queries
Slide 25
Slide 25 text
e key from a performance perspective:
same document regardless of client.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Original Resized K Saved % Saved
Holmes 34.7K 8.1K 26.6K 76.6%
Watson 39.0K 8.4K 30.6K 78.4%
Mycroft 30.5K 6.7K 23.8K 78.0%
Moriarty 43.4K 8.2K 35.2K 81.1%
Adler 26.0K 6.6K 19.4K 74.6%
Winter 34.7K 7.8K 26.9K 77.5%
Total 208.3K 45.8K 162.5K 78.0%
Media Queries Hide Problems
Slide 28
Slide 28 text
https://twitter.com/ldexterldesign/status/55229350299181057
Slide 29
Slide 29 text
https://twitter.com/ldexterldesign/status/55229350299181057
Crap, that’s not what I was trying to do.
Slide 30
Slide 30 text
e way in which CSS media queries have been
promoted for mobile hides tough problems and
gives developers a false promise of a simple
solution for designing for multiple screens.
Slide 31
Slide 31 text
e way in which CSS media queries have been
promoted for mobile hides tough problems and
gives developers a false promise of a simple
solution for designing for multiple screens.
What I meant to say:
Slide 32
Slide 32 text
e resounding answer from the community:
Mobile First Responsive Web Design
Slide 33
Slide 33 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
Slide 34
Slide 34 text
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Slide 35
Slide 35 text
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
9%
4%
21%
38%
4%
25%
Mobile is Larger Same Size
Less than 10% Savings 11 to 50% Savings
51% to 100% Savings Greater than 100% Savings
Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
Slide 38
Slide 38 text
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
3%
11%
86%
Same size A bit smaller Much smaller
Guy Podjarny repeated the experiment a year later.
347 sites from mediaqueri.es tested
A bit smaller = 50%-90% the size
Much smaller = <50% the size
Slide 39
Slide 39 text
ankfully Guy took the tests further…
Slide 40
Slide 40 text
1600x1200
Big site, big waterfall
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
Slide 41
Slide 41 text
320x480
Small site, big waterfall
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
Slide 42
Slide 42 text
320x480
1600x1200
Simplicity
not re ected
in DOM
1402 elements
3485 nodes
1398 elements
3491 nodes
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
Slide 43
Slide 43 text
320x480
1600x1200
Simplicity
not re ected
in DOM
1402 elements
3485 nodes
1398 elements
3491 nodes
http://www.slideshare.net/guypod/performance-implications-of-mobile-design
ank you to Guy for letting me use his slides and data!
Slide 44
Slide 44 text
Time to pen another fool’s gold post?
http://www.flickr.com/photos/myklroventine/3400040943/
Slide 45
Slide 45 text
No
http://www.flickr.com/photos/myklroventine/3400040943/
Slide 46
Slide 46 text
Five things web designers need to do to improve
responsive web design performance.
Slide 47
Slide 47 text
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First
Responsive Designs
#1
Slide 48
Slide 48 text
/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here]
}
/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) {
[Mobile layout rules here]
}
Move the mobile media query block
above the desktop media query.
By doing this, we’re making sure
the cascading effect of CSS is
consistent with our mobile first
progressive enhancement approach.
Reorder media queries so cascade goes
from small to large screens
Keep basic styles outside of media queries.
Slide 49
Slide 49 text
e absence of support for media
queries is in fact the rst media query.
—Bryan Rieger, Yiibu
Slide 50
Slide 50 text
Oh come on IE. No love?
Because IE 8 and below don’t support
media queries, IE isn’t getting the
CSS rules that create columns.
Slide 51
Slide 51 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
IE conditional comments
Slide 52
Slide 52 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
IE conditional comments
or use Respond.js
(a media query poly ll for IE)
Slide 53
Slide 53 text
http://www.flickr.com/photos/lintmachine/2306383943/
Keep CSS images
in their place
#2
Slide 54
Slide 54 text
Put CSS images inside media queries to
prevent extra downloads
@media screen and (min-width:481px){
.header {
background:URL('images/taps.jpg') repeat-x;
height: 300px;
}
}
Slide 55
Slide 55 text
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Slide 56
Slide 56 text
Conditionally load JS based
on screen size and capabilities
#3
http://www.flickr.com/photos/lyza/7382255242/
Slide 57
Slide 57 text
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
Look inside ontap.html to
find this code.
Hiding content with display:none does
not prevent it from downloading.
Slide 58
Slide 58 text
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
Look inside ontap.html to
find this code.
@media screen and (max-width:480px) {
.
.
.
#map {display:none;}
}
taps.css
There are many more rules
in the css file.
The iframe has an id of map. This rule hides
the Google Maps iframe by setting the
display to none.
Hiding content with display:none does
not prevent it from downloading.
Slide 59
Slide 59 text
https://github.com/paulirish/matchMedia.js
Slide 60
Slide 60 text
http://adactio.com/journal/5429/
Slide 61
Slide 61 text
http://www.flickr.com/photos/kk/230544325/
Deliver different size ![]()
s
at different screen sizes
#4
Slide 62
Slide 62 text
One SRC to rule all images
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on the
screen size, HTML only allows one value for the src.
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
ings are still moving forward on a standards-
based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
Slide 66
Slide 66 text
ankfully Scott
went on a trip
around the world.
http://www.flickr.com/photos/lyza/7382244260
Slide 67
Slide 67 text
Picture ll JavaScript Library
https://github.com/scottjehl/picturefill
Slide 68
Slide 68 text
Slide 69
Slide 69 text
Alternative: Use Sencha.io SRC or
similar solution to resize images
Set the first part of the src to
http://src.sencha.io/
After the slash add the full URL of
the image you want to have resized.
Sencha.io SRC will resize the image to fit the size
of the device screen. For example, if an iPhone
visits the site, the image will be constrained to its
screen size of 320 by 480 pixels.
Replace with your domain and
path to the images.
Replace with your domain and
path to the images.
Slide 70
Slide 70 text
Regardless of the img technique you choose:
Plan to deprecate it when standards
catch up with responsive images.
Slide 71
Slide 71 text
Handle high-density
images carefully
#5
Slide 72
Slide 72 text
Apple.com as an anti-pattern
Downloads both standard and retina images
e total size of the page
goes from 502.90K to
2.13MB when the retina
versions of images are
downloaded.
http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
Slide 73
Slide 73 text
If possible, use CSS for now
Slide 74
Slide 74 text
#main {
background-size: 400px 250px;
}
@media screen and (-webkit-device-pixel-ratio: 1) {
/* Image for normal displays. */
#main {
background-image: url(dog.jpg);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
/* Image for high resolution displays. */
#main {
background-image: (dog-hi-res.jpg);
}
}
If possible, use CSS for now
Slide 75
Slide 75 text
CSS image-set new proposed spec
Slide 76
Slide 76 text
div.dog {
background-image: -webkit-image-set(url(dog.jpg) 1x,
url(dog-hi-res.jpg) 2x);
}
CSS image-set new proposed spec
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Picture ll User Preference Branch
https://github.com/scottjehl/picturefill/tree/user-prefs
Slide 79
Slide 79 text
SOUTH
STREET
ECSSENTIAL
AJAXINCLUDE
Slide 80
Slide 80 text
PICTUREFILL
Slide 81
Slide 81 text
Enhance: a tiny JavaScript framework designed to help developers
determine if a browser is capable of handling additional JavaScript and
CSS enhancements, and load specific enhancements for that browser as
fast and simply as possible.
eCSSential: an experimental utility for making browsers load responsive
CSS in a more responsible way.
QuickConcat: a simple dynamic concatenator for html, css, and js files,
written in PHP
Wrap: a simple JavaScript utility for DOM manipulation and Ajax wrapped
in a familiar API. (*not yet released)
AjaxInclude: a plugin that is designed for modular content construction,
that runs on Wrap (or jQuery)
AppendAround: A JavaScript pattern for responsive, roving markup.
Picturefill: a simple pattern for overhead-free responsive images today.
Filament Group Southstreet
https://github.com/filamentgroup/Southstreet
Slide 82
Slide 82 text
We should start a collection to send
Scott on another world tour.
Slide 83
Slide 83 text
We should start a collection to send
Scott on another world tour.
Slide 84
Slide 84 text
Let’s revisit our original question.
Slide 85
Slide 85 text
Can a one size ts all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438
Slide 86
Slide 86 text
compete with
a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
Slide 87
Slide 87 text
Or will we always
end up with
something that is
too big?
http://www.flickr.com/photos/haddadi/5971508861
Slide 88
Slide 88 text
Unlikely responsive
design will ever be as fast
as something crafted
speci cally for a device.
http://www.flickr.com/photos/quarenta/3256329577
Slide 89
Slide 89 text
But web design is a
balancing act.
http://www.flickr.com/photos/kalexanderson/6266452817
Slide 90
Slide 90 text
And performance
is just one factor.
Slide 91
Slide 91 text
Flickr: Uploaded February 11, 2007 by hawridger
For most projects,
responsive design can be fast
enough to make sense…
Slide 92
Slide 92 text
if we do the extra work
to make responsive
sites faster.
Slide 93
Slide 93 text
Jason Grigsby
@grigs • cloudfour.com
Slides: bit.ly/rwd-performance
ank You!
Special thanks to Scott Jehl, Guy
Podjarny, and all of the Flickr users
sharing under creative commons.
http://www.flickr.com/photos/sualk61/4083223760/