High Performance Websites1 / 18 MBit
Harte Fakten 2 Website-Wachstum: Top 1000 Websites laut Alexa Quellen: http://video.yahoo.com/watch/4156174/11192533 http://www.websiteoptimization.com/speed/tweak/average-web-page/
Amazon, Yahoo, Google, Bing3 / 18 +100ms = -1% Einkäufe Quelle: http://home.blarg.net/~glinden/stanforddatamining.2006-11-29.ppt +400ms = -9% User (FullPageLoad) Quelle: http://www.slideshare.net/stoyan/yslow-20-presentation + +500ms = -20% Suchanfragen Quelle: http://assets.en.oreilly.com/1/event/29/the%20user%20and%20business%20impact%20of %20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web %20Search%20Presentation.pptx
Shopzilla 4 Vorher / Nachher-Show bei Shopzilla Ladezeit (Sek.) Vorher / Nachher Conversion-Rate (%) Vorher / Nachher Quelle: http://assets.en.oreilly.com/1/event/29/shopzilla%27s%20site%20redo%20-%20you%20get%20what%20you %20Measure%20Presentation.ppt
Fazit 5 1. Bessere PageResponseTime = Mehr Traffic Siehe http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html 2. Bessere PageResponseTime = Mehr Vertrauen Siehe http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Optimierung: GZip 6 GZipping von: - HTML - Javascript - CSS - XML (RSS/Atom) = Bis zu 50% Zeitgewinn bis FullPageLoad Messung an den Top 10 Websites laut Alexa Quelle: http://assets.en.oreilly.com/1/event/29/beyond%20gzipping%20presentation.pdf GZipping HowTo: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/ Testcases GZippiing ON / OFF: http://stevesouders.com/hpws/rule-gzip.php
Optimierung: HTTP-Requests7 / 18 HTTP-Requests reduzieren: - Reminder: mehr als 60 Objekte - Browser-Limits: FF2 & IE6+7 = 2, Safari = 4, FF3 & IE8 & Chrome = 6, Opera = 8 - Unveränderter Apache-Webserver = 256 - JS / CSS Files vereinen, aber extern lassen - Downgrade auf HTTP1.0 für Static Content Quellen: http://kb.mozillazine.org/network.http.max-persistent-connections-per-server http://assets.en.oreilly.com/1/event/29/website%20performance%20analysis%20presentation.ppt http://developer.yahoo.com/performance/rules.html#num_http
Optimierung: Expire-Header8 / 18 Expire Header setzen: - Für Static Content: Expire Header weit in Zukunft; nur Dynamic Content reloaden - User-Cache = Performance Freebies Quelle: http://developer.yahoo.com/performance/rules.html#expires
Optimierung: CDN 9 Content Delivery Network: - 1 Domain für Static Content JS, CSS, HTML (HTTP1.0) - 1 Domain für Images (HTTP1.0) - 1 Domain für Dynamic Content (HTTP1.1) Quellen: http://assets.en.oreilly.com/1/event/29/getting%20to%20second%20base %20With%20Your%20CDN%20Presentation.ppt http://assets.en.oreilly.com/1/event/29/website%20performance%20analysis %20Presentation.ppt
Optimierung: Above the Fold10 Above the Fold (AtF): - Möglichst schnell befüllen! - Userwahrnehmung: 18% schneller - TimeToClick: 10% schneller! 78% aller User scrollen nicht bis zum Website-Ende Quellen: http://assets.en.oreilly.com/1/event/29/the%20user%20and%20business%20impact %20of%20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking %20in%20Web%20Search%20Presentation.pptx http://blog.clicktale.com/?p=19
Optimierung: AtF - HTML 11 HTML-Grundgerüst: - Lego-Klötze - Grids lieben lernen - Wahrscheinlichste Interaktionselemente nach oben Quelle: http://www.slideshare.net/stubbornella/designing-fast-websites-presentation
Optimierung: AtF - CSS 12 CSS-Performance: - Selectors: ID & CLASS = Gut * & > & CSS3 = Böse - Modulares CSS: Classes für mehrmals benutzte Style-Elemente - JS-Expressions in CSS = Böse Bsp: expression(document.body.clientwidth > 1100)? "1100px" : "auto"; - @import 2x vermeiden - CSS kombinieren & minifyen Quellen: http://stevesouders.com/tests/atimport/import-import.php http://shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942
Optimierung: AtF - Javascript13 Besseres Javascript: - Von Kopf zum Fuß <script defer src="http://www.foobar23.org/js/scripts.js" type="text/javascript"></script> </body> - "defer" nutzen - JS minifyen - Apache-Modul modjsmin - Z.B. "navi.js" per AJAX Quellen: http://www.websiteoptimization.com/speed/tweak/defer/ http://assets.en.oreilly.com/1/event/29/website%20performance %20Analysis%20Presentation.ppt
Optimierung: AtF - Grafiken 14 Bildoptimierungen: - Großes Potential - Manuell: PS / GIMP - Halbautomatisch: Smush.it - Serverseitig mit Caching: moddims - CSS-Sprites nutzen Quellen: http://assets.en.oreilly.com/1/event/29/the%20secret%20weapons%20of%20the %20AOL%20Optimization%20Team%20Presentation.pdf http://www.stevesouders.com/spriteme/
Optimierung: AtF - Flushing 15 Frühes Flushing / Chunking: - Statische Elemente früher ausliefern - Rechenintensiveren Operationen Zeit verschaffen - Progressives Rendering der Website => Besseres Interaktionsgefühl Quelle: http://www.stevesouders.com/blog/2009/05/18/flushing-the-document-early/
Optimierung: AtF - Reflows 16 Repaints & Reflows: http://www.youtube.com/watch?v=akz2fj8155i - Repaint: Visibility-Check im DOM Auslöser: 'outline', 'visibility', 'background-color' - Reflow: Positionierungscheck im DOM Auslöser: WindowSize, Fonts, display, padding, margin, position, top, left, +/- Stylesheet, DOM-Changes ('innerhtml','appendchild'), AJAX, Bild oder Video ohne Größenangaben - JS nicht für inline-styles nutzen - Animierte Objekte nur mit position:absolute/fixed - Tabellen vermeiden Quelle: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
Tools of the Trade 17 Yslow (Firebug) http://developer.yahoo.com/yslow/ PageSpeed http://code.google.com/p/page-speed/ SpriteMe! http://www.stevesouders.com/spriteme/ Paint-Events (Bookmarklet) http://ejohn.org/blog/browser-paint-events/ Cuzillion http://stevesouders.com/cuzillion/help.php UA-Profiler http://stevesouders.com/ua/ Smush.it Früher Web-App - Jetzt Teil von YSlow Hammerhead (Firebug) http://stevesouders.com/hammerhead/ Episodes http://stevesouders.com/episodes/ Paint-Events (Firebug) https://addons.mozilla.org/en-us/firefox/addon/9620 V8 http://v8.googlecode.com/svn/data/benchmarks/v5/run.html Dromaeo http://dromaeo.com/ SunSpider http://www2.webkit.org/perf/sunspider-0.9/sunspider.html SlickSpeed http://www2.webkit.org/perf/slickspeed/
Get Speedin'! 18 Danke für Eure Aufmerksamkeit! http://www.tobias-baldauf.de/ kontakt@tobias-baldauf.de