Your SlideShare is downloading. ×
  • Like
Front-end optimization on BarCamp Riga 2009
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Front-end optimization on BarCamp Riga 2009

  • 700 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
700
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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}}
  • 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 , 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