The document outlines various strategies for optimizing website performance, emphasizing the significance of speed for user satisfaction and competitive advantage. Key suggestions include front-end optimizations, image compression, efficient CSS usage, and reducing server load through methods like combined scripts and content delivery networks. It also touches on the importance of performance testing tools and ongoing analysis to ensure continued effectiveness in optimization efforts.

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

3. Categorization3

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/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.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 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 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

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

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/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