Slide 1
Slide 1 text
Before the @mq
Erik Runyon
@erunyon
HEWeb MI
May 2014
Slide 2
Slide 2 text
/about/
Erik Runyon
Director of Web Communications
University of Notre Dame
!
@erunyon
weedygarden.net
Slide 3
Slide 3 text
What We’ll Cover
I. Why We Optimize
II. Images BBC News
III. Carousels WVU
IV. In Depth Notre Dame
Slide 4
Slide 4 text
I. Why We Optimize
Slide 5
Slide 5 text
blogs.nd.edu/nddotedu
Slide 6
Slide 6 text
Mobile Traffic
2010
2.6%
3.6%
7.2%
2011
4.4%
8.8%
26.1%
2012
13.3%
17.7%
44.9%
ND.edu
Admissions
Game Day
2013
15.5%
27.4%
50.9%
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
January 7, 2013
BCS Bowl Game
Slide 9
Slide 9 text
January 7, 2013
BCS Bowl Game
Usually around 5.5% each
Slide 10
Slide 10 text
commencement.ND.edu
mobile traffic
Average Month: 22-30%
Commencement Weekend: 58%
Slide 11
Slide 11 text
http://www.webperformancetoday.com/2013/11/26/web-page-growth-151-percent/
The average top 1,000 web page
is 1575 KB.
!
Last spring, the average page
was 1246 KB. This represents a
26% increase in total page size in
just six months, and a 151%
increase in three years.
Slide 12
Slide 12 text
http://www.flickr.com/photos/specialkrb/4045683750/
Dial-up
EDGE
3G
LTE
56 Kbps
384 Kbps
1.2 Mbps
16+ Mbps
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Erik’s personal
Bermuda Triangle
of AT&T suckage
Parents
In-Laws
Slide 15
Slide 15 text
weedygarden.net
Slide 16
Slide 16 text
Sites used to generate these stats: http://bit.ly/highered-rwd
averages for #highered RWD sites
128 sites sample
requests
size
61
1.7 MB
Slide 17
Slide 17 text
1-1.9 MB = 50
Sites used to generate these stats: http://bit.ly/highered-rwd
averages for #highered RWD sites
128 sites sample
2-2.9 MB = 15
3-3.9 MB = 11
> 4 MB = 6
Slide 18
Slide 18 text
Dedicated Mobile vs. RWD
48 schools
Dedicated mobile 180 KB
RWD 1.4 MB
Slide 19
Slide 19 text
js
css
images
Sites used to generate these stats: http://bit.ly/highered-rwd
averages for #highered RWD sites
128 sites sampled with iPhone UA and narrow screen (to simulate mobile)
12 files / 227 KB
7 files / 99 KB
32 files / 1 MB
73% of page size
Slide 20
Slide 20 text
II. Images - BBC News
Slide 21
Slide 21 text
m.bbc.co.uk/news
Slide 22
Slide 22 text
www.bbc.co.uk/news m.bbc.co.uk/news
Slide 23
Slide 23 text
…build a BBC News
website that fits the
needs of the maximum of
users 3 years in the
future. At the moment
we have a mobile only
responsive website. But
eventually it will take
over the desktop site.
@tmaslen
Slide 24
Slide 24 text
http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition
@brad_frost
Slide 25
Slide 25 text
http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition
@brad_frost
Slide 26
Slide 26 text
requests
size
css
js
images
www.bbc.co.uk/news
Launched 1997
m.bbc.co.uk/news
Launched 2012
196
1.4 MB
10 files / 64.4 KB
71 files / 419 KB
114 files / 823 KB
DESKTOP
requests
size
css
js
images
8
34 KB
3 files / 16.4 KB
—
4 files / 4.9 KB
BASIC only one content image
requests
size
css
js
images
59
224 KB
5 files / 37.6 KB
8 files / 70.2 KB
41 files / 84.1 KB
SMARTPHONE
Slide 27
Slide 27 text
HTML5 browsers
IE9+
Firefox 3.5+
Opera 9+ and probably further back
Safari 4+
Chrome 1+ (I think)
iPhone and iPad iOS1+
Android phone and tablets 2.1+
Blackberry OS6+
Windows 7.5+ new Mango version
Mobile Firefox all the versions we tested
Opera Mobile all the versions we tested
HTML4 browsers
IE8-
Blackberry OS5-
Nokia S60 v6-
Nokia S40 all versions
All other Symbian variants
Windows 7 phone pre-Mango
!
…and many more that are too
numerous to mention.
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Slide 28
Slide 28 text
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// bootstrap the application
}
“Cutting the Mustard”
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Slide 29
Slide 29 text
A large part of any JS library is its DOM
selector. If the browser has native CSS
selecting then it removes the need for a DOM
selector. QuerySelector has been available in
Firefox since 3.5 at least and has been working
in webkit for ages. It also works in IE9.
document.querySelector
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Slide 30
Slide 30 text
Although we are not using it yet, we are planning on
making considerable use of it. Imagine that if you first
came to the mobile site we downloaded all the stories
straight away and stored them in localStorage. They’d
then be available to use while you are going through
an areas of sketchy bandwidth.
window.localStorage
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Slide 31
Slide 31 text
Another large part of any JS library is event
support. Every browser made in the last 6
years (except IE8) supports DOM level 2
events. If the browser supports this then we
know it has better standards support than
IE8.
window.addEventListener
http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Slide 32
Slide 32 text
8 requests
34 KB
59 requests
224 KB
No Mustard Mustard
Slide 33
Slide 33 text
Germany-Turkey diplomatic row erupts
21 June 2013
Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.
Slide 34
Slide 34 text
Slide 35
Slide 35 text
widths = [96, 130, 165, 200, 235,
270, 304, 340, 375, 410, 445, 485,
520, 555, 590, 625, 660, 695, 736]
http://responsivenews.co.uk/post/50092458307/images
“We made an arbitary decision to add a breakpoint every
30px from 96px up to 736px… informed more by the
image sizes that fit into the old grid system available in
BBC’s GEL layout guide.”
Slide 36
Slide 36 text
96px
96px = 2 KB
200px = 5 KB
235px
200px = 3 KB
235px = 4 KB
590px = 29 KB
x27
Viewport ~ 240px wide
Slide 37
Slide 37 text
“At the moment making the choice based
on element size is the best fit for us, as
element widths do not correlate to
viewport widths. We use images in many
different contexts, stretched across
columns, left aligned, etc, so we have to
use element width.”
http://responsivenews.co.uk/post/50092458307/images
Slide 38
Slide 38 text
240px wide
670px wide
970px wide
86.7 KB
113.9 KB
134.6 KB
Slide 39
Slide 39 text
The site records around 40 million unique users a week
https://en.wikipedia.org/wiki/BBC_News_Online
http://www.digitalspy.com/media/news/a437075/us-election-brings-bbc-news-website-traffic-high.html
Coverage of the (2012 U.S.) election… brought 16.4
million unique browsers across the BBC website and
mobile services on November 7.
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
III. Carousels - WVU
Slide 42
Slide 42 text
www.WVU.edu
Slide 43
Slide 43 text
http://bradfrostweb.com/blog/post/carousels/
Slide 44
Slide 44 text
News/Sports
Slide 45
Slide 45 text
Entertainment
Slide 46
Slide 46 text
Technology
Slide 47
Slide 47 text
HigherEd
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
weedygarden.net/2013/07/carousel-interaction-stats
1.07% of visitors clicked on a feature
Slide 50
Slide 50 text
Typical click-through
rates of 1-3%
weedygarden.net/2013/07/carousel-interaction-stats
Slide 51
Slide 51 text
Notre Dame
Slide 52
Slide 52 text
http://www.flickr.com/photos/errolyucel/4966109357/
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
"…keeping the designer
focused on achievable
solutions at specific screen
sizes by not trying to
optimize one code base for
everything and leveraging
server-side solutions rather
than force templating logic
onto the front-end."
@dmolsen
Slide 55
Slide 55 text
RESS
(responsive design + server-side components)
www.lukew.com/ff/entry.asp?1392
Slide 56
Slide 56 text
Wait, isn’t browser detection evil?
Slide 57
Slide 57 text
GIF
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
wtfmobileweb.com
Slide 60
Slide 60 text
http://xkcd.com/1174/
“If I click 'no', I've probably
given up on everything, so
don't bother taking me to the
page I was trying to go to.
Just drop me on the
homepage. Thanks.”
Slide 61
Slide 61 text
http://www.flickr.com/photos/dipster1/1403240351/
WURFL: wurfl.sourceforge.net
51degrees: 51degrees.mobi
Device Atlas: deviceatlas.com
OpenDDR: openddr.org
Slide 62
Slide 62 text
github.com/dmolsen/Detector
Slide 63
Slide 63 text
"The basic premise being that
90% of the mark-up and styles
are the same on all browsers but
some get just a little tweak
here and there based on their
browser's UA and supported
properties. The primary images
that we tweak are the carousel
images. They're by far our
biggest resource hog. By looking
for mobile UAs we serve much
smaller width/height imagery."
@dmolsen
Slide 64
Slide 64 text
Completely different carousels
Mobile: Flexslider
www.woothemes.com/flexslider
!
Desktop: Supersized
buildinternet.com/project/supersized
Slide 65
Slide 65 text
Code Differences
Slide 66
Slide 66 text
CSS
Mobile
!
!
Desktop
!
Slide 67
Slide 67 text
CSS
Mobile
!
!
Desktop
!
Slide 68
Slide 68 text
JS
Mobile
!
!
Desktop
!
Slide 69
Slide 69 text
JS
Mobile
!
!
Desktop
!
Slide 70
Slide 70 text
Mobile
!
!
!
Desktop
!
HTML
!
!
Desktop
!
HTML
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
requests
transferred
css
js
images
25
400 KB
1 files / 21 KB
5 files / 63.4 KB
18 files / 309 KB
requests
transferred
css
js
images
37
994 KB
1 files / 14 KB
5 files / 68 KB
30 files / 903 KB
MOBILE DESKTOP
Slide 75
Slide 75 text
github.com/dmolsen/lazyBlock
Slide 76
Slide 76 text
gist.github.com/erunyon/5073909
Slide 77
Slide 77 text
Slide 78
Slide 78 text
One size does not fit all
widths = [400, 800, 1200, 1600]
Slide 79
Slide 79 text
http://www.flickr.com/photos/thomasstrosse/5803681875/
Slide 80
Slide 80 text
IV. In Depth - Notre Dame
Slide 81
Slide 81 text
www.ND.edu
Slide 82
Slide 82 text
Jan 2001 - Aug 2007
Slide 83
Slide 83 text
Jan 2001 - Aug 2007
Slide 84
Slide 84 text
August 2007 - July 2011
Slide 85
Slide 85 text
“I wanted to share my opinion of the new ND
web site with you - in a word, it's awful. Quite
frankly, I am unable to find anything about the
site that is positive. It is not clear why the
change was made but the individual that
came up with the idea should be fired along
with the individual(s) that approved the
change. Contrary to the old site - I make
every effort to avoid using the new site.”
Slide 86
Slide 86 text
36 KB
2.2 MB (1.7 MB Flash)
Slide 87
Slide 87 text
July 2011 - Feb 2012
Slide 88
Slide 88 text
Feb 2012 - March 2012
Slide 89
Slide 89 text
April 2012 - Present
Slide 90
Slide 90 text
Create an “in-depth”
experience that conveys the
feeling of visiting campus
Slide 91
Slide 91 text
Mobile
Tablet
Desktop
Phablet
Slide 92
Slide 92 text
UA-Parser
github.com/tobie/ua-parser
Slide 93
Slide 93 text
$ua->isMobile
$ua->isTablet
$ua->isDesktop
Slide 94
Slide 94 text
Mobile-Detect
github.com/serbanghita/Mobile-Detect
Slide 95
Slide 95 text
Long homepage
is long
x9
x11
Slide 96
Slide 96 text
Cached external feeds
35
https://github.com/erunyon/FeedCache
Slide 97
Slide 97 text
www.nd.edu/news-and-events/
www.nd.edu/about/
www.nd.edu/academics/
www.nd.edu/admissions/
www.nd.edu/faith-and-service/
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
2.something iPhone screens tall
and 12% of the size
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
context features can dictate content
Slide 103
Slide 103 text
260 KB
2.4 MB 405 KB
Slide 104
Slide 104 text
But what if we didn’t?
Slide 105
Slide 105 text
One small issue with RESS
Slide 106
Slide 106 text
User-Agent: Amazon CloudFront
Slide 107
Slide 107 text
Circling back to the desktop
Slide 108
Slide 108 text
25 requests
260 KB
Slide 109
Slide 109 text
132 requests
2.4 MB
117 images
Slide 110
Slide 110 text
The What
Slide 111
Slide 111 text
Reduce the initial download
for large screen visitors
Slide 112
Slide 112 text
The Why
Slide 113
Slide 113 text
132 requests
2.4 MB
117 images
Slide 114
Slide 114 text
News and Events
24 Images (646.5 KB)
Viewed by 21.4% of visitors
Slide 115
Slide 115 text
About
6 Images (208.3 KB)
Viewed by 8.9% of visitors
Slide 116
Slide 116 text
Academics
14 Images (406.9 KB)
Viewed by 6.5% of visitors
Slide 117
Slide 117 text
Admissions
4 Images (140 KB)
Viewed by 4.1% of visitors
Slide 118
Slide 118 text
Faith & Service
9 Images (328.1 KB)
Viewed by 3.5% of visitors
Slide 119
Slide 119 text
Tour Flyout
26 Images (169 KB)
Viewed by 0.25% of visitors
Slide 120
Slide 120 text
The How
Slide 121
Slide 121 text
Approach #1: 1x1 gif
Doesn’t scale proportionally without javascript
If width/height is set to “auto” in CSS, reverts to 1x1
http://codepen.io/erunyon/pen/uqypx
http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/
Slide 122
Slide 122 text
Approach #2:
Doesn’t scale proportionally without javascript
Slide 123
Slide 123 text
Our Solution
Replace as many images as
possible with solid PNG’s and
load actual image when
necessary.
Slide 124
Slide 124 text
Set Image Properties
!
fakeImage('/path/to/the/image.jpg',
array(
'alt'=>'Description',
'width'=>420,
'height'=>310,
'resize'=>true
)
);
Slide 125
Slide 125 text
ob_start();
imagepng(
imagecreatetruecolor($width, $height),
NULL, 9);
$imgdata = 'data:image/png;base64,'.
base64_encode(ob_get_clean())
;
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
Load Stuff
Load images as user scrolls
(or exposes the image in other ways)
Slide 128
Slide 128 text
What if javascript is off?
Slide 129
Slide 129 text
!
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
A Little Bit o’CSS
!
.no-js .img-replace {display:none;}
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
The Result
38 requests *
495-639 KB *
(down from 130 requests and 2.4 MB)
* Varies by day, browser and feature image
Slide 134
Slide 134 text
Load Time
Before: 4.9s
After: 2.6s
* Results from webpagetest.org
Slide 135
Slide 135 text
Initial Trade-Offs
5.1 KB Larger HTML
Slide 136
Slide 136 text
After
1.2s
www.webpagetest.org
0.4s
Before
0.3s
Slide 137
Slide 137 text
Load Time
Before: 4.9s
After: 2.6s 1.8s
* Results from webpagetest.org
Slide 138
Slide 138 text
…and that makes me happy
Slide 139
Slide 139 text
No optimization
334 GB
What was served
182 GB
Current setup
114 GB
Slide 140
Slide 140 text
F
There’s always room
for improvement
Slide 141
Slide 141 text
Keep experimenting
Slide 142
Slide 142 text
Strive for an outstanding
experience for all visitors,
regardless of device
Slide 143
Slide 143 text
erik runyon
@erunyon
weedygarden.net
thank you