+ Antworten
Ergebnis 1 bis 5 von 5

Thema: [HowTo] Joomla Template Tuning via CSS

  1. #1
    Neu an Board
    Registriert seit
    16.07.2005
    Beiträge
    23
    Bedankte sich
    4
    Erhielt 2 Danksagungen
    in 2 Beiträgen

    Standard [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/
    Geändert von mariostrife (09.03.2011 um 10:43 Uhr)

  2. Erhielt Danksagungen von:


  3. #2
    War schon öfter hier
    Registriert seit
    18.07.2009
    Ort
    127.0.0.1
    Beiträge
    190
    Bedankte sich
    18
    Erhielt 25 Danksagungen
    in 24 Beiträgen

    Standard

    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ß
    Die deutsche Sprache ist zwar Freeware - aber kein OpenSource! | Der DANKE-Button beißt nicht!

  4. #3
    Neu an Board
    Registriert seit
    15.04.2011
    Beiträge
    75
    Bedankte sich
    26
    1 Danksagung in 1 Beitrag

    Standard

    @SEO-Effekt: Ja, schön und gut. Aber verschenkt man dabei in diesem Beispiel nicht 5 Möglichkeiten, ein Alt-Attribut zu setzen? Und wie taucht sowas wohl in der Bildersuche auf?

    Ich würde das nur für so kleine unwichtige ca. 30x30 Pixel-Grafiken einsetzen.
    Banner so gerade noch, schon mit Fragezeichen. (Was hält wohl derjenige davon, der die Banner gebucht hat? - Der will für sein Geld sicher ein ordentliches Bild mit einem ordentlichen Link zu ihm. Mit Alt-Attribut.)

    Bei allen größeren und inhaltlich bedeutenden Bildern eher nicht einsetzen.

  5. #4
    Hat hier eine Zweitwohnung Avatar von CirTap
    Registriert seit
    12.12.2005
    Ort
    Karlsruhe
    Beiträge
    1.641
    Bedankte sich
    84
    Erhielt 552 Danksagungen
    in 444 Beiträgen

    Standard

    @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
    Joomla FAQ | CSS-Probleme? Verstehen Entdecken Anwenden Meistern

    "I love deadlines. I like the whooshing sound they make as they fly by." (Douglas Adams)
    Man kann Software schnell, gut und günstig schreiben, sich aber nur 2 Dinge aussuchen.


  6. #5
    Wohnt hier Avatar von cylance
    Registriert seit
    10.11.2010
    Beiträge
    2.313
    Bedankte sich
    188
    Erhielt 594 Danksagungen
    in 563 Beiträgen

    Standard

    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.
    Geändert von cylance (21.07.2011 um 21:04 Uhr)
    Meine Kristallkugel hat einen Sprung und die Tarotkarten hat's vom Tisch geweht. Detailierte Informationen sind hilfreich.
    We offer three kinds of service: good - chea p - fast. u can pick 2 of them
    FAQ vorn im Forum gelesen?

+ Antworten

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein