Kai Greinke
Ladezeiten verbessern
page load time
CSS und JavaScript komprimieren
tacho 3d © vege – Fotolia.com
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Auf die Plätze …, Fertig …
URL eingeben ENTER Warten
Was passiert in der Zeit
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Was passiert in der Zeit …
Browser Webserver
Browser fordert Seite an
GET / HTTP/1.1
1 KByte Server stellt Seite bereit
/…/index.html
Browser verarbeitet Inhalte, fordert weitere Dateien an, rendert die Seite und zeigt sie an.
32 KByte
Server sendet Seite
HTTP/1.0 200 OK
Date: Fri, 15 Jun 2009 16:04:22 GMTContent-Language: deContent-Type: text/html;charset=utf-8
<HTML>…</HTML>
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Browser verarbeitet Inhalte …
<title> gesetzt und favicon dargestellt
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Browser verarbeitet Inhalte …
Es folgen die JavaScript Dateien im Quellcode… der Browser fordert die Dateien sofort an …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Browser verarbeitet Inhalte …
Dann kommen die CSS Dateien… der Browser fordert auch diese an …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Browser verarbeitet Inhalte …
Der <body> beginnt… der Browser könnte loslegen …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Wie viel Zeit ist verstrichen?
Quelle: www.webpagetest.org
Der Browser könnte loslegen,wenn schon alle Dateien da wären!
Werkzeuge für die Analyse
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Online Tools
z. B.
www.webpagetest.org
Werkzeuge für die Analyse
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Werkzeuge für die Analyse
Firefox Add-on
Firebug
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Werkzeuge für die Analyse
Firefox Add-on
YSlow
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Werkzeuge für die Analyse
Google Page
Speed
Add-On für den Firefox
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Werkzeuge für die Analyse
Sniffer
z. B.
Wireshark
Analysieren der Inhalte
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Wo kann man optimieren?
Nach 6 Sekunden beginnt der Browser die Seite zu rendern (letzt CSS / JS Datei).
Nach 11,8 Sekunden ist die Seite fertig geladen.
Test mit einer 1.5 Mbit/s aDSL Leitung in den USA … Erster Aufruf
Quelle: www.webpagetest.org
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Analysieren der Inhalte
BROWSER … WARTET
HTML CSS JavaScript
BROWSER … RENDERT
Bilder (in- und extern) Audio / Video RSS (fremde Inhalte)
<img src=“images/bild.jpg“ width=“100“ height=“
Möglichkeiten beim CSS
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Beispiel für die CSS Komprimierung
.button { border-left-width: 6px; border-left-style: solid; border-left-color: rgb(153,153,153); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(153,153,153);}
216
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Verkürzte Schreibweise nutzen
.button { border-left-width: 6px; border-left-style: solid; border-left-color: rgb(153,153,153); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(153,153,153);}
.button { border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}
216
106
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
HEX- statt RGB-Notation
.button { border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}
.button { border-left: 6px solid #999999; border-bottom: 2px solid #999999;}
88
106
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Verkürzte Schreibweise (Farben)
.button { border-left: 6px solid #999999; border-bottom: 2px solid #999999;}
.button { border-left: 6px solid #999; border-bottom: 2px solid #999;}
88
82
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Zeilenumbrüche & Leerzeichen
.button { border-left: 6px solid #999; border-bottom: 2px solid #999;}
.button{border-left: 6px solid #999;border-bottom: 2px solid #999}
82
66
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Vorher Nachher
.button { border-left-width: 6px; border-left-style: solid; border-left-color: rgb(153,153,153); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(153,153,153);}
216
.button{border-left: 6px solid #999;border-bottom: 2px solid #999}
66
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Online Tools (compressor.ebiene.de)
177
.button{border-left-width:6px;border-left-style: solid;border-left-color:rgb(153,153,153);border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:rgb(153,153,153);}
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
YUI Compressor
.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999;}
153
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Free CSS Toolbox
.button{border-bottom-color:#999;border-bottom-style:solid;border-bottom-width:2px;border-left-color:#999;border-left-style:solid;border-left-width:6px}
152
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Pingates CSS Compressor (tools.pingates.com)
.button{border-left:2px solid #999;border-bottom:6px solid #999}
66
JavaScript komprimieren
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Das JavaScript Framework „mootools“ hat ca. 72 KByte
Kann man „mootools.js“ komprimieren?
Werden die „mootools.js“ überhaupt benötigt?
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools komprimieren?
179 KByte
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools komprimieren…
179 kByte JavaScript Minifier 72 kByte nachher
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools komprimieren…
179 kByte YUI Compressor 63 kByte nachher
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools - YUI statt JSMin
63 kByte 72 kByte
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools deaktivieren
In der index.php des Templates direkt nach <head>
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Ladezeit ohne caption.js und mootools.js
Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden
fertig geladen.
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Nochmals zumVergleichmit und ohne mootools
Weitere Optimierungen
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Korrekte Reihenfolge von CSS und JavaScript Dateien
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Deklaration von JavaScript Funktionen
Der Aufruf der Funktion kann vor oder nach der Deklaration der Funktion sein.Probleme (z. B. mit Simple Mooticker) wenn mootools erst zum Schluss geladen werden.
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Probleme beim sofortigen ausführen von Skripten
Werden Funktionen nicht über Ereignisse, sondern direkt im Quelltext aufgerufen, so muss die Funktion vorher deklariert worden sein.
Daher werden manche Erweiterungen laufen und manche nicht.
Testen, testen, testen …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
CSS- und JavaScript-Dateien zusammenführen …
Alle JavaScripts in eine Datei (1 statt 2 Requests)
Alle CSS-Formatierungen in eine Datei(1 statt 5 Requests)
Reduziert die Anforderungen von 7 auf 2
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Der Browser hat Schuld …
IE 7, Firefox 2 (zwei)
IE 8, Firefox 3 (sechs) Safari, Opera (vier)
Anzahl gleichzeitiger Verbindungen früher
Anzahl gleichzeitiger Verbindungen heute
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Inhalte auf mehrere Server verteilen
HTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum Server
Firefox 2 zwei Firefox 3 sechs Opera 9.26: vier Opera 10.50: 16 … !!! Safari 3 Max/Windows: vier IE 7: zwei IE 8: sechs / zwei
Browser
Server1
Server2
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Inhalte auf mehrere Server verteilen
Hauptinhalte: www.joomla-fulda.de
Bilder img.joomla-fulda.de
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Brandbreite hilft …
Vernetzung © Mardre - Fotolia.com Cell phone on white © Mellow - Fotolia.com
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
?Gedanken zum Hosting
Der Server des Billighosters ist für
1,45 € im Monat
genau so schnell wie der Server des Premium Hosters für
79,00 € im Monat
GZIP Komprimierung nutzen
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mod_deflate ist i.d.R. aktiv
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
gzip für Joomla! aktivieren
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Kommunikation ohne GZIP
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Kommunikation mit GZIP
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Serverseitige Komprimierung (gzip komprimiert php-Dateien)
index.php ohne gzip = 23 kByte.
index.php mit gzip = 8 kByte.
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
css als php einbinden
template.css ohne gzip = 12,7 kByte
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
css als php einbinden
template.css template.php
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
css als php einbinden
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
css als php einbinden
template.css ohne gzip = 12,7 kByte
template.php mit gzip = 3,4 kByte
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools als php einbinden
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools als php einbinden
Die index.php des Templates entsprechend anpassen
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools.js ohne gzip = 72 kByte
mootools.js.php mit gzip = 20 kByte
mootools als php einbinden
Cache aktivieren
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Schalter im Backend
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)Server generiert Etag …
Inode + Filesize + Date Last Modification
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)Erste Anfrage …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)Erneute Anfrage …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)Prüfen, ob Etag gleich …
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)304 Not Modified
Alle Techniken kombiniert
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
CSS – Alle Zusammen … (1/2)css_together.php
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
CSS – Alle Zusammen … (2/2)css_together.php
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Index.php des Templates
mootools.js und caption.js deaktiviertStylesheets rausgeschmissen
js_together.php und css_together.php übernehmen
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Ergebnis – Erste Anfrage
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Ergebnis – Zweite Anfrage
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Langsame Verbindung (56k)
Ab 28 Sekunden rendern … Nach 49 Sek komplett
Ab 11 Sekunden rendern … Nach 22 Sek komplett
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Wiederholter Aufruf (56k)
Ab 9 Sekunden rendern … Nach 25 Sek komplett
Ab 1,4 Sekunden rendern … Nach 4 Sek komplett
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
.htaccess nutzen
Prima Ideen auch mit Hilfe der .htaccess
Zusammenfassung
•Was passiert in der Zeit•Werkzeuge für die Analyse•Analysieren der Inhalte•Möglichkeiten beim CSS•JavaScript Komprimieren•Weitere Optimierung•GZIP Komprimierung nutzen•Cache aktivieren•Zusammenfassung
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Zusammenfassung (1/3)Requests minimieren
Alle Dateien vom selben Server _oder_Dateien auf max. 2-4 Server verteilen Fremde Inhalte erhöhen Zeit um eine weitere
Sekunde, können Anz. Download aber erhöhen Anzahl der Serverzugriffe minimieren
Alle CSS Dateien in eine Datei zusammenfassen
Alle JS Dateien in eine Datei zusammenfassen
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Zusammenfassung (2/3)Dateigröße reduzieren
Code optimieren CSS-Farben: z. B. Hex Schreibweise statt
RGB JavaScript: z. B. Kommentare entfernen
CSS und JavaScript auslagern Wir nur einmal geladen
GZIP nutzen PHP-Dateien meist kein Problem CSS, JavaScripts als php
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Zusammenfassung (3/3)Rendern optimieren
Erneutes „Rendern“ vermeiden Höhe und Breite von Bildern und
Tabellen angeben. CSS Dateien in den <head>
„Rendern“ früher beginnen JavaScripts am Ende (vor dem </body>)
einbinden
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Vielen Dank
Präsentation auf
webdevfulda.de
Beitrag auf
joomla-fulda.de
Viel Spaß beim Testen der Möglichkeiten
Kai Greinke