1. Schnelle WebseitenDie Basis zum Erfolg Martin Keckeis Dornbirn, 24.11.2012 Presta Steering ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential

2. ber michName: Martin KeckeisMatura HTL Dornbirn (Betriebsinformatik)Seit 2009 Softwareentwickler Internet/Intranet WebapplikationSeit 2010 bei ThyssenKrupp Presta ttigSonstiges Musikverein Snowboarden und spiele seit neuestem Paintball Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering2 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 3. Warum ist Geschwindigkeit wichtig? Hohe Ladezeiten =Unzufriedene Besucher = Weniger wiederkehrende Besucher =Weniger Seitenaufrufe =Kein Erfolg!Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering3 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 4. Die negativen Folgen hoher Ladezeiten+ 100ms bei Amazon? - 1% Umsatz+ 400ms bei Google? - 0,59% Suchanfragen pro Benutzer+ 400ms bei Yahoo? - 5-10% Traffic+ 2s bei Bing? - 4,3% Umsatz pro Benutzer Quelle: Martin Kliehm, http://de.slideshare.net/kliehm/performancewmfraWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering4 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 5. Die positiven Folgen schneller Ladezeiten- 2,2s Ladezeit bei Mozilla (Webseite) + 15,4% Downloads-30% Dateivolumen bei Google Maps + 30% Aufrufe-5s Ladezeit bei shopzilla + 25% Seitenaufrufe - 50% bentigte Server Quelle: Martin Kliehm, http://de.slideshare.net/kliehm/performancewmfraWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering5 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 6. Wie wird eine Webseite berhaupt geladen?Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering6 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 7. Wie wird eine Webseite berhaupt geladen?Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering7 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 8. Wie wird eine Webseite berhaupt geladen?Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering8 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 9. Wie wird eine Webseite berhaupt geladen? Schritt 3Was passiert mit den Response Headern und dem Body (HTML)? Auflistung aller wichtigen Header: http://de.wikipedia.org/wiki/Liste_der_HTTP-HeaderfelderWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering9 ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 10. Wo geht die Zeit verloren?Client Seite Server Seite 80-90%10-20%Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering10ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 11. Was fr Faktoren beeinflussen die Geschwindigkeit?Client Seite (Beispiele) Hardware des Client HTTP Client (Browser) Netzwerkanbindung DNS Lookup Inhalt der WebseiteServer Seite (Beispiele) Hardware des Servers HTTP Server (Webserver) Generieren des HTML (PHP, asp.net, JAVA, Datenbanken, ) Ladezeit von statischen KomponentenWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering11ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 12. WebserverKonfigurationWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering12ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 13. Webserver - KonfigurationKeep-Alive aktivieren TCP/IP Verbindungsaufbau ist teuer Ohne Keep-Alive (bei jedem Request) Syn Syn + Ack Ack + Request Mit Keep-Alive Ack + RequestVorsicht: Verbindung auf dem Webserver wird fr diesen Zeitraum reserviertWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering13ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 14. Webserver - KonfigurationKomprimierung aktivierenbertragungsgre wird VIEL geringer ca. 60-90% sind mglichHTML, CSS, JS, XML, JSON, sind mglich Bilder machen keinen Sinn!Apache EinstellungenWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering14ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 15. Webserver - KonfigurationCache Header setzenVorsicht: Bringt beim ersten mal laden nichts! (Cache ist meistens leer) Weshalb Komprimierung so wichtig ist Bilder, CSS, JS, HTML Inhalt halb statisch Startseite, Impressum, Apache Einstellungen:Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering15ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 16. Inhalt der Webseite AllgemeinWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering16ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 17. Inhalt der Webseite - AllgemeinPre Komprimierung von JS/CSS Alles was nicht fr die Ausfhrung bentigt wird, wird entfernt! Kommentare, Leerzeichen, Tabs, Umbrche, Lange Variablen werde gekrzt ~ 50-80% Einsparung der DateigreWichtig bei Mobilen Gerten, da die Cache limitierung ohne GZIP gemossen wirdBeispiel: http://refresh-sf.com/yui/Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering17ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 18. Inhalt der Webseite - AllgemeinWeniger HTTP RequestsCSS/JS Dateien miteinander verbindenBilder in Sprites verbinden Besonders Icons und kleine Background images In CSS per background-position auswhlbarServerseitig lsbarWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering18ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 19. Inhalt der Webseite - AllgemeinCDN verwendenContent delivery network Server wird entlastet Mehr parallele Downloads mglich Bei Weltweiten Zugriffen sehr wichtig Beispiel: Google Javascript CDN mit FallbackWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering19ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 20. Inhalt der Webseite HTMLWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering20ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 21. Inhalt der Webseite - HTMLValides HTML ausliefernQuirks-Modus beim Browser verhindern Performance Darstellungs FolgefehlerCheck: http://validator.w3.org/Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering21ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 22. Inhalt der Webseite - HTMLFlush early, flush oftenBrowser kann Teile bereits darstellen sogenannte chunks ausliefernAndere Dateien knnen bereits geladen werdenVorsicht: Header knnen nachher nicht mehr gendert werden!Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering22ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 23. Inhalt der Webseite - HTMLHTML 5 verwendenWas ist besser? "http://www.w3.org/TR/html4/strict.dtd"> 90 Zeichen / 15 ZeichenStandardmodus sogar beim Internet Explorer 6Check: http://html5test.comWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering23ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 24. Inhalt der Webseite - HTMLNur bentigte Elemente ausliefernLeerzeichen, Tabs und Umbrche entfernenKommentare entfernenZ.B: HTMLTidyWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering24ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 25. Inhalt der Webseite - HTMLWeniger Elemente, weniger VerschachtelungJe mehr Ebenen und Elemente desto Grer ist die Seite = mehr Ladezeit Lnger dauern Javascript DOM Zugriffe = schlechte Client PerformanceTabellen Designs durch

