Schnelle Webseiten - Die Basis zum Erfolg

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

Ü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

Warum ist Geschwindigkeit wichtig?

Hohe Ladezeiten
=
Unzufriedene Besucher
=
Weniger wiederkehrende Besucher
=
Weniger Seitenaufrufe
=
Kein Erfolg!

24.11.2012

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

24.11.2012

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

24.11.2012

Wie wird eine Webseite überhaupt geladen?

24.11.2012


24.11.2012

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

24.11.2012

Wo geht die Zeit verloren?

Client Seite Server Seite
80-90% 10-20%

24.11.2012

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

24.11.2012

Webserver
Konfiguration

24.11.2012

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”

24.11.2012


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

24.11.2012


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:

24.11.2012

Inhalt der Webseite
Allgemein

24.11.2012

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/

24.11.2012


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

24.11.2012


CDN verwenden
“Content delivery network”

 Server wird entlastet
 Mehr parallele Downloads möglich
 Bei Weltweiten Zugriffen sehr wichtig
 Beispiel: Google Javascript CDN mit Fallback

24.11.2012

Inhalt der Webseite
HTML

24.11.2012

Inhalt der Webseite - HTML

Valides HTML ausliefern

 “Quirks-Modus” beim Browser verhindern
 Performance
 Darstellungs “Folgefehler”

 Check: http://validator.w3.org/

24.11.2012


“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!

24.11.2012


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

24.11.2012


Nur benötigte Elemente ausliefern

 Leerzeichen, Tabs und Umbrüche entfernen
 Kommentare entfernen

 Z.B: HTMLTidy

24.11.2012


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)

24.11.2012

Inhalt der Webseite
CSS

24.11.2012

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)

24.11.2012

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

24.11.2012

Inhalt der Webseite
Javascript

24.11.2012

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

24.11.2012


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

24.11.2012


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)

24.11.2012

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

24.11.2012

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

24.11.2012

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

24.11.2012

Ende

Fragen?
Beispiel Webseiten?

24.11.2012

Schnelle Webseiten - Die Basis zum Erfolg

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Schnelle Webseiten - Die Basis zum Erfolg