Diese Präsentation wurde erfolgreich gemeldet.

Schnelle Webseiten - Die Basis zum Erfolg

0

Teilen

Nächste SlideShare
Why websecurity sucks
Why websecurity sucks
Wird geladen in …3
×
1 von 36
1 von 36

Schnelle Webseiten - Die Basis zum Erfolg

0

Teilen

Herunterladen, um offline zu lesen

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.

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.

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 2 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 3 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/performancewmfra Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 4 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/performancewmfra Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 5 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 6 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 7 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 8 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-Headerfelder Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 9 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 10 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 Komponenten Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 11 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 Konfiguration Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 12 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 13 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 Einstellungen Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 14 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 15 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 Allgemein Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 16 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 17 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ösbar Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 18 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 Fallback Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 19 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 HTML Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 20 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 21 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 22 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.com Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 23 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: HTMLTidy Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 24 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 25 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 CSS Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 26 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 27 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_expressions Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 28 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 Javascript Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 29 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 Analytics Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 30 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 besser Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 31 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 32 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 Components Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 33 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 src Webseiten Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 34 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 35 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 Performance 24.11.2012 LinuxDay Dornbirn, Martin Keckeis Presta Steering 36 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

×