Thema: [HowTo] Joomla Template Tuning via CSS

Joomla ist, sowie die meisten anderen CM-Systeme, von Hause aus sehr performant, doch mit steigender Anzahl von Modulen, Komponenten und
evtl. verschiedenen Templates kann Joomla mit der Zeit sehr träge wirken. Allerdings ist das meißt ein Hausgemachtes Problem.

Einige Schlüsselworte in unserem Fall:
HTTP-Requests, Overhead und Arbeitsspeicher verschwendung

Diese drei Dinge sind eine Verkettung von Problemen bei nicht optimierter Templategestaltung. Dabei werden unnötig viele Grafiken geladen und zusätzlich Arbeitsspeicher verschwendet. Uns ist allen wohl bewusst das Arbeitsspeicher sehr wohl in unmengen vorhanden ist, allerdings haben gewisse Browser ihre Probleme damit viele Grafiken im Speicher sinnvoll und vor allem performant zu Verwalten.

Die Lösung des Problems: CSS-Sprites

Was sind CSS Sprites?

CSS-Sprites sind nichts anderes als eine zusammenfassung von Grafiken in einer Datei. Nehmen wir als Beispiel die Seite Joomlaos.de. Dort findet ihr auf der Startseite unter der Navigation diverse Partnerbanner.


(Abbildung: Joomla Partnerbanner als einzelne Grafiken)

Diese unterschiedlichen Partnerbanner verursachen insgesamt sechs HTTP-Requests. Dabei fordert der Client (der Browser) vom Server eine Datei an. Der Server sucht im Arbeitsspeicher oder auf der Festplatte nach der Datei und schickt sie dann dem Client. Das passiert wie gesagt insgesamt sechs mal und dabei werden circa 19,7 Kilobyte übertragen.

Wenn wir diese Banner nun zu einer Datei zusammenfassen wie in der folgenden Abbildung werden alle Banner mit nur ein einzigem HTTP-Request angefordert. Nebenbei ist die Grafik nur 13,8 Kilobyte groß und so sparen wir uns fast 6 Kilobyte. Aber das wichtigste ist das Unser Browser nur noch eine Datei anstatt sechs im Hauptspeicher des Clients vorhalten muss. Die Datei wird zwar nun genau 6 sechs mal benötigt, allerdings
wird per CSS nur ein Teilausschnitt der Grafik dargestellt.



(Abbildung: Joomlaos.de Partnerbanner als CSS-Sprite zusammengefasst. Dimensionen: 88px Breit und 218px Hoch)

Wir erstellen nun mehrere DIV Container um die Grafiken bereit zustellen:

Code:

<div class="joomlaHosting"><a href="#" title="#" target="_blank"> </a></div>

<div class="joomlaTutorials"><a href="#" title="#" target="_blank"> </a></div>

<div class="nik-o-mat"><a href="#" title="#" target="_blank"> </a></div>

<div class="jahoArt"><a href="#" title="#" target="_blank"> </a></div>

<div class="joomlaMarket"><a href="#" title="#" target="_blank"> </a></div>

<div class="learningByVideo"><a href="#" title="#" target="_blank"> </a></div>

Nun haben wir die leeren Platzhalter für unsere Banner die derzeit noch nichts machen. Nun folgt das benötigte CSS:

Code:

.joomlaHosting {
background-image: 	url(pfad/zum/css-sprite.jpg);
background:repeat: 	no-repeat;
background-position: 	0px 188px;
width: 			88px;
min-height: 		30px;
}

.joomlaHosting a{
display: 		block;
width: 			88px;
min-height: 		30px;
}

Ich beschränke mich hier einmal nur auf die CSS-Klasse joomlaHosting. Die Positionierung wird per background-position bewerkstelligt. Dabei steht der erste Wert für die Y- bzw. Horizontale Achse und der zweite Wert für die X- bzw. Vertikale Achse. Es sollen also 88px in der Breite und 30px in der Tiefe dargestellt werden. In der folgenden Abbildung habe ich das ganze mal visuell verdeutlicht in dem alle anderen Banner die nicht dargestellt werden eine Transparenz effekt bekommen haben. Warum steht auf der X-Achse nun 188 anstatt 30 Pixel? Ganz einfach weil CSS die Höhe der Grafik von dem untersten Pixel berechnet. Wie in der oberen Abbildung schon angemerkt ist das CSS-Sprite insgesamt 218px hoch, davon ziehen wir nun 30px ab und erhalten die 188px.





Folglich würde die nächste CSS Klasse (joomlaTutorials; die Grafik ist 88px breit und 31px hoch) wie folgt aussehen:

Code:

