Archive for the ‘css’ tag
CSS Sprites
In einem meiner letzten Artikel zum Thema „ Externe Javascript Dateien zusammenfassen“ haben wir bereits gemerkt, dass man HTTP-Requests verringern sollte, um die Performance auf dem Client und die Benutzererfahrung zu verbessern. Dies kann im Falle von CSS-Dateien weniger effektiv sein als beispielsweise bei Javascript-Dateien.
Bei Bildern in großer Anzahl muss der Browser diese auch nacheinander laden, was zu Verzögerungen bei der Anzeige führen kann. Nehmen wir an, wir haben eine Webseite mit vielen Grafiken. Das Menu besteht aus 10 Bildern, jedes davon hat einen Mouseover-Effekt, und es gibt noch einige weitere Bilder. Es resultiert also in >25 Bildern, die der Browser einzeln laden muss. Außerdem stehen dann die Mouseover-Bilder bereits von Anfang an zur Verfügung, und müssen nicht erst geladen werden, wenn die Maus darüber bewegt wird, wir haben also eine Art eingebauten Preload.
Um die Anzahl von HTTP-Requests zu verringern, kann man alle Bilder in ein großes Bild packen, und mit Hilfe von CSS dann den richtigen Abschnitt anzeigen. In diesem Schritt kann man auch nochmal diese Bilder etwas komprimieren, um noch Bandbreite zu sparen, denn häufig sehen die Bilder auch mit weniger Farben genausogut aus.
Ein solches Bild könnte zB. so aussehen:
Wir haben also viele kleine Bilder in einem Bild untergebracht. Um diese Bildchen dann nutzen zu können und nur einen kleinen Ausschnitt dieses großen Bildes anzeigen zu können, nutzen wir die CSS-Funktion „background-position“.
Beispielsweise könnte der HTML-Code so aussehen:
<ul id=”navigation”> <li id=”navigation-01"><a href=”#”><span>Blog</span></a></li> <li id=”navigation-02"><a href=”#”><span>Portfolio</span></a></li> <li id=”navigation-03"><a href=”#”><span>Resume</span></a></li> <li id=”navigation-04"><a href=”#”><span>Contact</span></a></li> </ul>
Wir schreiben die einzelnen Menupunkte noch als Text rein, damit Suchmaschinen sie lesen können. Das entsprechende CSS sieht dann so aus:
#navigation {
background:url(”/images/navigation.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}
#navigation span {
display: none;
}
#navigation li, #navigation a {
height:40px;
display:block;
}
#navigation li {
float:left;
list-style:none;
display:inline;
}
#navigation-01 {width: 98px;}
#navigation-02 {width: 131px;}
#navigation-03 {width: 123px;}
#navigation-04 {width: 138px;}
#navigation-01 a:hover {background:url(”/images/navigation.jpg”) 0px -40px no-repeat; }
#navigation-02 a:hover {background:url(”/images/navigation.jpg”) -98px -40px no-repeat; }
#navigation-03 a:hover {background:url(”/images/navigation.jpg”) -229px -40px no-repeat; }
#navigation-04 a:hover {background:url(”/images/navigation.jpg”) -352px -40px no-repeat; }
Standardmäßig soll die „erste Zeile“ des Bildes angezeigt werden. Das erreichen wir, indem wir das ganze Bild nehmen, aber nur 490*40 Pixel anzeigen (Zeilen 2-6). Wir blenden die spans aus (Zeile 10), ändern noch das Verhalten der Liste, damit die einzelnen Punkte nicht untereinander, sondern nebeneinander erscheinend (Zeilen 19-21). Wir definieren die Breite der einzelnen Listenelemente, und spezifizieren zum Schluss noch den Hover-Effekt, der einen anderen Ausschnitt anzeigen soll.
Es gibt auch Online CSS Sprite Generatoren, mit deren Hilfe es einfach ist, viele einzelne Bilder zu einem großen Bild zusammenzufassen, und dann die entsprechenden Koordinaten zu erhalten. Schaut euch einfach die folgenden Webseiten an:
CSS aufräumen mit „Dust-Me Selectors“
Ein tolles Firefox-Addon habe ich in meinem Repertoire gefunden, das ich euch vorstellen möchte: Dust-Me Selectors.
Damit kann man einfach seine Seite durch browsen, und das Addon zeigt an, welche CSS-Selektoren geladen werden, welche davon genutzt werden und welche nicht genutzt werden. Es findet sowohl inline-CSS als auch externe CSS-Dateien.
Alternativ kann man auch eine Sitemap angeben, die dann genutzt wird, um alle HTML-Seiten nach ungenutztem CSS zu durchsuchen.
Dann kann man sich speziell die nicht genutzten angucken, ob sie wirklich nicht mehr genutzt werden, und dann entfernen, um die CSS-Datei von Altlasten, Test-Selektoren usw zu befreien. Man sollte allerdings aufpassen beim Entfernen, es könnte ja sein, dass man einfach die eine Seite vergessen hat, wo der spezielle Selektor genutzt wird. Ich durchsuche auf jeden Fall noch meine Templates und View-Scripte nach dem Selector, bevor ich ihn lösche.
Mehr wollte ich eigentlich heute garnicht schreiben 😉
Externe Javascript Dateien zusammenfassen
Wir alle wissen: Langsame Webseiten bekommen weniger Besucher. Dazu gibt es auch Auswertungen von großen Portalen und Suchmaschinen.
Doch wie beschleunigt man die eigene Webseite? Häufig übersieht man einen wichtigen Teil: Das Frontend bzw. den Client.
Mag das PHP-Script auch sehr schnell sein (die Zeit gemessen mit microtime() ergibt 0.1 Sekunden), die Seite kann sich trotzdem langsam anfühlen. Das liegt häufig an vielen externen Dateien, die der Browser noch nachladen muss. Dazu gehören sowohl CSS-Dateien, Javascript-Dateien, Bilder usw.