ersetzen Aber bitte keine

Suppen bastelnBrowser fixes nicht mit zustzlichen HTML Elemente lsen Conditional CSS Nach Mglichkeit nicht darum kmmern (auer neueste Generation)Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering25ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 26. Inhalt der WebseiteCSSWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering26ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 27. Inhalt der Webseite - CSSCSS mglichst frh ladenCSS Blockiert den Aufbau NICHTKann parallel geladen werdenBesonders gut, wenn frh ein Teil der Seite geliefert wird (flush)Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering27ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 28. Inhalt der Webseite - CSSKeine CSS Expressionsbackground-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Kann mehrere 1000 mal ausgefhrt werden. Alleine schon wenn die Maus bewegt wird!Siehe: http://developer.yahoo.com/performance/rules.html#css_expressionsWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering28ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 29. Inhalt der WebseiteJavascriptWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering29ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 30. Inhalt der Webseite - JavascriptErst am Ende laden Javascript blockiert das weitere darstellen der Webseite Es kann immer nur eine Datei geladen werdenNon-Blocking alternative Alternative: http://headjs.com/ Oder ala Google AnalyticsWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering30ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 31. Inhalt der Webseite - JavascriptKein Inline Javascript verwenden Caching wird unmglich/schwierig HTML wird unntig gro Mehrere Blcke = mehrfach blocking-mode beim ausfhrenEin inline Block ist noch ok Keiner wre natrlich besserWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering31ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 32. Inhalt der Webseite - JavascriptNatives Javscript verwenden, wenn mglichjQuery und co. machen vieles unntig langsamerSiehe: http://vanilla-js.com/ (ein kleine Satire zum JS-Library Hype)Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering32ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 33. Best practices von Yahoo1) Make fewer HTTP Requests Quelle:2) Use a CDN http://developer.yahoo.com/performance/rules.html3) Add expire or cache-control header4) Gzip components5) Put stylesheets at top6) Put javascript at bottom7) Avoid CSS expressions8) Make javascript and CSS external9) Reduce DNS lookups10)Minify javascript and CSS11)Avoid redirects12)Remove duplicate scripts13)Configure Etags14)Make AJAX cacheable15)Flush buffer early16)Use GET for Ajax Requests17)Postload ComponentsWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering33ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 34. Best practices von Yahoo18)Preload Components19)Reduce the number of DOM elements20)Split components across domains21)Minimize number of iframes22)Avoid 404s23)Reduce cookie size24)Use cookie-free domains for components25)Minimize DOM access26)Develop smart event handlers27)Choose over @import28)Avoid filters29)Optimize images30)Optimize CSS sprites31)Do not scale images in HTML32)Make favicon.ico small and cacheable33)Keep components under 25kB34)Pack components into a multipart document35)Avoid empty image srcWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering34ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 35. Tipps und ToolsBest practices / Tipps http://html5boilerplate.com/ http://developer.yahoo.com/performance/rules.html https://developers.google.com/speed/pagespeed/?hl=de http://www.stevesouders.com/blog/Tools zur Messung und Analyse YSlow PageSpeed dynaTrace (AJAX fhig) Live HTTP Headers (Firefox)Tipp: Google, Amazon, Facebook, Twitter, ansehen und einfach lernen Quellcode / Headers / pre-Load bei Amazon / Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering35ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential 36. Ende Fragen? Beispiel Webseiten?Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering36ThyssenKrupp Chassis 2012 All rights reserved. Copying and distribution without the prior written approval of ThyssenKrupp Presta AG is expressly prohibited. Inventions capable of being protected are property of ThyssenKrupp Presta AG and are to be held confidential