[TW] CSS Files Optimization

1,473 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

[TW] CSS Files Optimization

  1. 1. CSS FILES OPTIMIZATION TW 2011 Special lab Bogdan GazaTW 2011 @hurrycaneMonday, February 21, 2011
  2. 2. $ whoami Student at Faculty of Computer Science, Iasi, Romania RubySOC 2010 student bogdan.gaza@info.uaic.ro @hurrycaneTW 2011 @hurrycaneMonday, February 21, 2011
  3. 3. Why optimize css?TW 2011 @hurrycaneMonday, February 21, 2011
  4. 4. To load pages fasterTW 2011 @hurrycaneMonday, February 21, 2011
  5. 5. The BIGGER the website - the bigger the file sizeTW 2011 @hurrycaneMonday, February 21, 2011
  6. 6. The BIGGER the website - the selectors get largerTW 2011 @hurrycaneMonday, February 21, 2011
  7. 7. http://special-web.wikispaces.com/PresentationsTW 2011 @hurrycaneMonday, February 21, 2011
  8. 8. http://special-web.wikispaces.com/Presentations Load timeTW 2011 @hurrycaneMonday, February 21, 2011
  9. 9. http://special-web.wikispaces.com/Presentations SizeTW 2011 @hurrycaneMonday, February 21, 2011
  10. 10. http://www.trilulilu.ro Load time SizeTW 2011 @hurrycaneMonday, February 21, 2011
  11. 11. 21% of Top 1000 Alexa* have >100k of CSS *Alexa = internet traffic statsTW 2011 @hurrycaneMonday, February 21, 2011
  12. 12. How?TW 2011 @hurrycaneMonday, February 21, 2011
  13. 13. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  14. 14. Reduce file size GZIP Client ServerTW 2011 @hurrycaneMonday, February 21, 2011
  15. 15. Reduce file size GZIP Request Client ServerTW 2011 @hurrycaneMonday, February 21, 2011
  16. 16. Reduce file size GZIP Request Client Server ResponseTW 2011 @hurrycaneMonday, February 21, 2011
  17. 17. Reduce file size GZIP Request Client Server Response gzipTW 2011 @hurrycaneMonday, February 21, 2011
  18. 18. Reduce file size - gzip Important bandwidth reduction example Amazon EC2 1 TB (uncompressed) = $174 1 TB (compressed) = $43.52TW 2011 @hurrycaneMonday, February 21, 2011
  19. 19. Reduce file size - gzip Important bandwidth reduction example Amazon EC2 1 TB (uncompressed) = $174 4:1 compression 1 TB (compressed) = $43.52TW 2011 @hurrycaneMonday, February 21, 2011
  20. 20. gzip mod_delate DemoTW 2011 @hurrycaneMonday, February 21, 2011
  21. 21. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  22. 22. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  23. 23. Reduce file size Minification = remove unnecessary characters from code without changing functionalityTW 2011 @hurrycaneMonday, February 21, 2011
  24. 24. Reduce file size Minification is done using different tools. YUI-Compressor Minify Closure Compiler (google)TW 2011 @hurrycaneMonday, February 21, 2011
  25. 25. Reduce file size YUI-Compressor is used for both JavaScript and CSS Written in Java Command line tool yuicompressor ceva.css -o ceva.min.cssTW 2011 @hurrycaneMonday, February 21, 2011
  26. 26. YUI-Compressor DemoTW 2011 @hurrycaneMonday, February 21, 2011
  27. 27. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  28. 28. Reduce rendering timeTW 2011 @hurrycaneMonday, February 21, 2011
  29. 29. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Until now, focus was hereTW 2011 @hurrycaneMonday, February 21, 2011
  30. 30. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Arhitecture lives hereTW 2011 @hurrycaneMonday, February 21, 2011
  31. 31. Object oriented css Objects rather than pages Global defaults Abstract reusable elements Separate structure and skin Use multiple classes to simulate OOTW 2011 @hurrycaneMonday, February 21, 2011
  32. 32. Example of optimisation: Facebook’s Big pipeTW 2011 @hurrycaneMonday, February 21, 2011
  33. 33. Example of optimisation: Facebook’s Big pipe 50% improvement gain in loading speedTW 2011 @hurrycaneMonday, February 21, 2011
  34. 34. Choose the solution that best fits you!TW 2011 @hurrycaneMonday, February 21, 2011
  35. 35. QATW 2011 @hurrycaneMonday, February 21, 2011
  36. 36. Thanks!TW 2011 @hurrycaneMonday, February 21, 2011

×