[TW] CSS Files Optimization
0 likes754 views
This document discusses various techniques for optimizing CSS files, including gzipping to reduce file size, minimizing CSS to remove unnecessary characters, reusing code across stylesheets, and using smaller selectors. It notes that 21% of the top 1000 websites have over 100kb of CSS and describes tools like YUI Compressor that can be used to minify CSS files. Examples of optimization techniques include Facebook's use of "Big Pipe" to improve loading speeds by 50%.
[TW] CSS Files Optimization
- 1. CSS FILES OPTIMIZATION TW 2011 Special lab Bogdan Gaza TW 2011 @hurrycane Monday, February 21, 2011
- 2. $ whoami Student at Faculty of Computer Science, Iasi, Romania RubySOC 2010 student [email protected] @hurrycane TW 2011 @hurrycane Monday, February 21, 2011
- 3. Why optimize css? TW 2011 @hurrycane Monday, February 21, 2011
- 4. To load pages faster TW 2011 @hurrycane Monday, February 21, 2011
- 5. The BIGGER the website - the bigger the file size TW 2011 @hurrycane Monday, February 21, 2011
- 6. The BIGGER the website - the selectors get larger TW 2011 @hurrycane Monday, February 21, 2011
- 7. http://special-web.wikispaces.com/Presentations TW 2011 @hurrycane Monday, February 21, 2011
- 8. http://special-web.wikispaces.com/Presentations Load time TW 2011 @hurrycane Monday, February 21, 2011
- 9. http://special-web.wikispaces.com/Presentations Size TW 2011 @hurrycane Monday, February 21, 2011
- 10. http://www.trilulilu.ro Load time Size TW 2011 @hurrycane Monday, February 21, 2011
- 11. 21% of Top 1000 Alexa* have >100k of CSS *Alexa = internet traffic stats TW 2011 @hurrycane Monday, February 21, 2011
- 12. How? TW 2011 @hurrycane Monday, February 21, 2011
- 13. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011
- 14. Reduce file size GZIP Client Server TW 2011 @hurrycane Monday, February 21, 2011
- 15. Reduce file size GZIP Request Client Server TW 2011 @hurrycane Monday, February 21, 2011
- 16. Reduce file size GZIP Request Client Server Response TW 2011 @hurrycane Monday, February 21, 2011
- 17. Reduce file size GZIP Request Client Server Response gzip TW 2011 @hurrycane Monday, February 21, 2011
- 18. Reduce file size - gzip Important bandwidth reduction example Amazon EC2 1 TB (uncompressed) = $174 1 TB (compressed) = $43.52 TW 2011 @hurrycane Monday, 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.52 TW 2011 @hurrycane Monday, February 21, 2011
- 20. gzip mod_delate Demo TW 2011 @hurrycane Monday, February 21, 2011
- 21. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011
- 22. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011
- 23. Reduce file size Minification = remove unnecessary characters from code without changing functionality TW 2011 @hurrycane Monday, February 21, 2011
- 24. Reduce file size Minification is done using different tools. YUI-Compressor Minify Closure Compiler (google) TW 2011 @hurrycane Monday, 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.css TW 2011 @hurrycane Monday, February 21, 2011
- 26. YUI-Compressor Demo TW 2011 @hurrycane Monday, February 21, 2011
- 27. Reduce file size GZIP Number of css files Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011
- 28. Reduce rendering time TW 2011 @hurrycane Monday, February 21, 2011
- 29. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Until now, focus was here TW 2011 @hurrycane Monday, February 21, 2011
- 30. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Arhitecture lives here TW 2011 @hurrycane Monday, 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 OO TW 2011 @hurrycane Monday, February 21, 2011
- 32. Example of optimisation: Facebook’s Big pipe TW 2011 @hurrycane Monday, February 21, 2011
- 33. Example of optimisation: Facebook’s Big pipe 50% improvement gain in loading speed TW 2011 @hurrycane Monday, February 21, 2011
- 34. Choose the solution that best fits you! TW 2011 @hurrycane Monday, February 21, 2011
- 35. QA TW 2011 @hurrycane Monday, February 21, 2011
- 36. Thanks! TW 2011 @hurrycane Monday, February 21, 2011