SlideShare a Scribd company logo
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
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 dimensions, pictures*
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/text text/html text/plain
   text/xml text/css application/x-javascript application/
   javascript
   </IfModule>
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"
   Header set Expires "Thu, 16 Sep 2011 20:00:00 GMT"
   Header unset Last-Modified
   </FilesMatch>
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/
THANK YA .
S TELIAN
designs stuff for digiti

More Related Content

Viewers also liked

Bigot means
Bigot meansBigot means
Bigot means
Elenchus
 
Website Optimization Using Google Analytics
Website Optimization Using Google AnalyticsWebsite Optimization Using Google Analytics
Website Optimization Using Google Analytics
Texas Association of Graduate Admissions Professionals
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Devin Walker
 
Website Optimization Without a Committee: Using Testing to Make Decisions
Website Optimization Without a Committee: Using Testing to Make DecisionsWebsite Optimization Without a Committee: Using Testing to Make Decisions
Website Optimization Without a Committee: Using Testing to Make Decisions
Earthbound Media Group
 
Google Tag Manager - Measure Twice, Cut Once
Google Tag Manager - Measure Twice, Cut OnceGoogle Tag Manager - Measure Twice, Cut Once
Google Tag Manager - Measure Twice, Cut Once
MnSearch, The Minnesota Search Engine Marketing Association
 
Website Optimization & Visitor Task Completion
Website Optimization & Visitor Task CompletionWebsite Optimization & Visitor Task Completion
Website Optimization & Visitor Task Completion
Michael Whitehouse
 
Website Optimization: Tuning for Conversions
Website Optimization: Tuning for Conversions Website Optimization: Tuning for Conversions
Website Optimization: Tuning for Conversions
Aarhus University
 
Engaging Students: Bridging the Gap from Acceptance to Matriculation
Engaging Students: Bridging the Gap from Acceptance to MatriculationEngaging Students: Bridging the Gap from Acceptance to Matriculation
Engaging Students: Bridging the Gap from Acceptance to Matriculation
Texas Association of Graduate Admissions Professionals
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimization
Stelian Firez
 
The 7 Principles of Website Optimization
The 7 Principles of Website OptimizationThe 7 Principles of Website Optimization
The 7 Principles of Website Optimization
Wishpond
 
Universal Analytics and Google Tag Manager - Superweek 2014
Universal Analytics and Google Tag Manager - Superweek 2014Universal Analytics and Google Tag Manager - Superweek 2014
Universal Analytics and Google Tag Manager - Superweek 2014
Analytics Ninja LLC
 
29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know
Mike Arnesen
 
Google Analytics Implementation Checklist
Google Analytics Implementation ChecklistGoogle Analytics Implementation Checklist
Google Analytics Implementation Checklist
PadiCode
 

Viewers also liked (14)

Bigot means
Bigot meansBigot means
Bigot means
 
Website Optimization Using Google Analytics
Website Optimization Using Google AnalyticsWebsite Optimization Using Google Analytics
Website Optimization Using Google Analytics
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
 
Website Optimization Without a Committee: Using Testing to Make Decisions
Website Optimization Without a Committee: Using Testing to Make DecisionsWebsite Optimization Without a Committee: Using Testing to Make Decisions
Website Optimization Without a Committee: Using Testing to Make Decisions
 
Google Tag Manager - Measure Twice, Cut Once
Google Tag Manager - Measure Twice, Cut OnceGoogle Tag Manager - Measure Twice, Cut Once
Google Tag Manager - Measure Twice, Cut Once
 
Website Optimization & Visitor Task Completion
Website Optimization & Visitor Task CompletionWebsite Optimization & Visitor Task Completion
Website Optimization & Visitor Task Completion
 
Website Optimization: Tuning for Conversions
Website Optimization: Tuning for Conversions Website Optimization: Tuning for Conversions
Website Optimization: Tuning for Conversions
 
Engaging Students: Bridging the Gap from Acceptance to Matriculation
Engaging Students: Bridging the Gap from Acceptance to MatriculationEngaging Students: Bridging the Gap from Acceptance to Matriculation
Engaging Students: Bridging the Gap from Acceptance to Matriculation
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimization
 
