The document discusses various techniques for front-end optimization including minification, gluing CSS and JavaScript files together, image encoding, and caching. Minification removes unnecessary characters to reduce file sizes. Gluing combines related files to reduce HTTP requests. Encoding uses gzip/deflate compression to make files smaller. Caching utilizes HTTP headers to leverage browser and proxy caching for optimized loading.

1. Front-end optimization

2. Minification

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. <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. @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}}

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 , defla e

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