Front-end optimization

Minification

<ul id=&quot;content&quot;> <li id=&quot;developerBlock&quot;> <h1> <a name=&quot;developer&quot;> 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=&quot;content&quot;><li id=&quot;developerBlock&quot;><h1><a name=&quot;developer&quot;>A web developer</a> <a href=&quot;#contents&quot; class=&quot;up ir in&quot; title=&quot;Return to the contents&quot;>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.css fonts.css colors.css positioning.css print.css sprites.css thickbox.css

all.css

HTTP requests are expensive

4 (6) simultaneous requests

Sprites

Encoding

gzip, deflate

all.css.gz all.js.gz

Do all browsers support encoding?

HTTP

HTTP headers Accept-Encoding: gzip, deflate Content-Encoding: gzip , defla e

Caching

HTTP headers Last modified: 1234567890 Expires: 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...

Minification Gluing Encoding Caching