.joomlaTutorials {
background-image: 	url(pfad/zum/css-sprite.jpg);
background:repeat: 	no-repeat;
background-position: 	0px 157px;
width: 			88px;
min-height: 		31px;
}

.joomlaTutorials a{
display: 		block;
width: 			88px;
min-height: 		31px;
}

Das ganze funktioniert natürlich auch mit Hovereffekten. Man hat dann zwar etwas komplexeres CSS aber es lohnt sich definitv! Hier mal ein Beispiel wie ein CSS-Sprite mit Hovereffekten aussehen könnte.



Und das dazu gehörige CSS Code Schnipsel für den JoomlaHosting Banner:

Code:

.joomlaHosting {
background-image: 	url(pfad/zum/css-sprite.jpg);
background:repeat: 	no-repeat;
background-position: 	0px 188px;
width: 			88px;
min-height: 		30px;
}

.joomlaHosting a{
display: 		block;
width: 			88px;
min-height: 		30px;
}

.joomlaHosting a:hover{
background-image: 	url(pfad/zum/css-sprite.jpg);
background:repeat: 	no-repeat;
background-position: 	88px 188px;
display: 		block;
width: 			88px;
min-height: 		30px;
}

Ich selbst habe meiner kleinen Communityseite, die ein vorgefertigtes Template verwendet, so einen schnelleren Seitenaufbau beschert aber was noch viel wichtiger ist, die Seite läuft nun auch auf alten Möhren mit dem Feuerfuchs um ein vielfaches besser. Gefühlt bauen sich die Seiten nun 20 - 25% schneller auf und vor allem alte PCs profitieren enrom davon. Wenn man das ganze noch etwas vertieft sollte man auch daran denken Module im Frontend auf CSS-Sprites umzustellen. Ich habe z.B. das "uddeIM" Frontendmodul umgestrickt was relativ simpel war. Den SEO Apsekt an der ganzen Sache sollte man natürlich auch nicht außer Betracht lassen, denn wenn mich nicht alles täuscht bewertet Goolge seit einiger Zeit auch die Geschwindigkeit der Webseite und des Seitenaufbaus.

Wie kam es zu diesem Tutorial?

Beruflich bedingt beschäftige ich mich jeden Tag mit Webseiten, da es sich dabei aber um ein Intranet dreht und wir dort stark auf CSS setzen, habe ich diese super CSS Trick schon fast aus meinen Gedächtniss gestrichen. Nun hab ich aber privat auch wieder eine kleine Seite für eine Handvoll nutzer und diese lief eben auf den Möhren hier auf Arbeit einfach nur grottig langsam. Und irgendwie erinnerte ich mich mehr durch zufall als alles andere an CSS-Sprites. Also jeder der grafisch aufwendige Webseiten betreibt sollte sich dieses Howto mal zur Brust nehmen sofern dem jenigen CSS Sprites nichts sagen.

Weitere Infos & Tools:

HTTP-Requests: http://de.wikipedia.org/wiki/Hyperte...nsfer_Protocol

YSlow Firefox Addon: Mit diesem Addon kann man die Geschwindigkeit der Webseite testen, zusätzlich erteilt es Ratschläge wie man den Seitenaufbau beschleunigen kann. https://addons.mozilla.org./en-US/firefox/addon/yslow/

Hi! Nur zum reinen Verständnis: Die Grafik wird quasi an die richtige Position "geschoben", so dass in einem DIV zwar das ganze Bild geladen, aber nur ein Teilausschnitt zu sehen ist?!

Danke und Gruß

@Stadtmensch: stimme dir zu und bei "HTML-Bannern" die von anderen Servern kommen (was ja nicht selten der Falle ist) hat man auch wenig Möglichkeit "zu optimieren".
Sprites bieten sich besonders dazu an, diesen Tüddelkram an Icons oder Hintergrundbilder zusammen zu fassen, die im CSS das "Theme" einer Seite ausmachen aber eigentlich nicht "zum Inhalt" gehören bzw. "der Inhalt" sind. Bei vielen "Design-Templates" besteht hier enormes Optimierungspotential.
Bei Bildergalerien ließen sich auch die Thumbnails (bspw. pro Seite) in ein JPEG packen während die großen Bilder unverändert einzeln verlinkt bleiben. Das ist bei der Dynamik einer Galerie aber nicht ganz trivial und zu Fuß will man dass dann auch nicht machen

Schau mal bei mir ins Profil da sind ebenfalls ein paar Links dazu

z.B. dieser http://www.cssguru.de/css-sprites/
oder dieser http://bueltge.de/css-sprites-einfach-erklaert/675/

Entscheidend ist, dassdie Zahl der Serveranfragen sinkt da die Grafik ja bereits geladen ist, z.B. beim hovern.