Servicequalität verbessern. Mitarbeiter motivieren. Kunden ...
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
-
Upload
joomla-user-group-fulda -
Category
Education
-
view
724 -
download
1
description
Transcript of Ladezeiten Verbessern - Css Und JavaScript Komprimieren
![Page 1: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/1.jpg)
Kai Greinke
Ladezeiten verbessern
page load time
CSS und JavaScript komprimieren
tacho 3d © vege – Fotolia.com
![Page 2: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/2.jpg)
© 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
![Page 3: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/3.jpg)
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
![Page 4: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/4.jpg)
© 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>
![Page 5: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/5.jpg)
© 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
![Page 6: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/6.jpg)
© 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 …
![Page 7: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/7.jpg)
© 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 …
![Page 8: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/8.jpg)
© 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 …
![Page 9: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/9.jpg)
© 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!
![Page 10: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/10.jpg)
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
![Page 11: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/11.jpg)
© 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
![Page 12: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/12.jpg)
© 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
![Page 13: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/13.jpg)
© 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
![Page 14: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/14.jpg)
© 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
![Page 15: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/15.jpg)
© 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
![Page 16: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/16.jpg)
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
![Page 17: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/17.jpg)
© 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
![Page 18: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/18.jpg)
© 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=“
![Page 19: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/19.jpg)
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
![Page 20: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/20.jpg)
© 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
![Page 21: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/21.jpg)
© 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
![Page 22: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/22.jpg)
© 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
![Page 23: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/23.jpg)
© 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
![Page 24: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/24.jpg)
© 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
![Page 25: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/25.jpg)
© 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
![Page 26: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/26.jpg)
© 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);}
![Page 27: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/27.jpg)
© 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
![Page 28: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/28.jpg)
© 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
![Page 29: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/29.jpg)
© 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
![Page 30: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/30.jpg)
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
![Page 31: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/31.jpg)
© 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?
![Page 32: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/32.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools komprimieren?
179 KByte
![Page 33: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/33.jpg)
© 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
![Page 34: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/34.jpg)
© 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
![Page 35: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/35.jpg)
© 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
![Page 36: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/36.jpg)
© 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>
![Page 37: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/37.jpg)
© 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.
![Page 38: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/38.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Nochmals zumVergleichmit und ohne mootools
![Page 39: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/39.jpg)
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
![Page 40: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/40.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Korrekte Reihenfolge von CSS und JavaScript Dateien
![Page 41: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/41.jpg)
© 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.
![Page 42: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/42.jpg)
© 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 …
![Page 43: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/43.jpg)
© 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
![Page 44: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/44.jpg)
© 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
![Page 45: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/45.jpg)
© 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
![Page 46: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/46.jpg)
© 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
![Page 47: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/47.jpg)
© 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
![Page 48: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/48.jpg)
© 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
![Page 49: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/49.jpg)
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
![Page 50: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/50.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mod_deflate ist i.d.R. aktiv
![Page 51: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/51.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
gzip für Joomla! aktivieren
![Page 52: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/52.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Kommunikation ohne GZIP
![Page 53: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/53.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Kommunikation mit GZIP
![Page 54: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/54.jpg)
© 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.
![Page 55: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/55.jpg)
© 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
![Page 56: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/56.jpg)
© 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
![Page 57: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/57.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
css als php einbinden
![Page 58: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/58.jpg)
© 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
![Page 59: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/59.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
mootools als php einbinden
![Page 60: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/60.jpg)
© 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
![Page 61: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/61.jpg)
© 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
![Page 62: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/62.jpg)
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
![Page 63: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/63.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Schalter im Backend
![Page 64: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/64.jpg)
© 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
![Page 65: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/65.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)Erste Anfrage …
![Page 66: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/66.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)Erneute Anfrage …
![Page 67: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/67.jpg)
© 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 …
![Page 68: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/68.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
ETag (entity tag)304 Not Modified
![Page 69: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/69.jpg)
Alle Techniken kombiniert
![Page 70: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/70.jpg)
© 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
![Page 71: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/71.jpg)
© 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
![Page 72: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/72.jpg)
© 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
![Page 73: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/73.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Ergebnis – Erste Anfrage
![Page 74: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/74.jpg)
© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
Ergebnis – Zweite Anfrage
![Page 75: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/75.jpg)
© 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
![Page 76: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/76.jpg)
© 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
![Page 77: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/77.jpg)
© 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
![Page 78: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/78.jpg)
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
![Page 79: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/79.jpg)
© 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
![Page 80: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/80.jpg)
© 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
![Page 81: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/81.jpg)
© 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
![Page 82: Ladezeiten Verbessern - Css Und JavaScript Komprimieren](https://reader036.fdocument.pub/reader036/viewer/2022062513/55557b26b4c9058a5a8b5063/html5/thumbnails/82.jpg)
© 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