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