Your SlideShare is downloading. ×
0
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
CSS and image optimization
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS and image optimization

8,883

Published on

Slides from Web Optimization Summit 2010

Slides from Web Optimization Summit 2010

Published in: Technology
2 Comments
22 Likes
Statistics
Notes
  • @Andreas - to avoid an extra DNS lookup and load CSS asap helping the progressive rendering of the page. Otherwise nothing gets rendered until all the CSS arrives
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Can you explain why css need to be on the same domain as html.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,883
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
355
Comments
2
Likes
22
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. CSS and Image Optimization Stoyan Stefanov, @stoyanstefanov May 12, 2010 Web Optimization Summit
  • 2. Agenda 1.  Reducing CSS file sizes 2.  Rendering 3.  Reducing HTTP requests 4.  Optimizing image file sizes
  • 3. Reducing CSS file sizes
  • 4. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; }
  • 5. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } Long selectors
  • 6. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } C-style indented declarations
  • 7. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } What? Not unique enough?
  • 8. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } One is probably enough
  • 9. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } Lame
  • 10. Crockford on CSS: “Long, fragile lists of self-contradictory rules”
  • 11. So? #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } Legend: • easy stuff • tough stuff
  • 12. So? Make the tough stuff easy
  • 13. Reusable CSS .linklist {color: green; ...} /* widgets */ .module {...} .gallery {...} /* utilities */ .clearfix {...}; .flip {...}
  • 14. Mixin pattern <ul class="module linklist"> …
  • 15. Reusable CSS 1.  Strong foundation: reset, grids 2.  Library styles: .class not #id
  • 16. Object-Oriented CSS •  Nicole Sullivan •  oocss.org
  • 17. Minifying CSS •  Strip white space, comments •  Some micro-optimizations •  ~30% savings •  can’t rename •  YUICompressor, CSSTidy •  Inline code too! http://tools.w3clubs.com/cssmin/
  • 18. Browser-specific CSS •  IE6,7 vs. others •  -webkit-, -moz-, -o- •  -ms-, _, *, zoom •  automated •  savings? 3-5%, mileage vary http://phpied.com/files/css-parse/css-strip.html
  • 19. CSS and rendering
  • 20. Filters •  AlphaImageLoader is bad •  Verdict is out on the others
  • 21. Expressions •  Executed too often •  Avoid •  JavaScript or self-rewrite
  • 22. Behaviors •  Be careful with the shims •  ie-css3.htc, pngfix.htc,…
  • 23. Scrollbars trick •  Prevent a reflow when you expect a long page body {overflow-y: scroll;}
  • 24. Reducing HTTP requests
  • 25. CSS blocks rendering •  The worst component type •  Place way at the top •  Inline all @media print, etc http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/
  • 26. Same domain •  If you split across domains, keep CSS on the same domain as HTML
  • 27. Inline CSS •  Google search •  Bing.com: inline + postload
  • 28. Inline + postload •  First visit: 1. Inline 2. Lazy-load the external file 3. Write a cookie
  • 29. Inline + postload •  Later visits: 1. Read cookie 2. Refer to the external file
  • 30. Web Fonts •  Don’t go overboard! •  Subset •  Gzip! http://snook.ca/archives/html_and_css/ screencast-converting-ttf2eot
  • 31. Fewer HTTP requests •  Inline images: in CSS sprites with data: URI scheme http://csssprites.com http://spriteme.org
  • 32. Fewer HTTP requests •  data: URI scheme $ php ‐r "echo base64_encode(file_get_contents('my.png'));”  iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P 4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
  • 33. Fewer HTTP requests •  data: URI scheme background‐image: url("data:image/ png;base64,iVBORw0KG..."); 
  • 34. Fewer HTTP requests •  data: URI scheme <img src="data:image/png;base64,iVBOR..." /> 
  • 35. Fewer HTTP requests •  data: URI scheme •  works in IE!...
  • 36. Fewer HTTP requests •  data: URI scheme •  works in IE8!
  • 37. Fewer HTTP requests •  data: URI scheme •  MHTML for IE < 8
  • 38. MHTML •  MIME HTML •  Works in IE 6,7 •  Indeed it actually absolutely does work in IE7/Vista too
  • 39. MHTML - one part Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSU....U5ErkJggg==
  • 40. MHTML - multi parts Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR [here comes part one] The double- --MYSEPARATOR dash of doom [here's part two] --MYSEPARATOR--
  • 41. MHTML – all together /* Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg== --MYSEPARATOR Content-Location: another Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg== --MYSEPARATOR-- */ .myclass { background-image:url(mhtml:http://example.org/styles.css!myimage); } .myotherclass { background-image:url(mhtml:http://example.org/styles.css!another); }
  • 42. MHTML + data URI •  drawback: repeats the same encoded image •  solution: browser-specific CSS •  or… an ingenious hack
  • 43. MHTML + data URI •  image header + css + data /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0 Reality: IE: Others: http://habrahabr.ru/blogs/webdev/90761/
  • 44. No-image UI •  a.k.a. CSS3
  • 45. Rounded corners .module { -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
  • 46. Rounded corners All
 vs. IE
  • 47. Gradients .hd { background-image: -moz-linear-gradient(top, #641d1c, #f00); background-image: -webkit-gradient(linear, left top, left bottom, from(#641d1c), to(#f00)); filter: [...].gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000); -ms-filter: "[...].gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000)"; }
  • 48. No-image UI •  rounded corners •  gradients •  glows, shadows •  rgba http://www.phpied.com/ css-performance-ui-with-fewer-images/ http://css3please.com
  • 49. Multi-purpose “mask” images •  one image on top of different solid colors •  for themes, social profiles…
  • 50. 1px wide “mask” •  Top: somewhat transparent •  Bottom: Fully transparent
  • 51. Multi-purpose mask
  • 52. Gradient mask •  the data URI smaller that all the CSS –moz, -webkit, filter...
  • 53. A glossy mask
  • 54. Optimizing image file sizes
  • 55. Rule #1: No GIFs $ optipng *.gif
  • 56. PNG-8 •  Palette image (like GIF) •  256 colors (like GIF) •  Smaller than GIF (GIF++) •  Alpha transparency (GIF++)
  • 57. Rarely PNG-24 •  Truecolor
  • 58. PNGSlim OptiPNG DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
  • 59. JPEG •  The format for photos •  Run through JPEGTran
  • 60. Study of the images on the top 1000 sites Q: How many GIFs are out there? Q: What if we make them PNG? Q: Are PNGs optimized? Q: Are JPEGs optimized?
  • 61. Top 1000 – how? •  URLs from Alexa top sites •  open Fiddler •  php script that opens/closes Explorer with each URL •  enjoy! •  Export images from Fiddler
  • 62. Top 1000 – GIF vs. PNG? Animated GIF 3% PNG 24% GIF 73%
  • 63. Top 1000 – GIF vs. PNG vs. JPG? GIF 40% JPEG 46% PNG Animated GIF 13% 1%
  • 64. Top 1000 – GIF to PNG $ optipng *.gif $ pngoptimizercl – file:"*.png” (1 min/1000 files) 23.79% savings
  • 65. Top 1000 – Optimizing PNG $ pngoptimizercl – file:"*.png" 16.90% savings
  • 66. Top 1000 – Optimizing JPG $ jpegtran –copy none -optimize 13.08% savings
  • 67. Take-home 1.  Think reusable CSS 2.  Reduce HTTP requests: - sprites, data URIs - CSS3, reusable images 3.  Smush all images
  • 68. Thank you! Stoyan Stefanov @stoyanstefanov http://www.phpied.com

×