CSS Performance Tuning

CSS is often overlooked when it comes to performance optimizations, however when your site starts receiving a high amount of traffic, or you build a web application to handle high load scenarios, it may be useful to dig deeper and get the most out of every piece of your setup.

Transcript

1. ! CSS!Performance!Tuning!!! @JakubPawlowicz London%Web%Performance%meetup May$5th$2015 !!!!h#p:/ /www.brookings.edu/~/media/Research/Files/essays/backtothefuture/images/apRetro.jpg
2. Web$Developer$since$2003 work%@%Altmetric Open%Source%contributor author'of'clean-css
3. Does%the%CSS%performance% op1miza1ons%ma4er?
4. Do#they#ma*er#more#than#media,# JavaScript,#or#server#side# op6miza6ons?
5. Not$really$*$you$are$probably$right!
6. But$it$should$s+ll$be$a$quite$ interes+ng$ride,$so$bear$with$me
7. 1. State'of'the'union 2. CSS'op1mizers 3. CSS'tuning 4. Case'study 5. What's'coming'next?
8. State%of%the%union%%% !!!!h#p:/ /michaelbrant.com/wp4content/uploads/2012/06/photodune49072214css34code4m.jpg
9. We#need#CSS#to#deliver# be#er%experience
12. !!! !!!!h#p:/ /www.html5rocks.com/en/tutorials/internals/howbrowserswork/
13. !!! !!!!h#p:/ /orm*chimera*prod.s3.amazonaws.com/1230000000545/images/hpbn_1001.png
14. Both%CSS%and%JavaScript%block%the% render%flow
15. !!! !!!!h#ps:/ /developers.google.com/web/fundamentals/performance/cri:cal;rendering;path/render;blocking;css
17. !!! !!!!h#p:/ /www.html5rocks.com/es/tutorials/developertools/novdigest/flame;chart;high.png
18. Chrome'anima+ons'panel'video'1' youtu.be/U9xfYbKxosI
19. With%new,%built-in%tools%ge1ng% things%right%is%much%easier%than%ever% before
20. CSS#op&mizers !!! !!!!h#ps:/ /www.flickr.com/photos/8050972@N05/1858426882/
21. The$idea$of$content$op.mizers$is$ based$on$ge5ng$rid$of$whatever$is$ irrelevant
22. lossy%/%lossless% compression,% progressive% downloads,%vector% graphics
23. content& obfusca,on,& whitespace& removal,&structural& op,miza,ons,&and& inlining
24. whitespace* removal,*unit* op3miza3ons,* structural* op3miza3ons,*and* inlining
25. We#can#divide#CSS#op.mizers#into# two#types 1)#based#on#regular#expressions 2)#based#on#content#tokeniza0on
26. YUI$compressor$was$the$first$widely$ popular$regular7expression$based$ CSS$minifier,$however$...
27. Some%people,%when% confronted%with%a%problem,% think,%"I%know%I'll%use%regular% expressions" Now%they%have%two% problems. —"Old"Japanese"proverb
28. In#a#long#run#it's#both#unreliable#and# pre3y#limi6ng
29. 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
30. clean&css(is(one(of(them,(however...
31. used%to%be%the%former in%version%<%2.x pre$y&stupid,&I&know
32. then%a%mix%in%2.x be#er,&but&s*ll&pre#y&stupid
33. it#became#the#la+er#in#3.x yay!$and$it$will$stay$that$way
34. 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
35. CSS#tuning:#Content### !!!!h#ps:/ /www.flickr.com/photos/wjlonien/8603110335
36. what's'its'purpose?'''' !!!!!h#ps:/ /www.flickr.com/photos/karen5t/4417531925
37. I"mean"the"original"one!"""" !!!!!h#p:/ /media.boingboing.net/wp3content/uploads/2012/02/breadingcats.jpg
38. obviously,*to*catch*mice**** !!!!!h#ps:/ /www.flickr.com/photos/tambako/8427643444
39. which%one%would%to%the%job%be/er?%%%% !!!!!h#ps:/ /www.flickr.com/photos/tashiki/8672109973
40. browsers'don't'care'how'nice'is'your' cat'CSS
41. that$should$give$you$some$hints$how$ CSS$is$op5mized
42. whitespace*removal a:before { display: none } div { margin: 0 } => a:before{display:none}div{margin:0}
43. unit%op(miza(ons a { color: #ff0000 } div { margin: 1px 2px 0px 1px } => a{color:red}div{margin:1px 2px 0 1px}
44. structural(op+miza+ons div { color: red; } a { color: red } => div,a{color:red}
45. content&inlining @import "base.css"; @import "layout.css"; => ... base.css styles... ... layout.css styles...
46. clean&css(supports(all(those(types(of( op1miza1ons
47. 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)
48. typical(savings((bootstrap.css) • ~#18%#with#whitespace#&#unit#op4miza4ons • ~#21%#with#all#op4miza4ons
49. typical(savings((founda2on.css) • ~#22%#with#whitespace#&#unit#op3miza3ons • ~#29%#with#all#op3miza3ons
50. (live)'demo'with'some'advanced' examples
51. .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
52. .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
53. .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
54. .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
55. .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
56. 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/
57. but$some)mes$even$more$can$be$ done
58. UnCSS
59. why$to$op(mize$content$which$is$not$ used$at$all?
60. UnCSS%uses%PhantomJS%to%walk% through%a%site%and%collect% informa9on%about%used%selectors then%it%provides%a%list%of%unused%ones
61. 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
62. BEM:%Block,%element,%modifier
63. 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 */ }
64. reduces'coupling'thus'improves'code' maintainability
65. makes&removing&dead&CSS&code&a& reality
66. CSS#tuning:#Delivery##### !!!!!h#ps:/ /www.flickr.com/photos/tsushima2011/9630698380
67. Concatena(on)/)inlining
69. @import "base.css"; @import "layout.css"; => ... base.css styles... ... layout.css styles...
70. less$of$a$concern$in$HTTP2$world$ where$concatena4on$becomes$an$ an47pa9ern
71. use$<link>$instead$of$@import$as$ the$la.er$can't$be$effec4vely$ op4mised$by$browsers
72. Proper&caching
73. serve%your%produc,on%code%with%hard%cache% URLs%... <link rel="stylesheet" href="merged-e8d39f32d47e004e.css"/>
74. ..."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
75. challenging)when)your)CSS)changes) a)lot changing'1'byte'will'invalidate'the' browser'cache
76. consider)spli,ng)up)code)that) changes)frequently)from)one)that) does)not
77. in#mobile#browsers,#par/cularly#on# Android,#cache#is#quite#small#so#apps# (web#views#too)#fight#for#it
78. Compression
79. Use$best$gzip$compression,$the$ default$one$for$gzip$is$6$out$of$9
80. Serve%pre'compressed%files%for%the% best%effect
81. Use$Zopfli$gzip,$&$deflate,compa3ble$ algorithm delivers(files(up(to(10%(smaller compression*takes*up*to*80x*longer github.com/google/zopfli
82. SSL
83. 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/
84. Content&Delivery&Networks
85. Latency,)not)bandwidth,)is)o1en)the) limi4ng)factor
86. 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
87. Use$CDNs$to$bring$content$closer$to$ your$clients
88. A"must'have"for"global"sites
89. May$be$too$much$for$small,$local$ sites,$adds$extra$DNS$resolving,$ HTTPS$session$nego>a>on
90. Mostly'solved'in'modern'browsers' with'HTTPS'session'resuming,'DNS' prefetching,'but'it'll'be'more'tricky' for'older'clients
91. Super&handy&for&content&op0miza0on& and&nego0a0on&at&a&browser&level
92. Mobile'networks
93. On#3G#networks#mobile#radio#moves# to#IDLE#state#a8er#10#sec#of# inac=vity
94. Burst&your&data&and&return&to& idle —"Ilya"Grigorik,"High"Performance"Browser"Networking
95. Lazy%fetching%can%be%costly%in%terms% of%ba4ery%usage
96. It's%best%to%keep%any%content%to% minimum%where%it%comes%to%mobile
97. Shoehorning)desktop)sites)"with) mobile)styling")is)a)terrible)idea
98. CSS#tuning:#Rendering#### !!!!!h#ps:/ /www.flickr.com/photos/toxi/8563058804
99. Time%to%First%Byte%vs%DOM%paint
100. Important)to)op*mize)for)DOM)paint) as)users)don't)care)about)Time)to) First)Byte
101. Breaking)news)at)1000ms)0)Patrick) Hamann speakerdeck.com/patrickhamann/ breaking3news3at31000ms3tech3dot3 insight32014
103. Priori%zing)visible)content
104. Inline&just&a&small&subset&of&CSS&to&display& above6the6fold&content,&lazy&load&the&rest • developers.google.com/speed/pagespeed/insights/
105. We#have#async#/#defer#a/ributes#for# lazy#loading#JavaScript S"ll$missing$for$link$elements,$but$ can$be$achieved$using$a$JavaScript$ polyfill
106. Using&op)mal&selectors
107. It#doesn't#ma,er#anymore#as#CSS# engines#are#super#fast#these#days
108. 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)) { }
109. Case%study
110. You$can$pick$one$site$we'll$take$a$ closer$look$at...
111. ! ! ...!as!long!as!it's!the!Financial!Times!!!! !!!!!h#p:/ /www.chelsey.co.nz/uploads/famous_quotes/famous42.jpg
112. Content • ✔"Op%mized"CSS"content • 1"~"5%"saved"with"clean1css"op%miza%ons
113. 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
114. 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
115. What's'coming'next?
116. 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!
117. 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
118. Wrap%up
119. Performance*tuning*is*a*complex*topic
120. We#can#tackle#it#from#many#angles
121. How$to$approach$it?
123. A:#Ask#yourself#who's#your#audience!
124. Who$are$they? Where%they%live? How$&$when$they$access$the$site? What%devices%&%networks%they%use?
125. Find%out%who's%your%audience%and% tune%your%setup%to%deliver%the%best% experience%for%them
126. Thank&you