More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Web performance optimization (WPO)
Similar to Web performance optimization (WPO) (20)
Recently uploaded
Recently uploaded (20)
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