Ladezeiten Verbessern - Css Und JavaScript Komprimieren

Ladezeiten verbessern CSS und JavaScript komprimieren Kai Greinke pageload time tacho 3d © vege – Fotolia.com

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

Was passiert in der Zeit … HTTP/1.0 200 OK Date: Fri, 15 Jun 2009 16:04:22 GMT Content-Language: de Content-Type: text/html;charset=utf-8 <HTML>…</HTML>

Browser verarbeitet Inhalte … <title> gesetzt und favicon dargestellt

Browser verarbeitet Inhalte … Es folgen die JavaScript Dateien im Quellcode … der Browser fordert die Dateien sofort an …

Browser verarbeitet Inhalte … Dann kommen die CSS Dateien … der Browser fordert auch diese an …

Browser verarbeitet Inhalte … Der <body> beginnt … der Browser könnte loslegen …

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

Online Tools z. B. www.webpagetest.org Werkzeuge für die Analyse

Werkzeuge für die Analyse Firefox Add-on Firebug

Werkzeuge für die Analyse Firefox Add-on YSlow

Werkzeuge für die Analyse Google Page Speed Add-On für den Firefox

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

Wo kann man optimieren? Quelle: www.webpagetest.org 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

Analysieren der Inhalte Browser … wartet HTML CSS JavaScript Browser … rendert Bilder (in- und extern) Audio / Video RSS (fremde Inhalte) <imgsrc=“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

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

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);} 216 106 .button { border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}

HEX- statt RGB-Notation .button { border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);} 106 88 .button { border-left: 6px solid #999999; border-bottom: 2px solid #999999;}

Verkürzte Schreibweise (Farben) .button { border-left: 6px solid #999999; border-bottom: 2px solid #999999;} 88 82 .button { border-left: 6px solid #999; border-bottom: 2px solid #999;}

Zeilenumbrüche & Leerzeichen .button { border-left: 6px solid #999; border-bottom: 2px solid #999;} 82 66 .button{border-left: 6px solid #999;border-bottom: 2px solid #999}

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 66 .button{border-left: 6px solid #999;border-bottom: 2px solid #999}

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);}

YUI Compressor 153 .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;}

Free CSS Toolbox 152 .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}

Pingates CSS Compressor (tools.pingates.com) 66 .button{border-left:2px solid #999;border-bottom:6px solid #999}

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

Das JavaScript Framework „mootools“ hat ca. 72 KByte Kann man „mootools.js“ komprimieren? Werden die „mootools.js“ überhaupt benötigt?

mootools komprimieren? 179 KByte

mootools komprimieren… 179 kByte  JavaScript Minifier  72 kByte nachher

mootools komprimieren… 179 kByte  YUI Compressor  63 kByte nachher

mootools - YUI statt JSMin 63 kByte  72 kByte

mootools deaktivieren In der index.php des Templates direkt nach <head>

Ladezeit ohne caption.js und mootools.js Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig geladen.

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

Korrekte Reihenfolge von CSS und JavaScript Dateien

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.

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 …

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

Der Browser hat Schuld … Anzahl gleichzeitiger Verbindungen früher IE 7, Firefox 2 (zwei) Anzahl gleichzeitiger Verbindungen heute IE 8, Firefox 3 (sechs) Safari, Opera (vier)

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 Server 1 Server 2 Browser

Inhalte auf mehrere Server verteilen Hauptinhalte: www.joomla-fulda.de Bilder img.joomla-fulda.de

Brandbreite hilft … Vernetzung © Mardre - Fotolia.com Cell phone on white © Mellow - Fotolia.com

? 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

Serverseitige Komprimierung (gzip komprimiert php-Dateien) index.php ohne gzip = 23 kByte. index.php mit gzip = 8 kByte.

css als php einbinden template.css ohne gzip = 12,7 kByte

css als php einbinden template.css  template.php

css als php einbinden template.css ohne gzip = 12,7 kByte template.php mit gzip = 3,4 kByte

mootools als php einbinden Die index.php des Templates entsprechend anpassen

mootools.jsohne 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

ETag (entity tag)Server generiert Etag … Inode + Filesize + Date Last Modification

ETag (entity tag)Erste Anfrage …

ETag (entity tag)Erneute Anfrage …

ETag (entity tag)Prüfen, ob Etag gleich …

ETag (entity tag)304 Not Modified

CSS – Alle Zusammen … (1/2)css_together.php

CSS – Alle Zusammen … (2/2)css_together.php

Index.php des Templates mootools.js und caption.js deaktiviert Stylesheets rausgeschmissen js_together.php und css_together.php übernehmen

Langsame Verbindung (56k) Ab 28 Sekunden rendern … Nach 49 Sek komplett Ab 11 Sekunden rendern … Nach 22 Sek komplett

Wiederholter Aufruf (56k) Ab 9 Sekunden rendern … Nach 25 Sek komplett Ab 1,4 Sekunden rendern … Nach 4 Sek komplett

.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

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

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

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

Vielen Dank Präsentation auf webdevfulda.de Beitrag auf joomla-fulda.de Viel Spaß beim Testen der Möglichkeiten Kai Greinke

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Ladezeiten Verbessern - Css Und JavaScript Komprimieren

Similaire à Ladezeiten Verbessern - Css Und JavaScript Komprimieren (20)

Ladezeiten Verbessern - Css Und JavaScript Komprimieren