Website Optimization

2,822 views

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,822
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
86
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Website Optimization

  1. OPTIMIZATION EFFICIENCY Effort Results 80% of the optimization is done in 20% of the time
  2. OPTIMIZATION EFFICIENCY Effort Results 80% of the optimization is done in 20% of the time
  3. T WO MAIN GOAL S Low number of files Small payload size
  4. SMALL PAYLOAD SIZE Saving images PNG8 small dimensions, no alpha transparency PNG24 alpha transparency* JPEG big dimensions, pictures*
  5. SMALL PAYLOAD SIZE Compressing images ImageOptim (Mac) Smushit (online) PunyPNG (online)
  6. SMALL PAYLOAD SIZE Minify Javascript & CSS YUI Compressor
  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. LOW NUMBER OF FILES Combining images CSS Sprites
  9. LOW NUMBER OF FILES Combining Javascript & CSS One file, ideally
  10. LOW NUMBER OF FILES Combining Javascript & CSS One file, ideally; two files, max @media print instead of print.css
  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. 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. THANK YA .
  14. S TELIAN designs stuff for digiti

×