Your SlideShare is downloading. ×
0
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files Optimization
[TW] CSS Files 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

[TW] CSS Files Optimization

1,175

Published on

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

No Downloads
Views
Total Views
1,175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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. CSS FILES OPTIMIZATION TW 2011 Special lab Bogdan GazaTW 2011 @hurrycaneMonday, February 21, 2011
  • 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. Why optimize css?TW 2011 @hurrycaneMonday, February 21, 2011
  • 4. To load pages fasterTW 2011 @hurrycaneMonday, February 21, 2011
  • 5. The BIGGER the website - the bigger the file sizeTW 2011 @hurrycaneMonday, February 21, 2011
  • 6. The BIGGER the website - the selectors get largerTW 2011 @hurrycaneMonday, February 21, 2011
  • 7. http://special-web.wikispaces.com/PresentationsTW 2011 @hurrycaneMonday, February 21, 2011
  • 8. http://special-web.wikispaces.com/Presentations Load timeTW 2011 @hurrycaneMonday, February 21, 2011
  • 9. http://special-web.wikispaces.com/Presentations SizeTW 2011 @hurrycaneMonday, February 21, 2011
  • 10. http://www.trilulilu.ro Load time SizeTW 2011 @hurrycaneMonday, February 21, 2011
  • 11. 21% of Top 1000 Alexa* have >100k of CSS *Alexa = internet traffic statsTW 2011 @hurrycaneMonday, February 21, 2011
  • 12. How?TW 2011 @hurrycaneMonday, February 21, 2011
  • 13. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  • 14. Reduce file size GZIP Client ServerTW 2011 @hurrycaneMonday, February 21, 2011
  • 15. Reduce file size GZIP Request Client ServerTW 2011 @hurrycaneMonday, February 21, 2011
  • 16. Reduce file size GZIP Request Client Server ResponseTW 2011 @hurrycaneMonday, February 21, 2011
  • 17. Reduce file size GZIP Request Client Server Response gzipTW 2011 @hurrycaneMonday, February 21, 2011
  • 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. 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. gzip mod_delate DemoTW 2011 @hurrycaneMonday, February 21, 2011
  • 21. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  • 22. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  • 23. Reduce file size Minification = remove unnecessary characters from code without changing functionalityTW 2011 @hurrycaneMonday, February 21, 2011
  • 24. Reduce file size Minification is done using different tools. YUI-Compressor Minify Closure Compiler (google)TW 2011 @hurrycaneMonday, February 21, 2011
  • 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. YUI-Compressor DemoTW 2011 @hurrycaneMonday, February 21, 2011
  • 27. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectorsTW 2011 @hurrycaneMonday, February 21, 2011
  • 28. Reduce rendering timeTW 2011 @hurrycaneMonday, February 21, 2011
  • 29. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Until now, focus was hereTW 2011 @hurrycaneMonday, February 21, 2011
  • 30. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Arhitecture lives hereTW 2011 @hurrycaneMonday, February 21, 2011
  • 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. Example of optimisation: Facebook’s Big pipeTW 2011 @hurrycaneMonday, February 21, 2011
  • 33. Example of optimisation: Facebook’s Big pipe 50% improvement gain in loading speedTW 2011 @hurrycaneMonday, February 21, 2011
  • 34. Choose the solution that best fits you!TW 2011 @hurrycaneMonday, February 21, 2011
  • 35. QATW 2011 @hurrycaneMonday, February 21, 2011
  • 36. Thanks!TW 2011 @hurrycaneMonday, February 21, 2011

×