Slide 1
Slide 1 text
!
CSS!Performance!Tuning!!!
@JakubPawlowicz
London%Web%Performance%meetup
May$5th$2015
!!!!h#p:/
/www.brookings.edu/~/media/Research/Files/essays/backtothefuture/images/apRetro.jpg
Slide 2
Slide 2 text
Web$Developer$since$2003
work%@%Altmetric
Open%Source%contributor
author'of'clean-css
Slide 3
Slide 3 text
Does%the%CSS%performance%
op1miza1ons%ma4er?
Slide 4
Slide 4 text
Do#they#ma*er#more#than#media,#
JavaScript,#or#server#side#
op6miza6ons?
Slide 5
Slide 5 text
Not$really$*$you$are$probably$right!
Slide 6
Slide 6 text
But$it$should$s+ll$be$a$quite$
interes+ng$ride,$so$bear$with$me
Slide 7
Slide 7 text
1. State'of'the'union
2. CSS'op1mizers
3. CSS'tuning
4. Case'study
5. What's'coming'next?
Slide 8
Slide 8 text
State%of%the%union%%%
!!!!h#p:/
/michaelbrant.com/wp4content/uploads/2012/06/photodune49072214css34code4m.jpg
Slide 9
Slide 9 text
We#need#CSS#to#deliver#
be#er%experience
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
!!!
!!!!h#p:/
/www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Slide 13
Slide 13 text
!!!
!!!!h#p:/
/orm*chimera*prod.s3.amazonaws.com/1230000000545/images/hpbn_1001.png
Slide 14
Slide 14 text
Both%CSS%and%JavaScript%block%the%
render%flow
Slide 15
Slide 15 text
!!!
!!!!h#ps:/
/developers.google.com/web/fundamentals/performance/cri:cal;rendering;path/render;blocking;css
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
!!!
!!!!h#p:/
/www.html5rocks.com/es/tutorials/developertools/novdigest/flame;chart;high.png
Slide 18
Slide 18 text
Chrome'anima+ons'panel'video'1'
youtu.be/U9xfYbKxosI
Slide 19
Slide 19 text
With%new,%built-in%tools%ge1ng%
things%right%is%much%easier%than%ever%
before
Slide 20
Slide 20 text
CSS#op&mizers
!!!
!!!!h#ps:/
/www.flickr.com/photos/8050972@N05/1858426882/
Slide 21
Slide 21 text
The$idea$of$content$op.mizers$is$
based$on$ge5ng$rid$of$whatever$is$
irrelevant
Slide 22
Slide 22 text
lossy%/%lossless%
compression,%
progressive%
downloads,%vector%
graphics
Slide 23
Slide 23 text
content&
obfusca,on,&
whitespace&
removal,&structural&
op,miza,ons,&and&
inlining
Slide 24
Slide 24 text
whitespace*
removal,*unit*
op3miza3ons,*
structural*
op3miza3ons,*and*
inlining
Slide 25
Slide 25 text
We#can#divide#CSS#op.mizers#into#
two#types
1)#based#on#regular#expressions
2)#based#on#content#tokeniza0on
Slide 26
Slide 26 text
YUI$compressor$was$the$first$widely$
popular$regular7expression$based$
CSS$minifier,$however$...
Slide 27
Slide 27 text
Some%people,%when%
confronted%with%a%problem,%
think,%"I%know%I'll%use%regular%
expressions"
Now%they%have%two%
problems.
—"Old"Japanese"proverb
Slide 28
Slide 28 text
In#a#long#run#it's#both#unreliable#and#
pre3y#limi6ng
Slide 29
Slide 29 text
Tokeniza)on*based.op)mizers
1. parse(content(into(an(Abstract(Syntax(Tree((AST)
2. apply(op8miza8ons
3. turn(AST(back(into(a(textual(representa8on
Slide 30
Slide 30 text
clean&css(is(one(of(them,(however...
Slide 31
Slide 31 text
used%to%be%the%former
in%version%<%2.x
pre$y&stupid,&I&know
Slide 32
Slide 32 text
then%a%mix%in%2.x
be#er,&but&s*ll&pre#y&stupid
Slide 33
Slide 33 text
it#became#the#la+er#in#3.x
yay!$and$it$will$stay$that$way
Slide 34
Slide 34 text
Some%facts%about%clean/css
• started(in(2011
• side(project(of(GoalSmashers.com
• wri:en(in(node.js
• version(3.2
• 1.3M+(downloads(from(npm(every(month
• code(contributed(by(20+(authors
Slide 35
Slide 35 text
CSS#tuning:#Content###
!!!!h#ps:/
/www.flickr.com/photos/wjlonien/8603110335
Slide 36
Slide 36 text
what's'its'purpose?''''
!!!!!h#ps:/
/www.flickr.com/photos/karen5t/4417531925
Slide 37
Slide 37 text
I"mean"the"original"one!""""
!!!!!h#p:/
/media.boingboing.net/wp3content/uploads/2012/02/breadingcats.jpg
Slide 38
Slide 38 text
obviously,*to*catch*mice****
!!!!!h#ps:/
/www.flickr.com/photos/tambako/8427643444
Slide 39
Slide 39 text
which%one%would%to%the%job%be/er?%%%%
!!!!!h#ps:/
/www.flickr.com/photos/tashiki/8672109973
Slide 40
Slide 40 text
browsers'don't'care'how'nice'is'your'
cat'CSS
Slide 41
Slide 41 text
that$should$give$you$some$hints$how$
CSS$is$op5mized
Slide 42
Slide 42 text
whitespace*removal
a:before { display: none }
div {
margin: 0
}
=>
a:before{display:none}div{margin:0}
Slide 43
Slide 43 text
unit%op(miza(ons
a { color: #ff0000 }
div { margin: 1px 2px 0px 1px }
=>
a{color:red}div{margin:1px 2px 0 1px}
Slide 44
Slide 44 text
structural(op+miza+ons
div { color: red; } a { color: red }
=>
div,a{color:red}
Slide 45
Slide 45 text
content&inlining
@import "base.css";
@import "layout.css";
=>
... base.css styles...
... layout.css styles...
Slide 46
Slide 46 text
clean&css(supports(all(those(types(of(
op1miza1ons
Slide 47
Slide 47 text
and$addi&onally$offers...
• content'restructuring'&'@media'merging
• URL'rebasing'&'rewri7ng
• local'&'remote'@import'inlining
• source'maps'(since'version'3.0)
• 2xB10x'speedup'over'comparable'op7mizers
• good'test'coverage'with'over'2.5k'tests
• compa7bility'modes'(IE7,'IE8,'granular'level)
Slide 48
Slide 48 text
typical(savings((bootstrap.css)
• ~#18%#with#whitespace#unit#op4miza4ons
• ~#21%#with#all#op4miza4ons
Slide 49
Slide 49 text
typical(savings((founda2on.css)
• ~#22%#with#whitespace#unit#op3miza3ons
• ~#29%#with#all#op3miza3ons
Slide 50
Slide 50 text
(live)'demo'with'some'advanced'
examples
Slide 51
Slide 51 text
.foo { margin: 20em; margin: 20vw; }
.bar { display: block }
.foo { padding: 10px; }
=>
.foo{margin:20vw;padding:10px}
.bar{display:block}
In#IE8#mode#the#unit#fallback#would#stay#as#it#is
Slide 52
Slide 52 text
.foo { background: url('data:image/jpeg;base64,...'); width: 100px; }
.bar { display: block; }
.baz { background: url('data:image/jpeg;base64,...'); width: 110px; }
=>
.baz,.foo{background:url('data:image/jpeg;base64,...')}
.foo{width:100px}
.bar{display:block}
.baz{width:110px}
Changing'last'line'to'baz:last-child'in'IE8'mode'
would'not'collapse'rules'as'IE8'doesn't'understand'
this'pseudo8selector
Slide 53
Slide 53 text
.foo { margin-top: 0; }
@media screen { .foo { margin-bottom: 0; } }
.bar { display: block; margin-top: 0; }
=>
.bar,.foo{margin-top:0}
@media screen{.foo{margin-bottom:0}}
.bar{display:block}
We#can#move#margin-top:0#over#a#@media#block#
since#it#does#not#redefine#margin-top#value
Slide 54
Slide 54 text
.foo {
background-color:red;
background-image:-moz-linear-gradient(...);
background-image:-ms-linear-gradient(...);
background-image:-webkit-gradient(...);
background-image:-webkit-linear-gradient(...);
background-image:-o-linear-gradient(...);
background-image:linear-gradient(...);
}
clean&css(is(smart(enough(to(figure(out(we(are(dealing(
with(fallbacks(here(so(rules(are(not(collapsed
Slide 55
Slide 55 text
.foo {
background: red;
background-image: url(image.png);
background-repeat: repeat;
background-position: top left;
margin: 20px;
margin-top: 1px;
}
=>
.foo{
background:url(image.png) top left red;
margin:1px 20px 20px
}
clean&css(also(knows(how(to(merge(shorthand(and(
longhand(proper3es(together,(and(when(not(to(do(it(&(
replace(url()(with(linear&gradient()(and(it(won't
Slide 56
Slide 56 text
clean&css(is(not(the(only(op/mizer,(
pick(one(that(works(best(for(you,(
speed&,(feature&,(and(efficiency&wise
goalsmashers.github.io/css1
minifica4on1benchmark/
Slide 57
Slide 57 text
but$some)mes$even$more$can$be$
done
Slide 58
Slide 58 text
UnCSS
Slide 59
Slide 59 text
why$to$op(mize$content$which$is$not$
used$at$all?
Slide 60
Slide 60 text
UnCSS%uses%PhantomJS%to%walk%
through%a%site%and%collect%
informa9on%about%used%selectors
then%it%provides%a%list%of%unused%ones
Slide 61
Slide 61 text
it's%tricky%when%it%comes%to%dynamic%
sites%as%CSS%may%be%dynamically%
changed%with%JavaScript
useful&when&it&comes&to&removing&
CSS&provided&by&libraries
Slide 62
Slide 62 text
BEM:%Block,%element,%modifier
Slide 63
Slide 63 text
based&on&idea&of&using&seman.c&class&rules&
for&styling
.block,
.block--element,
.block--element__modifier {
/* styling */
}
.list,
.list--item,
.list--item__last {
/* list styling */
}
Slide 64
Slide 64 text
reduces'coupling'thus'improves'code'
maintainability
Slide 65
Slide 65 text
makes&removing&dead&CSS&code&a&
reality
Slide 66
Slide 66 text
CSS#tuning:#Delivery#####
!!!!!h#ps:/
/www.flickr.com/photos/tsushima2011/9630698380
Slide 67
Slide 67 text
Concatena(on)/)inlining
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
@import "base.css";
@import "layout.css";
=>
... base.css styles...
... layout.css styles...
Slide 70
Slide 70 text
less$of$a$concern$in$HTTP2$world$
where$concatena4on$becomes$an$
an47pa9ern
Slide 71
Slide 71 text
use$$instead$of$@import$as$
the$la.er$can't$be$effec4vely$
op4mised$by$browsers
Slide 72
Slide 72 text
Proper&caching
Slide 73
Slide 73 text
serve%your%produc,on%code%with%hard%cache%
URLs%...
Slide 74
Slide 74 text
..."and"proper"headers
Cache-Control: max-age=31536000
Etag: 54fc9f03-15ab
Expires: Tue, 26 Apr 2041 20:45:19 GMT
Last-Modified: Sun, 08 Mar 2015 19:12:03 GMT
Slide 75
Slide 75 text
challenging)when)your)CSS)changes)
a)lot
changing'1'byte'will'invalidate'the'
browser'cache
Slide 76
Slide 76 text
consider)spli,ng)up)code)that)
changes)frequently)from)one)that)
does)not
Slide 77
Slide 77 text
in#mobile#browsers,#par/cularly#on#
Android,#cache#is#quite#small#so#apps#
(web#views#too)#fight#for#it
Slide 78
Slide 78 text
Compression
Slide 79
Slide 79 text
Use$best$gzip$compression,$the$
default$one$for$gzip$is$6$out$of$9
Slide 80
Slide 80 text
Serve%pre'compressed%files%for%the%
best%effect
Slide 81
Slide 81 text
Use$Zopfli$gzip,$&$deflate,compa3ble$
algorithm
delivers(files(up(to(10%(smaller
compression*takes*up*to*80x*longer
github.com/google/zopfli
Slide 82
Slide 82 text
SSL
Slide 83
Slide 83 text
Make%sure%you%use%HTTPS%session%
resuming,%OCSP%stapling,%TLS%and%
TCP%frame%size%of%same%size%to%avoid%
costly%retransmissions
www.igvita.com/2013/10/24/
op2mizing5tls5record5size5and5
buffering5latency/
Slide 84
Slide 84 text
Content&Delivery&Networks
Slide 85
Slide 85 text
Latency,)not)bandwidth,)is)o1en)the)
limi4ng)factor
Slide 86
Slide 86 text
The$speed$of$light$is$fast,$but$
it$nonetheless$takes$160$
milliseconds$to$make$the$
round:trip$(RTT)$from$New$
York$to$Sydney
—"Ilya"Grigorik,"High"Performance"Browser"Networking
Slide 87
Slide 87 text
Use$CDNs$to$bring$content$closer$to$
your$clients
Slide 88
Slide 88 text
A"must'have"for"global"sites
Slide 89
Slide 89 text
May$be$too$much$for$small,$local$
sites,$adds$extra$DNS$resolving,$
HTTPS$session$nego>a>on
Slide 90
Slide 90 text
Mostly'solved'in'modern'browsers'
with'HTTPS'session'resuming,'DNS'
prefetching,'but'it'll'be'more'tricky'
for'older'clients
Slide 91
Slide 91 text
Super&handy&for&content&op0miza0on&
and&nego0a0on&at&a&browser&level
Slide 92
Slide 92 text
Mobile'networks
Slide 93
Slide 93 text
On#3G#networks#mobile#radio#moves#
to#IDLE#state#a8er#10#sec#of#
inac=vity
Slide 94
Slide 94 text
Burst&your&data&and&return&to&
idle
—"Ilya"Grigorik,"High"Performance"Browser"Networking
Slide 95
Slide 95 text
Lazy%fetching%can%be%costly%in%terms%
of%ba4ery%usage
Slide 96
Slide 96 text
It's%best%to%keep%any%content%to%
minimum%where%it%comes%to%mobile
Slide 97
Slide 97 text
Shoehorning)desktop)sites)"with)
mobile)styling")is)a)terrible)idea
Slide 98
Slide 98 text
CSS#tuning:#Rendering####
!!!!!h#ps:/
/www.flickr.com/photos/toxi/8563058804
Slide 99
Slide 99 text
Time%to%First%Byte%vs%DOM%paint
Slide 100
Slide 100 text
Important)to)op*mize)for)DOM)paint)
as)users)don't)care)about)Time)to)
First)Byte
Slide 101
Slide 101 text
Breaking)news)at)1000ms)0)Patrick)
Hamann
speakerdeck.com/patrickhamann/
breaking3news3at31000ms3tech3dot3
insight32014
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Priori%zing)visible)content
Slide 104
Slide 104 text
Inline&just&a&small&subset&of&CSS&to&display&
above6the6fold&content,&lazy&load&the&rest
• developers.google.com/speed/pagespeed/insights/
Slide 105
Slide 105 text
We#have#async#/#defer#a/ributes#for#
lazy#loading#JavaScript
S"ll$missing$for$link$elements,$but$
can$be$achieved$using$a$JavaScript$
polyfill
Slide 106
Slide 106 text
Using&op)mal&selectors
Slide 107
Slide 107 text
It#doesn't#ma,er#anymore#as#CSS#
engines#are#super#fast#these#days
Slide 108
Slide 108 text
Unless&you&target&IE<8,&or&older&mobile&
phones,&or&use&funky&selectors&and&huge&
DOM
div:nth-child(2n+1)
p:last-child
a:not(:nth-child(2n+1)) { }
Slide 109
Slide 109 text
Case%study
Slide 110
Slide 110 text
You$can$pick$one$site$we'll$take$a$
closer$look$at...
Slide 111
Slide 111 text
!
!
...!as!long!as!it's!the!Financial!Times!!!!
!!!!!h#p:/
/www.chelsey.co.nz/uploads/famous_quotes/famous42.jpg
Slide 112
Slide 112 text
Content
• ✔"Op%mized"CSS"content
• 1"~"5%"saved"with"clean1css"op%miza%ons
Slide 113
Slide 113 text
Delivery
• ✔"CSS"split"into"mul.ple"files
• ✔"caching"headers
• ✔"compressed"assets
• ✔"dedicated"mobile"site,"no"deferred"content
• :"could"use"higher"gzip"compression"or"zopfli
• ✖"missing"caching"headers"for"desktop"site"content
Slide 114
Slide 114 text
Rendering
• ✔"0.2s"to"first"byte,"1.5s"to"first"render"with"empty"
cache"(desktop)
• ✔"0.2s"to"first"byte,"0.8s"to"first"render"with"empty"
cache"(mobile)
• ?"rendering"above"the"fold"content"first"may"deliver"
even"beCer"performance
Slide 115
Slide 115 text
What's'coming'next?
Slide 116
Slide 116 text
Op#miza#ons+angle+(clean1css)
• Seman'c)op'miza'ons,)offering)more)flexibility)in)
op'miza'ons)for)BEM(>like))CSS,)due)in)version)3.3
• all)structural)op'miza'ons)implemented,)which)are)
halfway)done)now,)due)in)version)~3.4
• vendor>specific)tuning,)with)autoprefixer>like)
seLngs)for)targeLng)specific)browser)versions
• it's)all)Open)Source)so)it'd)be)great)if)you)could)help)
out!
Slide 117
Slide 117 text
Delivery(angle
• HTTP2&means&a&big&shi0&in&delivering&assets,&
par8cularly&with&server&push,&and&lower&request&
overhead
• interes8ng&to&see&how&we&can&op8mize&for&HTTP&1&
&&HTTP&2&at&the&same&8me
• rise&of&WebRTC&and&its&influence&of&content&
delivery
• rise&of&offlineHfirst&applica8ons&using&Service&
Worker
Slide 118
Slide 118 text
Wrap%up
Slide 119
Slide 119 text
Performance*tuning*is*a*complex*topic
Slide 120
Slide 120 text
We#can#tackle#it#from#many#angles
Slide 121
Slide 121 text
How$to$approach$it?
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
A:#Ask#yourself#who's#your#audience!
Slide 124
Slide 124 text
Who$are$they?
Where%they%live?
How$&$when$they$access$the$site?
What%devices%&%networks%they%use?
Slide 125
Slide 125 text
Find%out%who's%your%audience%and%
tune%your%setup%to%deliver%the%best%
experience%for%them
Slide 126
Slide 126 text
Thank&you