OPTIMIZATION EFFICIENCY

                                               Effort
 Results




           80% of the optimiza...
OPTIMIZATION EFFICIENCY

                                               Effort
 Results




           80% of the optimiza...
T WO MAIN GOAL S
 Low number of files
 Small payload size
SMALL PAYLOAD SIZE
Saving images

PNG8    small dimensions, no alpha transparency
PNG24   alpha transparency*
JPEG    big ...
SMALL PAYLOAD SIZE
Compressing images

  ImageOptim (Mac)
  Smushit (online)
  PunyPNG (online)
SMALL PAYLOAD SIZE
Minify Javascript & CSS

   YUI Compressor
SMALL PAYLOAD SIZE
Gzip text based files

   .htaccess
   <IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/te...
LOW NUMBER OF FILES
Combining images

  CSS Sprites
LOW NUMBER OF FILES
Combining Javascript & CSS

   One file, ideally
LOW NUMBER OF FILES
Combining Javascript & CSS

   One file, ideally; two files, max
   @media print instead of print.css
LOW NUMBER OF FILES
Caching files

   .htaccess
   <FilesMatch ".(gif|jpg|png)$">
   Header set Cache-Control "public"
   H...
RESOURCES
 Performance test tools
 YSlow - http://developer.yahoo.com/yslow/
 Page Speed - http://code.google.com/speed/pa...
THANK YA .
S TELIAN
designs stuff for digiti
Website Optimization
Upcoming SlideShare
Loading in...5
×

Website Optimization

2,242

Published on

Performing the least amount of things in order to achieve most amount of optimization you can make on the front-end of a website.

1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,242
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
84
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Website Optimization

  1. 1. OPTIMIZATION EFFICIENCY Effort Results 80% of the optimization is done in 20% of the time
  2. 2. OPTIMIZATION EFFICIENCY Effort Results 80% of the optimization is done in 20% of the time
  3. 3. T WO MAIN GOAL S Low number of files Small payload size
  4. 4. SMALL PAYLOAD SIZE Saving images PNG8 small dimensions, no alpha transparency PNG24 alpha transparency* JPEG big dimensions, pictures*
  5. 5. SMALL PAYLOAD SIZE Compressing images ImageOptim (Mac) Smushit (online) PunyPNG (online)
  6. 6. SMALL PAYLOAD SIZE Minify Javascript & CSS YUI Compressor
  7. 7. SMALL PAYLOAD SIZE Gzip 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>
  8. 8. LOW NUMBER OF FILES Combining images CSS Sprites
  9. 9. LOW NUMBER OF FILES Combining Javascript & CSS One file, ideally
  10. 10. LOW NUMBER OF FILES Combining Javascript & CSS One file, ideally; two files, max @media print instead of print.css
  11. 11. LOW NUMBER OF FILES Caching 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>
  12. 12. RESOURCES Performance test tools YSlow - http://developer.yahoo.com/yslow/ Page Speed - http://code.google.com/speed/page-speed/ FireBug - http://getfirebug.com/ Web Developer Tools(Safari & Chrome) Image Compressors InageOptim - http://imageoptim.pornel.net/ Smush.it - http://www.smushit.com PunyPNG - http://www.punypng.com Sprite Generator CSS Sprite Generator - http://spritegen.website-performance.org/ Online YUI Compressor Online JavaScript/CSS Compressor - http://refresh-sf.com/yui/
  13. 13. THANK YA .
  14. 14. S TELIAN designs stuff for digiti
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×