Slide 1
Slide 1 text
RWD
BLOAT
Dave Rupert @davatron5000
Slide 2
Slide 2 text
ATTACK
OF THE
EBSITE
Slide 3
Slide 3 text
paravelinc.com
Slide 4
Slide 4 text
retailmenot.com
Slide 5
Slide 5 text
shoptalkshow.com
Slide 6
Slide 6 text
“RWD IS BAD FOR
PERFORMANCE.”
Slide 7
Slide 7 text
I’M KINDA
POST-RWD
Slide 8
Slide 8 text
POST EXPLAINING WHY RWD IS A
PRETTY GREAT AND INEXPENSIVE
MULTI-DEVICE WEB STRATEGY
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
“RWD IS BAD FOR
PERFORMANCE.”
Slide 11
Slide 11 text
“Okay. What
problems are
you having?”
Slide 12
Slide 12 text
“Oh, you know…
Slide 13
Slide 13 text
“Oh, you know…
jQuery
Slide 14
Slide 14 text
“Oh, you know…
jQuery
…uhh…
Slide 15
Slide 15 text
“Oh, you know…
jQuery
…uhh…
web fonts…
Slide 16
Slide 16 text
“Oh, you know…
jQuery
…uhh…
images
web fonts…
Slide 17
Slide 17 text
“Oh, you know…
jQuery
…uhh…
images
web fonts…
…uhh…
Slide 18
Slide 18 text
“Oh, you know…
jQuery
…uhh…
images
web fonts…
…uhh…
web apps?
Slide 19
Slide 19 text
NOT REALLY
RWD SPECIFIC
Slide 20
Slide 20 text
WEBSITES 2014
1000
1333
1667
2000
12/2014 1/2015 2/2015 3/2015 4/2015 5/2015 6/2015 7/2015 8/2015 9/2015 10/2015 11/2015
Transfer KB
Image KB
Slide 21
Slide 21 text
“RWD IS BAD FOR
PERFORMANCE.”
Slide 22
Slide 22 text
“RWD IS BAD FOR
PERFORMANCE.”
A WEBSITE IN 2014
Slide 23
Slide 23 text
“BLAME THE
IMPLEMENTATION,
NOT THE
TECHNIQUE.”
– Tim Kadlec
Slide 24
Slide 24 text
FORDS AREN’T MADE
WELL, SO CARS AREN’T
A VIABLE MODE OF
TRANSPORTATION
Slide 25
Slide 25 text
“…but surely
there’s
footprint…”
Slide 26
Slide 26 text
So I examined the
best website ever
made…
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
FACTS
I’m p experienced with RWD
I care about performance
I have third-party ads
I have third-party comments
I have multiple web fonts
Including an icon font!
I use jQuery GASP! OH THE HORROR! THE SHAME!!!!!!!1
Slide 30
Slide 30 text
16%
24%
18%
24%
14%
3%
HTML
CSS
JS
Images
Fonts
Analytics & Ads
TOTAL: 174kb
Slide 31
Slide 31 text
CSS: 24kb
Media Queries 2.4kb 10%
Vendor Prefixes 1.4kb 6%
Slide 32
Slide 32 text
JS: 41.2kb
jQuery 33.1kb 78%
Prism.js, Lettering,
etc
7kb 17.3%
FitVids, FitText 2kb 4.7%
Slide 33
Slide 33 text
Images: 31.92kb
Slide 34
Slide 34 text
Images: 31.92kb
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Fonts: 42.6kb
Open Sans 31.7kb 54.1%
Symbolset 26.8kb 45.8%
Slide 37
Slide 37 text
TOTAL COST OF
RESPONSIVE
WEB DESIGN…
Slide 38
Slide 38 text
4.4KB
Slide 39
Slide 39 text
SO, NOT RWD.
Slide 40
Slide 40 text
LET’S TAKE A
DEEPER LOOK
Slide 41
Slide 41 text
Home Article
PageSpeed (Mobile) 79 78
PageSpeed (Desktop) 93 91
Start Render (3G) 1.3s 1.5s
DOMContentLoaded 1.77s 1.83s
Speed Index (3G) 1446 1749
Slide 42
Slide 42 text
Speed Index (n) Some hippie math that tells
you how fast it “feels” to load
your website.
Slide 43
Slide 43 text
HOW FAST IS FAST
ENOUGH?
Slide 44
Slide 44 text
http://timkadlec.com/2014/01/fast-enough/
Slide 45
Slide 45 text
http://timkadlec.com/2014/01/fast-enough/
Slide 46
Slide 46 text
#PROTIP
IF PAUL IRISH FROM GOOGLE SAYS YOUR
WEBSITE SHOULD LOAD WITH A SPEED
INDEX UNDER 1000, YOUR WEBSITE
SHOULD LOAD WITH A SPEED INDEX
UNDER 1000.
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
PROBLEMS
No text until ~2.5 seconds
Webfonts blocking type rendering?
Sub-optimal image spriting (172 icon font)?
Time to first-byte is ~500ms, has no CSS in it
Slide 49
Slide 49 text
BASELINE
Home Article
PageSpeed (Mobile) 79 78
PageSpeed (Desktop) 93 91
Speed Index (3G) 1446 1749
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
0. Normalize
CSS Reset Normalize
CSS Selectors 679 578
Home Speed Index 1446 1376
Article Speed Index 1749 1412
Slide 52
Slide 52 text
1. Unblock fonts
Fonts in
Fonts with
loadCSS()
Home Speed Index 1376 1327
Article Speed Index 1412 1284
Slide 53
Slide 53 text
function loadCSS( href, before, media ){
"use strict";
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var sheets = window.document.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
function toggleMedia(){
var defined;
for( var i = 0; i < sheets.length; i++ ){
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
defined = true;
}
}
if( defined ){
ss.media = media || "all";
}
else {
setTimeout( toggleMedia );
}
}
toggleMedia();
return ss;
}
Slide 54
Slide 54 text
2. No jQuery
Slide 55
Slide 55 text
2. No jQuery
Slide 56
Slide 56 text
3. SVG Sprites
http://css-tricks.com/svg-sprites-use-better-icon-fonts/
Slide 57
Slide 57 text
3. SVG Sprites
Icon Font SVG Sprite
Home Speed Index 1327 1264
Article Speed Index 1284 1222
Slide 58
Slide 58 text
4. CSS Cleanup
Icon Font SVG Sprite
Home Speed Index 1264 938
Article Speed Index 1222 1126
300pts just for cleaning house!
Slide 59
Slide 59 text
MAKE YOUR
WEBSITE FASTER
WITH THIS ONE
WEIRD TRICK.
Slide 60
Slide 60 text
THE NEED FOR
PERCEIVED
SPEED
Slide 61
Slide 61 text
THE NEED FOR
PERCEIVED
SPEED
Slide 62
Slide 62 text
5. CRITICAL CSS
Calculate style rules that appear “above the fold”
Print them in an inline block in the <head>
Lazyload your stylesheet at the bottom of the page
Slide 63
Slide 63 text
.blue{color:blue;}
Hello, world!
function loadCSS( file ) {
// stuff
}
loadCSS('css/stylesheet.css');
Slide 64
Slide 64 text
PAINT WITH THE
FIRST PACKET
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
5. CRITICAL CSS
Normal Critical CSS
Home Speed Index 938 728
Article Speed Index 1126 1065
Slide 68
Slide 68 text
FINAL RESULTS
Home Article
PageSpeed (Mobile) 79 → 98 78 → 96
PageSpeed (Desktop) 93 → 98 91 → 97
Speed Index (3G) 1446 → 728 1749 → 1065
Slide 69
Slide 69 text
“Yeah, sure.
Maybe on a tiny
blog. What about
a real website?”
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
47 HTTP Requests
3.6MB
Speed Index 1307
Slide 72
Slide 72 text
DESIGN
DIRECTION
Slide 73
Slide 73 text
3 Webfonts
38 images
1.456MB in animated GIFs
Chart.js
Scroll-triggered animations
and a Quiz with audio
Slide 74
Slide 74 text
Two-color PNGs
Slide 75
Slide 75 text
PERFORMANCE
ANXIETY
Slide 76
Slide 76 text
Enable GZIP
Optimize images
Minify and compress JS
Lazyload images
Setup Critical CSS
Async/Defer Scripts
More image optimization
Slide 77
Slide 77 text
50 HTTP Requests
2.4MB
Speed Index 651
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
HAS 5K RETINA MAC AND
A 3MB CONNECTION
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
TOOLS
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
LESSON:
THROTTLING IS SUPER IMPORTANT
SINCE MOST OF THE WORLD WON’T
HAVE GOOGLE FIBER FOR A FEW MORE
YEARS. FUCK YEAH, AUSTIN TX.
Slide 85
Slide 85 text
PNGQuant
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
LESSON:
DESIGNERS, YOUR JOB IS NOT DONE
UNTIL THE SITE SHIPS.
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
LESSON:
PERFORMANCE IS EVERYONE’S JOB.
NOT JUST DEVELOPERS.
Slide 90
Slide 90 text
THANKS
Dave Rupert @davatron5000
Slide 91
Slide 91 text
ONE MORE
THING…
Slide 92
Slide 92 text
OVERUNDER
Simple trivia for social people.
Follow @overunderapp
Slide 93
Slide 93 text
THANKS
Dave Rupert @davatron5000