Ladezeiten Verbessern - Css Und JavaScript Komprimieren

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


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>


Browser verarbeitet Inhalte …

<title> gesetzt und favicon dargestellt



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



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



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



Online Tools

z. B.

www.webpagetest.org




Firefox Add-on

Firebug



Firefox Add-on

YSlow



Google Page

Speed

Add-On für den Firefox



Sniffer

z. B.

Wireshark

Analysieren der Inhalte



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


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



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: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}

216

106


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


Verkürzte Schreibweise (Farben)



88

82


Zeilenumbrüche & Leerzeichen


.button{border-left: 6px solid #999;border-bottom: 2px solid #999}

82

66


Vorher Nachher


216

.button{border-left: 6px solid #999;border-bottom: 2px solid #999}

66


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

.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


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


Pingates CSS Compressor (tools.pingates.com)

.button{border-left:2px solid #999;border-bottom:6px solid #999}

66

JavaScript komprimieren



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



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 …

IE 7, Firefox 2 (zwei)

IE 8, Firefox 3 (sechs) Safari, Opera (vier)

Anzahl gleichzeitiger Verbindungen früher

Anzahl gleichzeitiger Verbindungen heute


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


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



mod_deflate ist i.d.R. aktiv


gzip für Joomla! aktivieren


Kommunikation ohne GZIP


Kommunikation mit GZIP


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



template.css template.php





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.js ohne gzip = 72 kByte

mootools.js.php mit gzip = 20 kByte


Cache aktivieren



Schalter im Backend


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

Alle Techniken kombiniert


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 deaktiviertStylesheets rausgeschmissen

js_together.php und css_together.php übernehmen


Ergebnis – Erste Anfrage


Ergebnis – Zweite Anfrage


Langsame Verbindung (56k)

Ab 28 Sekunden rendern … Nach 49 Sek komplett



Wiederholter Aufruf (56k)


Ab 1,4 Sekunden rendern … Nach 4 Sek komplett


.htaccess nutzen

Prima Ideen auch mit Hilfe der .htaccess

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

Education

Ladezeiten Verbessern - Css Und JavaScript Komprimieren