What is a barcamp - BarCamp in Saint-Petersburg Russia 2009 (en)
Front-end optimization on BarCamp Riga 2009
-
Upload
denissokolov -
Category
Technology
-
view
695 -
download
1
description
Transcript of Front-end optimization on BarCamp Riga 2009
Front-end optimization
Minification
<ul id="content"><li id="developerBlock">
<h1><a name="developer">
A web developer</a><?php echo $up ?>
</h1><p>
I make web applications.Be it websites or some tools or
widgets.And I do it right.For I care about my honour first and
money second.Thus, I prefer to spend more time,
but make the final result better.</p>
<ul id="content"><li id="developerBlock"><h1><a name="developer">A web developer</a> <a href="#contents" class="up ir in" title="Return to the contents">Up <span></span></a></h1><p>I make web applications. Be it websites or some tools or widgets. And I do it right. For I care about my honour first and money second. Thus, I prefer to spend more time, but make the final result better.</p>
@media screen {html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, /* Bad tags ^_~ */dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { padding: 0;
margin: 0 }h1,h2,h3,h4,h5,h6 { font-weight: normal }a img { border: 0 }ul { list-style-type: none }
}
@media screen{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-weight:normal}a img{border:0}ul{list-style-type:none}}
smushit.com
Gluing(sticking together)
reset.cssfonts.csscolors.css
positioning.cssprint.css
sprites.cssthickbox.css
all.css
HTTP requests are expensive
4 (6) simultaneous requests
Sprites
Encoding
gzip, deflate
all.css.gzall.js.gz
Do all browsers support encoding?
HTTP
HTTP headers
Accept-Encoding: gzip, deflate
Content-Encoding: gzip, defla e
Caching
HTTP headers
Last modified: 1234567890Expires: 1234567890
sokolov.cc/css/main/1234567890
sokolov.cc/css/main/
302 – Found
sokolov.cc/css/main/100
301 – Permanent redirect
sokolov.cc/css/main/9876543210
307 – Temporary redirect
sokolov.cc/css/main/1234567890
200 – OK
@media screen{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-weight:normal}a img{border:0}ul{list-style-type:none}}#header .coverImage{text-align:center;margin:0;padding:0}#header .coverImage p.photo{width:312px;margin:0 auto}#middle,#webDeveloper{clear:both}#noscriptMessage{width:100%;margin:0 auto}#noscriptMessage p{max-width:30em;margin:0 auto}#content{margin-left:auto;margin-right:auto} #content>li{float:left;width:30em;padding:0 1em;margin-top:2em}#content>li p{margin:0 auto}.smallWidth #content>li{width:auto} #footer,#signature{clear:both;margin-top:3em;padding-top:3em;margin-bottom:5e...
MinificationGluing
EncodingCaching