Optimierung der Ladegeschwindigkeit
Hallo und herzlich willkommen zu meinem kleinen Tutorial, wie man bei vielen Webseiten noch ein bisschen an der Performanceschraube drehen kann. Grundlage für dieses Tutorial bildet Contao 2.10, jedoch sind diese Optimierungen auch problemlos bei anderen Systemen möglich.
Bereits in einem früheren Blogpost wurde beschrieben, wie man die Geschwindigkeit verbessern kann. Der wohl bedeutendste Punkt dabei ist das kombinieren von Bildern zu CSS-Sprites, da dadurch weniger Verbindungen zum Server aufgebaut werden müssen und nebenbei das zusammengesetzte Bild zumeist kleiner ist, als viele einzelne. An dieser Stelle kann man aber auch noch weiter optimieren, dank CSS3. So bietet CSS3 die Möglichkeit abgerundete Ecken und Farbverläufe per CSS zu "erstellen", anstatt diese, wie sonst üblich, per Bilder einzubauen. Leider unterstützten noch nicht alle gängigen Browser dies, wodurch CSS3 hierfür bisher selten verwendet wird. In diesem Tutorial widme ich im speziellen den Farbverläufen und zeige die praktikabelsten Varianten auf.
Variante 1: Einbetten der Grafik in die CSS-Datei
Diese Variante ist wohl die unbekanntesten. Dabei wird das Bild base64-endodiert und anschließend anstatt der Bild-URL in die CSS eingebettet. Das sieht dann folgendermaßen aus:
Code:
background:url(data:image/png;base64,…);
Vorteile:
- Es wird keine extra Serververbindung zum Herunterladen des Bildes benötigt.
- Man muss die Bilder nicht separat mitliefern. Das ist z.B. praktisch, wenn man dem Benutzer nur eine einzelne Datei geben möchte, so wie es z.B. bei CoSC der Fall ist.
- Funktioniert mit allen Bildern, unabhängig davon ob es ein Farbverlauf ist, oder nicht.
Nachteile:
- Bedingt durch die base64-Encodierung pro Byte des Bildes benötigt man 2 Bytes in der CSS.
- Aufwändig, da man das Bild nicht mehrfach in der CSS-Datei haben möchte und somit an alle Verwendungsstellen des Bildes ggf. eine extra Klasse anlegen muss.
Auf Grund dessen das die Nachteile die Vorteile überwiegen, rate ich im Allgemeinen davon ab diese Variante zu benutzen, besonders da der zusätzliche Speicherbedarf dem Vorteil der geringeren Anzahl an Serververbindungen entgegensteht. Jedoch ist es gut zu wissen, dass es diese Variante gibt, da sie in sehr seltenen Fällen brauchbar ist. In Contao ist diese Variante nur über benutzerdefiniertes CSS möglich.
Variante 2: Benutzung von CSS3
Mit CSS3 kann man Farbverläufe auch per CSS einbauen. Doch es wäre zu schön, würde die Lösung so simpel sein. Zwar kann man dies bereits benutzen, allerdings soll die Seite ja auch auf allen wichtigen Browsern schön aussehen. So verhindert eine breite Benutzung selbst der Internet Explorer 9 noch – jedoch steht Besserung in Aussicht: Die erste Plattform Preview vom Internet Explorer 10 unterstützt bereits den CSS3-Farbverlauf. Ein gute Beschreibung für die CSS3-Farbverläufe findet man hier.
Variante 2.1: CSS3 mit automatischen Fallback
Nun zuerst widmen wir uns der Variante, die ich am bevorzuge - der Fallbacklösung, die ohne JavaScript funktioniert und auch simpel ist:
Code:
.grad {
background:url(fallbackGradient.png); /* fallback image if gradients are not supported */
background: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55));
background: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
background: linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
}
Was hier passiert ist folgendes. Der Browser liest zuerst das Fallbackbild und anschließend die CSS3-Anweisungen. Da diese Hintereinander definiert sind, überschreibt die CSS3-Anweisung, sofern der Browser einer der CSS3-Anweisungen versteht, die Fallbacklösung, wodurch die Darstellung mittels CSS3 erfolgt. Nur im Falle das die CSS3-Anweisungen für den Browser unverständlich sind, sorgen dafür, dass der Browser das Fallbackbild verwendet.
Vorteile:
- Fallbackbild wird nur geladen, wenn es wirklich notwendig ist.
- Browser entscheidet selber, ob er dieses Feature unterstützt oder nicht.
Nachteile:
- Bisher nur über benutzerdefiniertes CSS in Contao möglich, wodurch man sich um die Präfixe selber kümmern muss.
Contao 2.10.0 unterstützt diese Variante übrigens nicht, da er das Bild mit dem Farbverläuf kombiniert. Diese Variante macht sinn, wenn man z.B. hinter teiltransparenten Bildern einen Farbverlauf setzen will.
Variante 2.2: CSS3 mit JavaScript-Fallback (Contao 2.10 Standardsupport)
Natürlich gibt es noch eine weitere Möglichkeit, ein Fallback zu implementieren: per css3pie. Diese Variante unterstützt Contao 2.10 direkt.
Der generierte Code sieht dabei folgendermaßen aus:
Code:
.grad {
background:linear-gradient(-45deg,#f00,#800,#c00);
background:-moz-linear-gradient(-45deg,#f00,#800,#c00);
background:-webkit-gradient(linear,0% 0%,100% 100%,color-stop(0,#f00),color-stop(0.5,#800),color-stop(1,#c00));
background:-o-linear-gradient(-45deg,#f00,#800,#c00);
-pie-background:linear-gradient(-45deg,#f00,#800,#c00);
behavior:url("plugins/css3pie/PIE.htc");
}
Der behavior-Befehl sorgt dafür, dass beim IE der Farbverlauf per JavaScript gerendert wird.
Dem entsprechend haben wir folgende Vor- und Nachteile:
Vorteile:
- Direkt unterstützt von Contao 2.10
- Es werden keine Bilder geladen, auch wenn Farbverläufe nicht unterstützt werden.
- Manuelles Erstellen der Fallbackbilder unnötig.
- Größe des Fallbackbildes dynamisch bei der Erzeugung.
Nachteile:
- Unterstützt nur IE 6-9 (IE10 benötigt den ms-Präfix, den Contao 2.10 bisher nicht genriert)
- Benötigt JavaScript
- Ältere Browserausgaben, wie Opera 10 werden nicht unterstützt.
Der Vorteil dieser Variante ganz klar darin, dass keine Grafiken benötigt werden. Ansonsten hat diese Variante leider auch gravierende Menge Nachteile, vor allem da sie mit Variante 2.1 nicht kombinierbar ist (für den IE6-9 kann man also nicht erzwingen css3pie zu nutzen, wenn JavaScript aktiviert ist).
Weitere Möglichkeiten
In Contao 2.10 ist es möglich browserabhängige Selektoren zu verwenden. Damit könnte man für die Browser, die CSS3 noch nicht unterstützen, noch entsprechenden Fallback-Code unterjubeln, aber zum einem wäre diese Variante nicht praktikabel, da man die Liste der unterstützen Browser selber verwalten müsste und zum anderem wurde ja bereits gezeigt, dass so eine Unterscheidung nicht notwendig ist.
Eine weitere denkbare Möglichkeit wären Browserweichen, jedoch untersützt nur der Internet Explorer dies - und ab Version 10 auch nicht mehr, sofern man nicht im Kompatibilitätsmodus landen will. Von daher ist diese Variante auch keine sinnvolle Lösung.
Fazit & Randbemerkungen
Wie man sieht gibt es mehrere Möglichkeiten um Farbverläufe zu "optimieren", die alle Vor- und Nachteile haben.
Und noch die Randbemerkungen:
- Neben linearen Farbverläufen gibt es noch weitere CSS3-Farbverläufe. Allerdings unterstützt die css3pie noch nicht, wes wegen Contao 2.10 sie auch nicht vom Core aus unterstützt. Und Opera 11.10 unterstützt radiale Farbverläufe leider auch noch nicht. In diesem Falle stellt Variante 2.1 also die beste Variante dar.
- Wenn man Sprites benutzt, sollte man daran denken, dass man wirklich für alle enthaltenen Grafiken einen CSS3-Code parat hat. Ansonsten ist die Optimierung hin, da das Bild dann doch geladen wird.
- Die Eigenschaft das Farbverläufe nur von Browsern unterstützt werden, die auch abgerundete Borders unterstützt, kann man sich übrigens zunutze machen, in dem man ein Fallback auf ein Bild mit abgerundeten Ecken macht, danach jedoch einen Farbverlauf (es kann auch ein Farbverlauf von einer Farbe zur gleichen Farbe sein) definiert und den Borderradius. Effekt: Browser die abgerundete Ecken, runden die Ecke ab. Und wenn sie dabei noch Farbverläufe unterstützen, wird die abgerundete Grafik gar nicht mehr erst geladen. Im Falle das abgerundete Ecken unterstützt werden und Farbverläufe noch nicht, ist es zwar nicht ganz optimal, da dann trotzdem das Bild geladen wird, allerdings sollte es bei korrekter Verwendung dem Benutzer optisch nicht auffallen. In den neueren Browsern greift die Optimierung dafür.
