Web performance optimization (WPO)
- 1. Website Performance OptimizationMariusz Kaczmarek
- 2. “If it is fast and ugly, they will use it and curse you; if it is slow, they will not use it.”David CheritonSource: http://blogs.msdn.com/b/edglas/archive/2009/01/02/make-your-performance-work-count-the-20-rule.aspxhttps://secure.wikimedia.org/wikipedia/en/wiki/David_Cheriton2
- 4. Optimize performance? More sales Less bandwidth & server peaks Customer satisfaction Might influence rankings Competitive advantageSource: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html4
- 5. “…optimize front-end performance first, that's where 80% or more of the end-user response time is spent” Prof. Steve SoudersSource: http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/http://www.flickr.com/photos/seanosh/2782339349/5
- 6. Effective measures? Website performance optimization should be aligned with the service / website / target audience you work with. Focus areas could be: Image optimization & compression JS performance (asynchronous, cached) Reduction of DOM elements Teaching customers and employees!6
- 7. Combined Scripts Server-sided combination Avoid @import for combining JS tool: HEADjshttp://headjs.com/7
- 8. CSS Performance Reuse of round corners and shadow classes font-faces instead of pictures CSS-Sprites Universal > tags > classes > IDsSource: http://www.alsacreations.com/xmedia/doc/full/sprites-big-sites.pnghttps://developer.mozilla.org/en/Writing_Efficient_CSS8
- 9. Postponed Loading Use of GET with AJAX Google Instant takessnapshots 5-10s after onLoadevent? http://b0i.de/seomofoTools: ContolJShttp://stevesouders.com/controljs/ImageLoaderhttp://developer.yahoo.com/yui/imageloader/LazyLoadhttp://plugins.jquery.com/project/lazyload/Source: http://developer.yahoo.com/performance/rules.html9
- 10. Event handlers, components,XHRsUser interaction, XHRsbackendcomponentsrequestSite loadedHTML sentrequestonload5-10sGoogle Instant SnapshotModifiedimage from High Performance Web Pages | Stoyan Stefanov | Yahoo! Exceptional Performance | PHP Quebec, March 13, 2008Source: http://b0i.de/seomofo10
- 11. DNS Lookups & Redirections Avoid 301 redirections (e.g. in HTML) http://www.bonoseo.com/ != http://www.bonoseo.com usage of not morethan2-5 differentdomains on average better: domain-aliases for parallel downloadshttp://images.bonoseo.com || http://www.bonoseo.com cookielessdomainsforstaticcontentSource: http://yuiblog.com/blog/2007/04/11/performance-research-part-4/11
- 12. Content Delivery NetworkGeographical distribution Minimizes DNS-Lookups Optimized caching und uptime (by dynamic DNS resolving)Source: http://www.flickr.com/photos/andybeatty/5247263940/12
- 13. Image Compression UseSmush.it Progressive JPEGbaseline progressiveSource: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/13
- 14. Vector Graphics Canvas Elemente with HTML5Ai->Canvashttp://visitmix.com/labs/ai2canvas/Progressive JPEG 13,3 kB -> HTML5 2,38 kBSaved: 82%14
- 15. Shape the DOM Tree <h1><em>Heading</em></h1> - useCSS‘sitalicsinstead Tool: DOM-Monsterhttp://mir.aculo.us/dom-monster/ Avoid iFrames15
- 17. Performance Test ToolsLoads.inwww.loads.inSlow Copwww.slowcop.comShow Slowwww.showslow.comWebpagetest www.webpagetest.org Browser basedSpeedtracerhttp://b0i.de/speedtracerYslowFireBughttp://b0i.de/yslowMore tools: http://code.google.com/speed/tools.html17
- 18. Competition Analysis Possible performance profiles (by Souders & students)http://b0i.de/profile Simple linear regression analysisWolfram Alpha: linear fit {1, 87},{2, 77},{3, 95},{4, 68}http://b0i.de/wolfreg18
- 19. Pareto Rule 80/20Optimizationneeds time!Lessons learned: Concentrate on biggestchunksSource: JavaScript: The Good Parts - Part Six: Ajax Performance | Douglas Crockford19
- 20. Questions? Discuss!Let’s be friends Twitter: BONOSEOFacebook: kaczmarek.mariuszSsssshh… SouderSlides from Stanford: http://b0i.de/souderslides20
- 21. Statistics 2010Additional Average website size: 320 kB Compression is possible for 2/3 of overall data 80% of content is loaded from one hostSource: Statisticnumbers from 4.2 billionsiteshttp://code.google.com/speed/articles/web-metrics.html21
- 22. Inline Images Base 64 encoding Great forsmallstaticimagesAdditionalWorks until IE7 Browser switch!22Source: http://9gag.com/gag/76585
- 23. JavaScript PerformanceAdditional Tools: http://dean.edwards.name/packer/http://developer.yahoo.com/yui/compressor/ DRY and OO approachSeconds per 10 million operationsSource: Besser PHP Programmieren – Professionelle PHP-Techniken | Carsten Möhrke23