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