[tw] css files optimization
Post on 15-Jan-2015
1.135 Views
Preview:
DESCRIPTION
TRANSCRIPT
CSS FILES OPTIMIZATION
TW 2011Special lab
Bogdan Gaza
@hurrycaneTW 2011
Monday, February 21, 2011
$ whoami
Student at Faculty of Computer Science, Iasi, Romania
RubySOC 2010 student
@hurrycane
@hurrycaneTW 2011
bogdan.gaza@info.uaic.ro
Monday, February 21, 2011
@hurrycaneTW 2011
Why optimize css?
Monday, February 21, 2011
@hurrycaneTW 2011
To load pages faster
Monday, February 21, 2011
@hurrycaneTW 2011
The BIGGER the website - the bigger the file size
Monday, February 21, 2011
@hurrycaneTW 2011 @hurrycaneTW 2011
The BIGGER the website - the selectors get larger
Monday, February 21, 2011
@hurrycaneTW 2011
http://special-web.wikispaces.com/Presentations
Monday, February 21, 2011
@hurrycaneTW 2011
Load time
http://special-web.wikispaces.com/Presentations
Monday, February 21, 2011
@hurrycaneTW 2011
Size
http://special-web.wikispaces.com/Presentations
Monday, February 21, 2011
@hurrycaneTW 2011
Size
http://www.trilulilu.ro
Load time
Monday, February 21, 2011
@hurrycaneTW 2011
21% of Top 1000 Alexa* have>100k of CSS
*Alexa = internet traffic stats
Monday, February 21, 2011
@hurrycaneTW 2011
How?
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Reuse code
Smaller selectors
Number of css files
Minify
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Client Server
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Client Server
Request
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Client Server
Request
Response
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
Reduce file size
GZIP
Client Server
Request
Responsegzip
Monday, February 21, 2011
@hurrycaneTW 2011
Reduce file size - gzip
Important bandwidth reductionexample
Amazon EC2
1 TB (uncompressed) = $174
1 TB (compressed) = $43.52
Monday, February 21, 2011
@hurrycaneTW 2011
Reduce file size - gzip
Important bandwidth reductionexample
Amazon EC2
1 TB (uncompressed) = $174
1 TB (compressed) = $43.524:1
compression
Monday, February 21, 2011
@hurrycaneTW 2011
mod_delateDemo
gzip
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Reuse code
Smaller selectors
Number of css files
Minify
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Reuse code
Smaller selectors
Number of css files
Minify
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
Reduce file size
Minification = remove unnecessary characters from codewithout changing functionality
Monday, February 21, 2011
@hurrycaneTW 2011
Reduce file size
Minification is done using different tools.
YUI-Compressor
Minify
Closure Compiler (google)
Monday, February 21, 2011
@hurrycaneTW 2011
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
Monday, February 21, 2011
@hurrycaneTW 2011
YUI-CompressorDemo
Monday, February 21, 2011
@hurrycaneTW 2011
GZIP
Reuse code
Smaller selectors
Number of css files
Minify
Reduce file size
Monday, February 21, 2011
@hurrycaneTW 2011
Reduce rendering time
Monday, February 21, 2011
@hurrycaneTW 2011
ul { ... }ul li { ... }ul li a { ... }
Paradigm shift
Until now, focus was here
Monday, February 21, 2011
@hurrycaneTW 2011
ul { ... }ul li { ... }ul li a { ... }
Paradigm shift
Arhitecture lives here
Monday, February 21, 2011
@hurrycaneTW 2011
Object oriented css
Objects rather than pages
Global defaults
Abstract reusable elements
Separate structure and skin
Use multiple classes to simulate OO
Monday, February 21, 2011
@hurrycaneTW 2011
Facebook’s Big pipeExample of optimisation:
Monday, February 21, 2011
@hurrycaneTW 2011
Facebook’s Big pipeExample of optimisation:
50%improvementgain in loadingspeed
Monday, February 21, 2011
@hurrycaneTW 2011
Choose the solution that best fits you!
Monday, February 21, 2011
@hurrycaneTW 2011
QA
Monday, February 21, 2011
@hurrycaneTW 2011
Thanks!
Monday, February 21, 2011
top related