The 7 Principles of Website Optimization
The 7 Principles of Website OptimizationThe 7 Principles of Website Optimization
The 7 Principles of Website Optimization
 
Universal Analytics and Google Tag Manager - Superweek 2014
Universal Analytics and Google Tag Manager - Superweek 2014Universal Analytics and Google Tag Manager - Superweek 2014
Universal Analytics and Google Tag Manager - Superweek 2014
 
29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know29 Advanced Google Tag Manager Tips Every Marketer Should Know
29 Advanced Google Tag Manager Tips Every Marketer Should Know
 
Google Analytics Implementation Checklist
Google Analytics Implementation ChecklistGoogle Analytics Implementation Checklist
Google Analytics Implementation Checklist
 

Similar to Website Optimization

The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
Bastian Grimm
 
Velocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand WordsVelocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand Words
Akamai Technologies
 
Compact Web - Remind "web compression" -
Compact Web - Remind "web compression" -Compact Web - Remind "web compression" -
Compact Web - Remind "web compression" -
Tomokazu Kiyohara
 
Image processing tips
Image processing tipsImage processing tips
Image processing tips
Thiago Fernandes Massa
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
Austin Gil
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
FITC
 
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid
robin_sy
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
Bastian Grimm
 
Web page load speed optimization
Web page load speed optimizationWeb page load speed optimization
Web page load speed optimization
Dmitry Dudin
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
Bastian Grimm
 
Top 8 Image Optimization Tips and Tricks.pdf
Top 8 Image Optimization Tips and Tricks.pdfTop 8 Image Optimization Tips and Tricks.pdf
Top 8 Image Optimization Tips and Tricks.pdf
MagicBid.ai
 
Shared Element Transitions
Shared Element TransitionsShared Element Transitions
Shared Element Transitions
Mike Scamell
 
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Igalia
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
Guy Podjarny
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
Bastian Grimm
 
Image optimization for decreasing app size
Image optimization for decreasing app sizeImage optimization for decreasing app size
Image optimization for decreasing app size
Aydar Mukhametzyanov
 
The future of images in email - Litmus live London 2017
The future of images in email - Litmus live London 2017The future of images in email - Litmus live London 2017
The future of images in email - Litmus live London 2017
Mark Robbins
 
Image Optimisation Techniques for WebApps
Image Optimisation Techniques for WebAppsImage Optimisation Techniques for WebApps
Image Optimisation Techniques for WebApps
Nil Portugués Calderó
 
Image optimization q_auto - f_auto
Image optimization q_auto - f_autoImage optimization q_auto - f_auto
Image optimization q_auto - f_auto
Can Ozdoruk
 
Web Optimisation
Web OptimisationWeb Optimisation
Web Optimisation
Gregory Benner
 

Similar to Website Optimization (20)

The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
 
Velocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand WordsVelocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand Words
 
Compact Web - Remind "web compression" -
Compact Web - Remind "web compression" -Compact Web - Remind "web compression" -
Compact Web - Remind "web compression" -
 
Image processing tips
Image processing tipsImage processing tips
Image processing tips
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Web page load speed optimization
Web page load speed optimizationWeb page load speed optimization
Web page load speed optimization
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
Top 8 Image Optimization Tips and Tricks.pdf
Top 8 Image Optimization Tips and Tricks.pdfTop 8 Image Optimization Tips and Tricks.pdf
Top 8 Image Optimization Tips and Tricks.pdf
 
Shared Element Transitions
Shared Element TransitionsShared Element Transitions
Shared Element Transitions
 
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
Image optimization for decreasing app size
Image optimization for decreasing app sizeImage optimization for decreasing app size
Image optimization for decreasing app size
 
The future of images in email - Litmus live London 2017
The future of images in email - Litmus live London 2017The future of images in email - Litmus live London 2017
The future of images in email - Litmus live London 2017
 
Image Optimisation Techniques for WebApps
Image Optimisation Techniques for WebAppsImage Optimisation Techniques for WebApps
Image Optimisation Techniques for WebApps
 
Image optimization q_auto - f_auto
Image optimization q_auto - f_autoImage optimization q_auto - f_auto
Image optimization q_auto - f_auto
 
Web Optimisation
Web OptimisationWeb Optimisation
Web Optimisation
 

Website Optimization

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