Es ist mal wieder Zeit für einen Freaky Friday Artikel. Heute soll es mal um die Optimierung von Webseiten in pucto Geschwindigkeit gehen. Im Moment bin ich in ein Projekt eingebunden, bei dem es genau darum geht. Die Optimierung der Performance einer Applikation. Ihr kennt das sicherlich. Man öffnet eine Website und sie braucht eben ein bisschen, um komplett dargestellt zu werden. Selbst wenn sie auf dem Bildschirm zu sehen ist, rödelt da noch was im Hintergrund. Man merkt einfach, dass die Seite noch nicht komplett geladen ist.
Im Zeitalter von Rich Internet Applications (RIA) und immer schneller werdenden Internetverbindungen vergisst man nur all zu gern auf die Performance der Seite zu achten und legt eher Wert auf super fancy Effekte und ein atemberaubendes Layout. Zu sehr verschachteltes Markup, ausartende CSS Definitionen und exzessiver Einsatz von Javascript Bibliotheken. Ganz plötzlich ist so eine eigentlich einfache Seite dann mit allen Requests über 150KB groß und benötigt eben seine Zeit. Bis dann alle Event Listener gesetzt sind, kann es schon mal sein, dass die Seite sich eher zurecht ruckelt, als in einem Stück geladen zu werden.
In einem konkreten Fall ging es um die Einbindung eines so genannten Tab Panels. Für die Realisierung wurde stark verschachteltes Markup platziert, welches durch ein jQuery Plugin mit Event Listenern belegt wurde. Versteht mich nicht falsch. Das ist nach wie vor eine gern benutzte Variante, die nicht falsch ist. Diese Variante bringt aber einige Nachteile mit sich. Die jQuery Bilbiothek ist in seiner kleinsten, vollständigen Variante knapp 85KB groß. Das jQuery Plugin war nochmals über 25KB groß. Dazu noch entsprechende CSS Eigenschaften in einer entsprechenden Datei, die nochmals 5KB groß war. Allein diese zusätzliche Last beträgt dann also schon 115KB. Mit jedem Aufruf der Seite musste das alles also erstmal geladen werden. Zudem haben die Javascript Event Listener, die nicht etwa auf das Eltern Element des Tab Panels, sondern auf jedes einzelne zu überwachende Element gelegt wurden, die Seite relativ langsam gemacht.
Wie geht sowas denn besser?
Nun, wir sind mittlerweile im Jahre 2016 angekommen. Wenn ich als Entwickler ehrlich bin, nutze ich jQuery nur noch aus Bequemlichkeit. Einfache Verkettung von Javascript Funktionen, verkürtze Schreibweisen, etc. Wirft man aber mal einen Blick auf die Entwicklung der Browser, so muss ich jQuery eigentlich gar nicht mehr benutzen. Das Javascript Framework jQuery war eigentlich mal ein willkommener Helfer, um die grundverschiedenen Browser Eigenschaften bei der Umsetzung von Javascript aufzufangen und auf einen Nenner zu bringen. Mittlerweile sind die Unterschiede zwischen den einzelnen Browsern, sofern man die letzten drei Major Releases der Browser betrachtet, gar nicht mehr so groß. Eigentlich kann man heutzutage auch direkt natives Javascript benutzen. Das arbeitet schneller als jQuery und ich muss jQuery nicht erst in die Seite einbinden. Somit wird die Ladezeit meiner Seite positiv beeinflusst.
Brauche ich in Zeiten von CSS3 überhaupt noch Javascript, um ein einfaches Tab Panel umzusetzen? Nein, definitiv nicht. Ich kann mir sämtliche Event Listener sparen und das Laden der Seite nochmals beschleunigen, indem ich einfach nur CSS für ein responsives Tab Panel benutze. Im genannten Beispiel konnte somit die Größe der zu ladenden Daten von knapp 115KB auf 3KB reduziert werden. Nicht nur die Suchmaschinen, sondern auch Eure Besucher werden es Euch danken, wenn die Seite in atemberaubender Geschwindkeit auf dem Mobiltelefon einfach sauber funktioniert.
CSS3 Tab Panel ohne Javascript
Ja, sowas geht wirklich mit nur wenigen Handgriffen. Natürlich gibt es dazu auch ein kleines praktisches Beispiel. Einfach nur HTML und CSS3. Es wurde absolut kein Javascript verwendet. Habt Spaß damit. Den Quelltext könnt ihr natürlich frei verwenden. Im Beispiel selbst wurden CSS3 Transitions verwendet. Natürlich sind hier noch einige andere Einblend- oder Scroll Effekte denkbar. Das Beispiel ist nur quick and dirty.