Wolke7Design.de

Lightwindow, Shadowbox und andere Ajax-Bremser

05.04.2010 | Kategorie: Usability | Kommentare: 1

Ajax ist etwas schönes. Es ist Javascript neu entdeckt! Mootools, Scriptaculous, Prototype, jQuery und Co. Alle ringen Sie um Aufmerksamkeit. Frameworks, die einem die Arbeit mit Javascript erleichern. Eine herausfahrende Box hier, ein schöner Fade-Effekt da. Schnell gemacht, zaubern diese Effekte ein Lächeln auf die Gesichter der Designer, Webseiten-Besitzer und Nutzer.

Blöd nur, wenn Ajax ein großer Bremser ist. Schließlich sollen die meisten Scripte ja im HEAD einer Seite geladen werden. Sprich, ganz am Anfang, was den eigentlichen Seitenaufbau verzögert. Mag es sich in den meisten Fällen um wenige Millisekunden handeln, sind bei komplexen Javascripts schnell 1 – 2 Sekunden beieinander.

Hier ein praktisch Beispiel aus meiner Arbeit an www.wolke7design.de:
Für das Blog hier setzte ich anfangs das Plugin Shadowbox JS ein, das einige besondere Vorzüge besitzt. Bilder im Blog werden automatisch erkannt und mit dem Zusatz rel=”shadowbox” versehen. Somit öffnet sich beim Klick auf ein Vorschaubild nicht das Bild in Originalgröße auf weißem Hintergrund, sondern ein wirklich schönes und schnelles Lightwindow zentriert das Bild in Originalgröße auf der abgedunkelten Webseite. Man muss sich um nichts mehr kümmern. Toll, praktisch, schön! Auch ganze Galerien werden automatisch erstellt, sofern man mehrere Vorschaubilder in einem Blogbeitrag hat.

Der Nachteil daran: Das Shadowbox Javascript, sowie das zugehörige CSS-File werden prinzipiell im Blog geladen. Ob man nun Bilder auf der aktuellen Seite hat oder nicht. Wer benötigt das bitte? Es gibt zwar in den Einstellungen des Plugins eine Möglichkeit, das Javascript nur zu laden, wenn sich auch wirklich der (diesmal manuell eingetragene) Zusatz rel=”shadowbox” bei einem Bild befindet, das Laden des zusätzlichen CSS-Files bleibt davon allerdings unberührt. Es wird permanent geladen, ob man nun will oder nicht.

Lösung:
Ende mit dem Luxus! Shadowbox wird absofort ohne Plugin geladen. Und zwar nur, wenn ich es will. Mit diversen Template-Funktionen und -Abfragen schaffe ich es, das CSS- und JS-File von Shadowbox nur zu laden, wenn es in einem Blogbeitrag auch wirklich benötigt wird.

Der Vorteil liegt klar auf der Hand. Sofern auf der Startseite des Blogs Shadowbox nicht benötigt wird, wird es auch nicht mit geladen. Das Blog lädt insgesamt schneller. Ebenso Beiträge, die absofort auf die Shadowbox verzichten können.

Scriptastisch!
Hierbei handelte es sich natürlich nur um ein Beispiel aus meiner Arbeit. Sicherlich werdet ihr das auch kennen, dass man diverse Javascripts oder gar Frameworks bequemerweise immerzu in den HEAD einer Seite einfügt, dass es auch sicher immer geladen wird. Es ist richtig, dass man so eventuellen Fehlern aus dem Weg geht. Aber ist es nicht auch ein Fehler an sich unnötige Dinge mit zu laden? Oder fahrt ihr in eurem Auto prinzipiell ein Snowboard mit rum, weil es ja irgendwann einmal schneien könnte?

Plugin, Wordpress, Plugin-Out!
Ich liebe Wordpress, ich gebe es zu. Ein tolles CMS, mit dem sich allerhand anstellen lässt. Die Plugins aber sind oft nur ansatzweise gut. Sinnvolle Funktionen werden mehr oder minder nachgerüstet auf Kosten der Ladezeit! Man sollte sich vornehmen, Scripte nur zu laden, wenn es auch wirklich notwendig ist! Unabhängig davon, ob es sich nun um Wordpress, ein anderes CMS oder statische Seiten handelt.