Schnelle Webseiten - Die Basis zum Erfolg

810 views

Published on

Vortrag beim LinuxDay 2012 in Dornbirn.

Referent: Martin Keckeis


Schnelle Ladezeiten von Webseiten/Applikationen werden immer wichtiger. Besonders mit dem Beginn der mobilen Endgeräte hat sich die Lage im Web verschärft, da die Bandbreiten um vielfaches kleiner sind als beim klassischen PC.

Wenn Ihre Webseite langsam lädt, sind ihre Besucher nicht nur unzufrieden, sondern werden auch nicht mehr so schnell wieder kommen.

Ich zeige Ihnen, wie man mit bereits einfachen Tricks sehr viel Geschwindigkeit aus einer Webseite rausholen kann. Dazu stelle ich diverse Tools vor, mit denen einfach Optimierungspotenzial aufgezeigt werden kann.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
810
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Schnelle Webseiten - Die Basis zum Erfolg

  1. 1. Schnelle Webseiten Die 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. 2. Über mich  Name: Martin Keckeis  Matura HTL Dornbirn (Betriebsinformatik)  Seit 2009 Softwareentwickler  Internet/Intranet Webapplikation  Seit 2010 bei ThyssenKrupp Presta tätig  Sonstiges  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. 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. 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. 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% benötigte 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. 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. 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. 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. 9. Wie wird eine Webseite überhaupt geladen? Schritt 3  Was 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. 10. Wo geht die Zeit verloren? Client Seite Server Seite 80-90% 10-20%Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering10 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
  11. 11. Was für Faktoren beeinflussen die Geschwindigkeit?  Client Seite (Beispiele)  Hardware des Client  HTTP Client (Browser)  Netzwerkanbindung  DNS Lookup  Inhalt der Webseite  Server 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 Steering11 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
  12. 12. Webserver KonfigurationWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering12 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
  13. 13. Webserver - Konfiguration Keep-Alive aktivieren  TCP/IP Verbindungsaufbau ist teuer  Ohne Keep-Alive (bei jedem Request)  Syn  Syn + Ack  Ack + Request  Mit Keep-Alive  Ack + Request  Vorsicht: Verbindung auf dem Webserver wird für diesen Zeitraum “reserviert”Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering13 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
  14. 14. Webserver - Konfiguration Komprimierung aktivieren  Übertragungsgröße wird VIEL geringer  ca. 60-90% sind möglich  HTML, CSS, JS, XML, JSON, …sind möglich  Bilder machen keinen Sinn!  Apache EinstellungenWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering14 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
  15. 15. Webserver - Konfiguration Cache Header setzen  Vorsicht: 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 Steering15 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
  16. 16. Inhalt der Webseite AllgemeinWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering16 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
  17. 17. Inhalt der Webseite - Allgemein “Pre” Komprimierung von JS/CSS  Alles was nicht für die Ausführung benötigt wird, wird entfernt!  Kommentare, Leerzeichen, Tabs, Umbrüche, …  Lange Variablen werde gekürzt  …  ~ 50-80% Einsparung der Dateigröße  Wichtig bei Mobilen Geräten, da die Cache limitierung ohne GZIP gemossen wird  Beispiel: http://refresh-sf.com/yui/Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering17 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
  18. 18. Inhalt der Webseite - Allgemein Weniger HTTP Requests  CSS/JS Dateien miteinander verbinden  Bilder in Sprites verbinden  Besonders Icons und kleine Background images  In CSS per “background-position” auswählbar  Serverseitig lösbarWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering18 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
  19. 19. Inhalt der Webseite - Allgemein CDN verwenden “Content delivery network”  Server wird entlastet  Mehr parallele Downloads möglich  Bei Weltweiten Zugriffen sehr wichtig  Beispiel: Google Javascript CDN mit FallbackWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering19 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
  20. 20. Inhalt der Webseite HTMLWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering20 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
  21. 21. Inhalt der Webseite - HTML Valides HTML ausliefern  “Quirks-Modus” beim Browser verhindern  Performance  Darstellungs “Folgefehler”  Check: http://validator.w3.org/Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering21 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
  22. 22. Inhalt der Webseite - HTML “Flush early, flush often”  Browser kann Teile bereits darstellen – sogenannte “chunks” ausliefern  Andere Dateien können bereits geladen werden  Vorsicht: Header können nachher nicht mehr geändert werden!Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering22 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
  23. 23. Inhalt der Webseite - HTML HTML 5 verwenden  Was ist besser?  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN« "http://www.w3.org/TR/html4/strict.dtd">  <!DOCTYPE html>  90 Zeichen / 15 Zeichen  Standardmodus sogar beim Internet Explorer 6  Check: http://html5test.comWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering23 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
  24. 24. Inhalt der Webseite - HTML Nur benötigte Elemente ausliefern  Leerzeichen, Tabs und Umbrüche entfernen  Kommentare entfernen  Z.B: HTMLTidyWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering24 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
  25. 25. Inhalt der Webseite - HTML Weniger Elemente, weniger Verschachtelung  Je mehr Ebenen und Elemente desto  Größer ist die Seite = mehr Ladezeit  Länger dauern Javascript DOM Zugriffe = schlechte Client Performance  Tabellen Designs durch <div> ersetzen  Aber bitte keine <div> Suppen basteln…  Browser “fixes” nicht mit zusätzlichen HTML Elemente lösen  Conditional CSS  Nach Möglichkeit nicht darum kümmern (außer neueste Generation)Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering25 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
  26. 26. Inhalt der Webseite CSSWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering26 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
  27. 27. Inhalt der Webseite - CSS CSS möglichst früh laden  CSS Blockiert den Aufbau NICHT  Kann parallel geladen werden  Besonders gut, wenn früh ein Teil der Seite geliefert wird (flush)Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering27 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
  28. 28. Inhalt der Webseite - CSS Keine CSS Expressions  background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );  Kann mehrere 1000 mal ausgeführt 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 Steering28 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
  29. 29. Inhalt der Webseite JavascriptWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering29 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
  30. 30. Inhalt der Webseite - Javascript Erst am Ende laden  Javascript blockiert das weitere darstellen der Webseite  Es kann immer nur eine Datei geladen werden  “Non-Blocking” alternative  Alternative: http://headjs.com/  Oder ala Google AnalyticsWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering30 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
  31. 31. Inhalt der Webseite - Javascript Kein Inline Javascript verwenden  Caching wird unmöglich/schwierig  HTML wird unnötig groß  Mehrere Blöcke = mehrfach “blocking-mode” beim ausführen  Ein inline Block ist noch ok  Keiner wäre natürlich besserWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering31 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
  32. 32. Inhalt der Webseite - Javascript Natives Javscript verwenden, wenn möglich  jQuery und co. machen vieles unnötig langsamer  Siehe: http://vanilla-js.com/ (ein kleine “Satire” zum JS-Library Hype)Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering32 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
  33. 33. Best practices von Yahoo 1) Make fewer HTTP Requests Quelle: 2) Use a CDN http://developer.yahoo.com/performance/rules.html 3) Add expire or cache-control header 4) Gzip components 5) Put stylesheets at top 6) Put javascript at bottom 7) Avoid CSS expressions 8) Make javascript and CSS external 9) Reduce DNS lookups 10) Minify javascript and CSS 11) Avoid redirects 12) Remove duplicate scripts 13) Configure Etags 14) Make AJAX cacheable 15) Flush buffer early 16) Use GET for Ajax Requests 17) Postload ComponentsWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering33 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
  34. 34. Best practices von Yahoo 18) Preload Components 19) Reduce the number of DOM elements 20) Split components across domains 21) Minimize number of iframes 22) Avoid 404s 23) Reduce cookie size 24) Use cookie-free domains for components 25) Minimize DOM access 26) Develop smart event handlers 27) Choose <link> over @import 28) Avoid filters 29) Optimize images 30) Optimize CSS sprites 31) Do not scale images in HTML 32) Make favicon.ico small and cacheable 33) Keep components under 25kB 34) Pack components into a multipart document 35) Avoid empty image srcWebseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering34 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
  35. 35. Tipps und Tools  Best 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 fähig)  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 Steering35 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
  36. 36. Ende Fragen? Beispiel Webseiten?Webseiten Performance24.11.2012LinuxDay Dornbirn, Martin Keckeis Presta Steering36 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

×