UF CSS-Sprites vBulletin Add-On

[Mooff]

UF CSS-Sprites vBulletin Add-On​

Ein wichtiger Punkt bei der Benutzung von Webseiten ist die Geschwindigkeit. Dies gilt gleichmaßen für Benutzer, wie auch für Suchmaschinen. Lange Ladezeiten bei Webseiten sind nervig und störend, da man als Benutzer nichts anderes machen kann als zu warten. Aus diesem Grund versuchen wir vom United-Forum die Ladezeiten unserer Seite so kurz wie möglich zu gestalten. Eine gute Möglichkeit die Geschwindigkeit zu verbessern sind dabei CSS-Sprites - eine Funktion die von vBulletin leider nicht angeboten wird.

Wir haben uns deshalb dazu entschlossen selber ein CSS-Sprites Addon für vBulletin zu erstellen.


In dem Artikel werde ich erst kurz erklären, was CSS-Sprites sind, warum sie den Seitenaufbau beschleunigen. Welche Meinung google dazu hat und letztendlich zeigen wir mit verschiedenen Messwerten welchen Geschwindigkeitsvorteil unser Plugin bietet.


Google zu Geschwindigkeit

-quelle: Google Webmaster Blog-
Seit Frühjahr 2010 nutzt Google Seitengeschwindigkeit als ein Kriterium um Webseiten zu beurteilen. Desweiteren bieten sie unterschiedliche Tools an, mit denen man Webseiten auf ihre Geschwindigkeit hin überprüfen - und basierend auf den Ergebnissen optimieren kann. Eines dieser Tools ist Pagespeed. Dieses unterteilt 'Probleme' auf einer Webseite in drei Kategorien. Hohe Priorität, Mittlere Priorität und Geringe Priorität.
Das Ziel des United-Forums war es dabei zuerst alle Punkte die unter Hoher Priorität aufgeführt wurden auszubessern, dies ist in den letzten Wochen und Monaten geschehen. Bis als letzter Punkt die CSS-Sprites unter Hoher Priorität übrig geblieben sind.


Was sind CSS-Sprites

CSS-Sprites ist die Idee mehrere Bilder zu einem Bild zusammenzuführen. Beispielsprite.


Warum CSS-Sprites

Nebenpunkt ist die Tatsache, dass bei der verlustfreien Komprimierung von großen Bildern mehr Daten reduziert werden können, als wenn man mehrere kleinere Bilder komprimiert.
Hauptpunkt ist aber, dass HTTP für jedes Javascript, für jedes Bild eine neue Verbindung vom Benutzer zum Server aufbauen muss. Dies wäre alleine noch kein Problem, allerdings sind aber die maximalen parallelen HTTP-Verbindungen die ein Browser einsetzen kann limitiert (ca. 4). Müssen mehr als 4 Dateien übertragen werden, muss der Browser also warten bis die ersten Dateien übertragen sind, bevor er neue Bilder anfordern kann.
Mit CSS-Sprites kann man also die benötigte Zahl an HTTP-Verbindungen stark senken, was sich sofort auf die Geschwindigkeit auswirkt.
Sehr guter weiterführender Artikel über CSS-Sprites von Sven Wolfermann.


Performance des United-Forum CSS-Sprite Add-Ons

Eure United-Forum-Administration

 

[b-a-d-b-o-y]

Wow mooff und osbes,das ihr das schon wieder so schnell umgesetzt habt

 

[katsch]

geradzu pornös.

sehr schöne arbeit

 

[Phill]

 

[Lunak]

nett

 

[freezy]

UF Hochtechnologie

 

[Bandito]

gj

 

[Outsider]

Ist das eigentlich der Grund dafür, dass die ganzen Icons für Foren und Beiträge in letzte Zeit immer wieder so abgefuckt sind? Ich krieg die hier falsch oder gar nicht angezeigt. Manchmal ist es dann wieder OK, aber meistens sehen die irgendwie versetzt aus - mindestens.

 

[Phill]

Strg + F5 drücken... wurde aber im Feedback-Forum zig mal gesagt...

 

[Mooff]

Mit jeder neuen Version des Sprite Addons werden neue Icons hinzugefügt.
Dies verändert die Anordnung der Icons im Sprite und generiert dazu passende neue CSS Definitionen, welchen Teil des Sprites der Browser an der jeweiligen Stelle darstellen soll.

Hat man nun noch ein altes Sprite im Browsercache passen die neuen CSS Definition nicht und es werden falsche Stellen des Sprites angezeigt.


Momentan laufen wir mit einem 0.7.0 release candidate, in dem auch die Forenansicht mit den ganzen Threadicons durch das Addon stark beschleunigt wird. Lange Rede kurzer Sinn, wie PhillRudd schon gesagt hat, Force Reload mit Strg+F5 und alles stimmt wieder.

 

[baracuda]

Kann man das Force Reload nich per Javascript oder Serverseitig erzwingen?
Es nervt ein bisschen muss ich ja zugeben.

 

[Osbes]

Im Interesse der Sicherheit und Integrität des Browsers ist es auf vernünftige Weise nicht möglich den Browser-Cache clientseitig über JavaScript und pauschal natürlich nicht serverseitig zu leeren.

Generell ist dies aber auch nur dann nötig, wenn wir an den Sprites arbeiten um weitere Icons hinzuzufügen und die Ladezeiten zu verkürzen. Da wir in diesem Prozess immer weiter vorranschreiten ist es immer seltener nötig den Browser-Cache zu leeren

 

[baracuda]

Ok dann will ich diese Umbauphase mal noch aushalten und vertraue euch

 

[Outsider]

Strg + F5 drücken... wurde aber im Feedback-Forum zig mal gesagt...

Oh, OK. Hatte nur bei "Häufige Fragen" geschaut ob da jemand son Thema erstellt hat *hust*
Na dann ist ja alles klar

 

[Osbes]

Wie viele es gemerkt haben wird immer wieder an den Sprites gearbeitet. Wir sind heute bei Version 0.7.0 angekommen (es werden nun ~63 weitere Icons unterstützt) und haben die Verbesserungen gleich nochmal optisch besser Aufgearbeitet:

Eure UF-Entwicklungszentrale!

 

[b-a-d-b-o-y]

Das ist geil osbes

 

[Kasian]

Awesometastisch

 

[huiz41]

do you still have the 0.6.2 version available for vBulletin versions less than 4.1?