CSS FILES OPTIMIZATION                            TW 2011                             Special lab                         ...
$ whoami                 Student at Faculty of Computer Science, Iasi, Romania                            RubySOC 2010 stu...
Why optimize css?TW 2011                                         @hurrycaneMonday, February 21, 2011
To load pages fasterTW 2011                                     @hurrycaneMonday, February 21, 2011
The BIGGER the website - the                bigger the file sizeTW 2011                             @hurrycaneMonday, Febru...
The BIGGER the website - the               selectors get largerTW 2011                             @hurrycaneMonday, Febru...
http://special-web.wikispaces.com/PresentationsTW 2011                                                              @hurry...
http://special-web.wikispaces.com/Presentations                                             Load timeTW 2011              ...
http://special-web.wikispaces.com/Presentations                            SizeTW 2011                                    ...
http://www.trilulilu.ro                                                  Load time                            SizeTW 2011 ...
21% of Top 1000 Alexa* have                  >100k of CSS                              *Alexa = internet traffic statsTW 20...
How?TW 2011                            @hurrycaneMonday, February 21, 2011
Reduce file size                                  GZIP                            Number of css files                       ...
Reduce file size                                     GZIP                            Client            ServerTW 2011       ...
Reduce file size                                     GZIP                                     Request                      ...
Reduce file size                                     GZIP                                     Request                      ...
Reduce file size                                     GZIP                                     Request                      ...
Reduce file size - gzip                             Important bandwidth reduction                                        ex...
Reduce file size - gzip                             Important bandwidth reduction                                        ex...
gzip                            mod_delate                              DemoTW 2011                                       ...
Reduce file size                                  GZIP                            Number of css files                       ...
Reduce file size                                  GZIP                            Number of css files                       ...
Reduce file size    Minification = remove unnecessary characters from code                 without changing functionalityTW ...
Reduce file size                            Minification is done using different tools.                                     ...
Reduce file size          YUI-Compressor is used for both JavaScript and CSS                                       Written ...
YUI-Compressor                                DemoTW 2011                                      @hurrycaneMonday, February ...
Reduce file size                                  GZIP                            Number of css files                       ...
Reduce rendering timeTW 2011                                             @hurrycaneMonday, February 21, 2011
Paradigm shift                            ul { ... }                            ul li { ... }                            u...
Paradigm shift                            ul { ... }                            ul li { ... }                            u...
Object oriented css                                Objects rather than pages                                      Global d...
Example of optimisation:                            Facebook’s Big pipeTW 2011                                            ...
Example of optimisation:                            Facebook’s Big pipe                            50%                    ...
Choose the solution that best fits you!TW 2011                                                              @hurrycaneMonda...
QATW 2011                          @hurrycaneMonday, February 21, 2011
Thanks!TW 2011                               @hurrycaneMonday, February 21, 2011
Upcoming SlideShare
Loading in …5
×

[TW] CSS Files Optimization

1,522 views

Published on

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

No Downloads
Views
Total views
1,522
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
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

×