Optimization

855 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
855
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Optimization

  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

×