Front-end optimization on BarCamp Riga 2009

844 views
770 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
844
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Front-end optimization on BarCamp Riga 2009

  1. 1. Front-end optimization
  2. 2. Minification
  3. 3. <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>
  4. 4. <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>
  5. 5. @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 } }
  6. 6. @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}}
  7. 10. smushit.com
  8. 11. Gluing (sticking together)‏
  9. 12. reset.css fonts.css colors.css positioning.css print.css sprites.css thickbox.css
  10. 13. all.css
  11. 14. HTTP requests are expensive
  12. 15. 4 (6) simultaneous requests
  13. 16. Sprites
  14. 17. Encoding
  15. 18. gzip, deflate
  16. 19. all.css.gz all.js.gz
  17. 20. Do all browsers support encoding?
  18. 21. HTTP
  19. 22. HTTP headers Accept-Encoding: gzip, deflate Content-Encoding: gzip , defla e
  20. 23. Caching
  21. 24. HTTP headers Last modified: 1234567890 Expires: 1234567890
  22. 25. sokolov.cc/css/main/1234567890
  23. 26. sokolov.cc/css/main/ 302 – Found
  24. 27. sokolov.cc/css/main/100 301 – Permanent redirect
  25. 28. sokolov.cc/css/main/9876543210 307 – Temporary redirect
  26. 29. sokolov.cc/css/main/1234567890 200 – OK
  27. 30. @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...
  28. 31. Minification Gluing Encoding Caching

×