Optimization

Embed Size (px)

Citation preview

  • 1. Front-end optimization

2. Minification 3.

  • A web developer

    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.

    4.
    • A web developerUp

      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.

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