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

1. Website Performance Optimization Mariusz 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 Cheriton Source: http://blogs.msdn.com/b/edglas/archive/2009/01/02/make-your-performance-work-count-the-20-rule.aspx https://secure.wikimedia.org/wikipedia/en/wiki/David_Cheriton 2

3. Categorization 3

4. Optimize performance? More sales  Less bandwidth & server peaks  Customer satisfaction  Might influence rankings  Competitive advantage Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html 4

5. “…optimize front-end performance first, that's where 80% or more of the end-user response time is spent” Prof. Steve Souders Source: 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 > IDs Source: http://www.alsacreations.com/xmedia/doc/full/sprites-big-sites.png https://developer.mozilla.org/en/Writing_Efficient_CSS 8

9. Postponed Loading Use of GET with AJAX Google Instant takessnapshots 5-10s after onLoadevent? http://b0i.de/seomofo Tools: ContolJShttp://stevesouders.com/controljs/ ImageLoaderhttp://developer.yahoo.com/yui/imageloader/ LazyLoadhttp://plugins.jquery.com/project/lazyload/ Source: http://developer.yahoo.com/performance/rules.html 9

10. Event handlers, components,XHRs User interaction, XHRs backend components request Site loaded HTML sent request onload 5-10s Google Instant Snapshot Modifiedimage from High Performance Web Pages | Stoyan Stefanov | Yahoo! Exceptional Performance | PHP Quebec, March 13, 2008 Source: http://b0i.de/seomofo 10

11. DNS Lookups & Redirections Avoid 301 redirections (e.g. in HTML) http://www.bonoseo.com/ != http://www.bonoseo.com usage of not morethan2-5 different domains on average better: domain-aliases for parallel downloadshttp://images.bonoseo.com || http://www.bonoseo.com cookielessdomainsforstaticcontent Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ 11

12. Content Delivery Network Geographical 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 JPEG baseline progressive Source: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/ 13

14. Vector Graphics  Canvas Elemente with HTML5 Ai->Canvashttp://visitmix.com/labs/ai2canvas/ Progressive JPEG 13,3 kB -> HTML5 2,38 kB Saved: 82% 14

15. Shape the DOM Tree <h1><em>Heading</em></h1> - useCSS‘sitalicsinstead  Tool: DOM-Monsterhttp://mir.aculo.us/dom-monster/  Avoid iFrames 15

16. Chunking  flushfunction Source: http://www.phpied.com/progressive-rendering-via-multiple-flushes/ http://stevesouders.com/docs/velocity-20090622.ppt 16

17. Performance Test Tools Loads.inwww.loads.in Slow Copwww.slowcop.com Show Slowwww.showslow.com Webpagetest www.webpagetest.org Browser based Speedtracerhttp://b0i.de/speedtracer YslowFireBughttp://b0i.de/yslow More tools: http://code.google.com/speed/tools.html 17

18. Competition Analysis Possible performance profiles (by Souders & students) http://b0i.de/profile Simple linear regression analysis Wolfram Alpha: linear fit {1, 87},{2, 77},{3, 95},{4, 68} http://b0i.de/wolfreg 18

19. Pareto Rule 80/20 Optimizationneeds time! Lessons learned: Concentrate on biggestchunks Source: JavaScript: The Good Parts - Part Six: Ajax Performance | Douglas Crockford 19

20. Questions? Discuss! Let’s be friends  Twitter: BONOSEO Facebook: kaczmarek.mariusz Ssssshh… SouderSlides from Stanford: http://b0i.de/souderslides 20

21. Statistics 2010 Additional Average website size: 320 kB Compression is possible for 2/3 of overall data 80% of content is loaded from one host Source: Statisticnumbers from 4.2 billionsiteshttp://code.google.com/speed/articles/web-metrics.html 21

22. Inline Images Base 64 encoding Great forsmallstaticimages Additional Works until IE7  Browser switch! 22 Source: http://9gag.com/gag/76585

23. JavaScript Performance Additional Tools: http://dean.edwards.name/packer/ http://developer.yahoo.com/yui/compressor/ DRY and OO approach Seconds per 10 million operations Source: Besser PHP Programmieren – Professionelle PHP-Techniken | Carsten Möhrke 23