OPTIMIZATION EFFICIENCY

Effort

Results

80% of the optimization is done in 20% of the time

OPTIMIZATION EFFICIENCY

Effort

Results

80% of the optimization is done in 20% of the time

TWO MAIN GOALS

Low number of filesSmall payload size

SMALL PAYLOAD SIZESaving images

PNG8 small dimensions, no alpha transparency

PNG24 alpha transparency*

JPEG big dimensions, pictures*

SMALL PAYLOAD SIZECompressing images

ImageOptim (Mac)

Smushit (online)

PunyPNG (online)

SMALL PAYLOAD SIZEMinify Javascript & CSS

YUI Compressor

SMALL PAYLOAD SIZEGzip text based files

.htaccess<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript</IfModule>

LOW NUMBER OF FILESCombining images

CSS Sprites

LOW NUMBER OF FILESCombining Javascript & CSS

One file, ideally

LOW NUMBER OF FILESCombining Javascript & CSS

One file, ideally; two files, max

@media print instead of print.css

LOW NUMBER OF FILESCaching files

.htaccess<FilesMatch "\.(gif|jpg|png)$">Header set Cache-Control "public"Header set Expires "Thu, 16 Sep 2011 20:00:00 GMT"Header unset Last-Modified</FilesMatch>

RESOURCES

Performance test toolsYSlow - http://developer.yahoo.com/yslow/Page Speed - http://code.google.com/speed/page-speed/FireBug - http://getfirebug.com/Web Developer Tools(Safari & Chrome)

Image CompressorsInageOptim - http://imageoptim.pornel.net/Smush.it - http://www.smushit.comPunyPNG - http://www.punypng.com

Sprite GeneratorCSS Sprite Generator - http://spritegen.website-performance.org/

Online YUI CompressorOnline JavaScript/CSS Compressor - http://refresh-sf.com/yui/

THANK YA.

STELIAN

designs stuff for digiti