![Website Performance Optimization,[object Object],Mariusz Kaczmarek,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-1-2048.jpg?cb=1665185748)
![“If it is fast and ugly, they will use it and curse you; if it is slow, they will not use it.”,[object Object],David Cheriton,[object Object],Source: http://blogs.msdn.com/b/edglas/archive/2009/01/02/make-your-performance-work-count-the-20-rule.aspx,[object Object],https://secure.wikimedia.org/wikipedia/en/wiki/David_Cheriton,[object Object],2,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-2-2048.jpg?cb=1665185748)
![Categorization,[object Object],3,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-3-2048.jpg?cb=1665185748)
![Optimize performance?,[object Object], More sales ,[object Object], Less bandwidth & server peaks ,[object Object], Customer satisfaction ,[object Object], Might influence rankings ,[object Object],Competitive advantage,[object Object],Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html,[object Object],4,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-4-2048.jpg?cb=1665185748)
![“…optimize front-end performance first, that's where 80% or more of the end-user response time is spent” ,[object Object],Prof. Steve Souders,[object Object],Source: http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/,[object Object],http://www.flickr.com/photos/seanosh/2782339349/,[object Object],5,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-5-2048.jpg?cb=1665185748)
![Effective measures?,[object Object], Website performance optimization should be aligned with the ,[object Object], service / website / target audience you work with.,[object Object], Focus areas could be:,[object Object], Image optimization & compression,[object Object], JS performance (asynchronous, cached),[object Object], Reduction of DOM elements ,[object Object], Teaching customers and employees!,[object Object],6,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-6-2048.jpg?cb=1665185748)
![Combined Scripts,[object Object], Server-sided combination,[object Object], Avoid @import for combining,[object Object], JS tool: HEADjshttp://headjs.com/,[object Object],7,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-7-2048.jpg?cb=1665185748)
![CSS Performance,[object Object], Reuse of round corners and ,[object Object], shadow classes font-faces instead of pictures,[object Object], CSS-Sprites,[object Object], Universal > tags > classes > IDs,[object Object],Source: http://www.alsacreations.com/xmedia/doc/full/sprites-big-sites.png,[object Object],https://developer.mozilla.org/en/Writing_Efficient_CSS,[object Object],8,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-8-2048.jpg?cb=1665185748)
![Postponed Loading,[object Object], Use of GET with AJAX,[object Object], Google Instant takessnapshots 5-10s after onLoadevent? http://b0i.de/seomofo,[object Object],Tools: ,[object Object],ContolJShttp://stevesouders.com/controljs/,[object Object],ImageLoaderhttp://developer.yahoo.com/yui/imageloader/,[object Object],LazyLoadhttp://plugins.jquery.com/project/lazyload/,[object Object],Source: http://developer.yahoo.com/performance/rules.html,[object Object],9,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-9-2048.jpg?cb=1665185748)
![Event handlers, components,XHRs,[object Object],User interaction, XHRs,[object Object],backend,[object Object],components,[object Object],request,[object Object],Site loaded,[object Object],HTML sent,[object Object],request,[object Object],onload,[object Object],5-10s,[object Object],Google Instant Snapshot,[object Object],Modifiedimage from High Performance Web Pages | Stoyan Stefanov | Yahoo! Exceptional Performance | PHP Quebec, March 13, 2008,[object Object],Source: http://b0i.de/seomofo,[object Object],10,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-10-2048.jpg?cb=1665185748)
![DNS Lookups & Redirections,[object Object], Avoid 301 redirections (e.g. in HTML),[object Object], http://www.bonoseo.com/ != http://www.bonoseo.com,[object Object], usage of not morethan2-5 different,[object Object],domains on average,[object Object], better: domain-aliases for parallel downloadshttp://images.bonoseo.com || http://www.bonoseo.com,[object Object], cookielessdomainsforstaticcontent,[object Object],Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4/,[object Object],11,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-11-2048.jpg?cb=1665185748)
![Content Delivery Network,[object Object],Geographical distribution,[object Object], Minimizes DNS-Lookups ,[object Object], Optimized caching und uptime,[object Object], (by dynamic DNS resolving),[object Object],Source: http://www.flickr.com/photos/andybeatty/5247263940/,[object Object],12,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-12-2048.jpg?cb=1665185748)
![Image Compression,[object Object], UseSmush.it,[object Object], Progressive JPEG,[object Object],baseline,[object Object], progressive,[object Object],Source: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/,[object Object],13,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-13-2048.jpg?cb=1665185748)
![Vector Graphics,[object Object], Canvas Elemente with HTML5,[object Object],Ai->Canvashttp://visitmix.com/labs/ai2canvas/,[object Object],Progressive JPEG 13,3 kB -> HTML5 2,38 kB,[object Object],Saved: 82%,[object Object],14,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-14-2048.jpg?cb=1665185748)
![Shape the DOM Tree,[object Object], <h1><em>Heading</em></h1> - useCSS‘sitalicsinstead,[object Object], Tool: DOM-Monsterhttp://mir.aculo.us/dom-monster/,[object Object], Avoid iFrames,[object Object],15,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-15-2048.jpg?cb=1665185748)
![Chunking,[object Object], flushfunction,[object Object],Source: http://www.phpied.com/progressive-rendering-via-multiple-flushes/,[object Object],http://stevesouders.com/docs/velocity-20090622.ppt,[object Object],16,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-16-2048.jpg?cb=1665185748)
![Performance Test Tools,[object Object],Loads.inwww.loads.in,[object Object],Slow Copwww.slowcop.com,[object Object],Show Slowwww.showslow.com,[object Object],Webpagetest www.webpagetest.org,[object Object], Browser based,[object Object],Speedtracerhttp://b0i.de/speedtracer,[object Object],YslowFireBughttp://b0i.de/yslow,[object Object],More tools: http://code.google.com/speed/tools.html,[object Object],17,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-17-2048.jpg?cb=1665185748)
![Competition Analysis,[object Object], Possible performance profiles (by Souders & students),[object Object],http://b0i.de/profile,[object Object], Simple linear regression analysis,[object Object],Wolfram Alpha: linear fit {1, 87},{2, 77},{3, 95},{4, 68},[object Object],http://b0i.de/wolfreg,[object Object],18,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-18-2048.jpg?cb=1665185748)
![Pareto Rule 80/20,[object Object],Optimizationneeds time!,[object Object],Lessons learned: Concentrate on biggestchunks,[object Object],Source: JavaScript: The Good Parts - Part Six: Ajax Performance | Douglas Crockford,[object Object],19,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-19-2048.jpg?cb=1665185748)
![Questions? Discuss!,[object Object],Let’s be friends ,[object Object],Twitter: BONOSEO,[object Object],Facebook: kaczmarek.mariusz,[object Object],Ssssshh… SouderSlides from Stanford: http://b0i.de/souderslides,[object Object],20,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-20-2048.jpg?cb=1665185748)
![Statistics 2010,[object Object],Additional,[object Object], Average website size: 320 kB,[object Object], Compression is possible for 2/3 of overall data,[object Object], 80% of content is loaded from one host,[object Object],Source: Statisticnumbers from 4.2 billionsiteshttp://code.google.com/speed/articles/web-metrics.html,[object Object],21,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-21-2048.jpg?cb=1665185748)
![Inline Images,[object Object], Base 64 encoding,[object Object], Great forsmallstaticimages,[object Object],Additional,[object Object],Works until IE7,[object Object], Browser switch!,[object Object],22,[object Object],Source: http://9gag.com/gag/76585,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-22-2048.jpg?cb=1665185748)
![JavaScript Performance,[object Object],Additional,[object Object], Tools: ,[object Object],http://dean.edwards.name/packer/,[object Object],http://developer.yahoo.com/yui/compressor/,[object Object], DRY and OO approach,[object Object],Seconds per 10 million operations,[object Object],Source: Besser PHP Programmieren – Professionelle PHP-Techniken | Carsten Möhrke,[object Object],23,[object Object]](https://image.slidesharecdn.com/webperformanceoptimizationeng-110313163800-phpapp01/75/web-performance-optimization-wpo-23-2048.jpg?cb=1665185748)
Web performance optimization (WPO)
•26 likes•13,550 views
Report
Share
Download to read offline
A presentation from SEO Campixx Barcamp 2011 in Berlin. Web Performance Optimization is about making websites faster. Here i discussed different measures and show the impact on competitive advantage and possibly rankings on Google. Undeniably you can say that better performance leads to more sales and better usability in terms of bouncing rates. View image slides here: http://b0i.de/wpopresentation
![Client-side Web Performance Optimization [paper]](https://cdn.slidesharecdn.com/ss_thumbnails/2011-01-18jakob-schroeterclient-side-optimization-110125033543-phpapp02-thumbnail.jpg?width=384&fit=bounds)
