Fakt ist: Rund 80% der Ladezeit einer Website geht vom Frontend aus. Also von HTML, CSS, Grafiken, JavaScript, Flash-Komponenten und deren Zusammenspiel. Fakt ist auch: Dank heute verfügbarer Bandbreiten gibt es kaum noch eine Seite, die aufgrund der transportierten Datenmengen lange Ladezeiten verursacht. Das beweisen großflächige Hintergründe und hochauflösende Fotografien auf vielen Internet-Seiten täglich. Wo liegen also die Gründe für dennoch vorhandene lange Ladezeiten und welche Optimierungsmöglichkeiten gibt es hier?

Grundlegendes: Trennung von HTML, CSS und JavaScript

Leider sieht man heute immer noch Seiten, die dem Betrachter des Quelltexts einen kalten Schauer über den Rücken jagen. Bunt gemischt stehen hier HTML, Style-Anweisungen (CSS) und JavaScript-Blöcke. Dies beeinflusst die Ladezeit erheblich. Deshalb an dieser Stelle: HTML, CSS und JavaScript müssen getrennt voneinander in eigenen Dateien stehen.

Dies sollte die grundlegende Herangehensweise eines Web-Entwicklers sein. Zum besseren Verständnis ein Vergleich: Ein Auto muss vier Räder und ein Lenkrad haben, um nicht in der ersten Kurve liegen zu bleiben. Es geht also um Grundvoraussetzungen. Nun zum, sagen wir: Sport-Tuning.

Zauberwort HTTP-Requests

Im Mittelpunkt der Optimierungsversuche sollten zunächst einmal die HTTP-Requests stehen, also die Anzahl der Anfragen, die der Browser an den Server stellt. Der Aufbau dieser Kommunikation dauert mitunter länger als die tatsächliche Übertragung der Daten. Ziel muss es also sein, die Anzahl dieser Requests auf ein Minimum zu reduzieren. Wie erreichen wir das? Betrachten wir drei Methoden, mit denen Sie der Ladezeit Ihrer Website einen Kick verpassen können.

CSS-Sprites
Eine Technik zum Einsparen von Requests sind sog. CSS-Sprites. In das Layout einer Website werden viele Grafiken und Bilder eingebunden, um die gewünschte Darstellung zu erreichen. Diese Grafiken werden zumeist einzeln geladen und benötigen so jeweils eine eigene Server-Anfrage.

Mithilfe der Sprite-Technik werden diese Grafiken nun in eine einzige Grafik integriert. Diese Grafik wird durch CSS dann jeweils an der richtigen Stelle positioniert. Das kann man sich wie eine Maske vorstellen, hinter der diese Grafik verschoben wird, sodass immer nur der gewünschte Teil sichtbar ist. Die Anzahl der HTTP-Requests lässt sich mit dieser Technik deutlich verringern.

Zu beachten ist, dass sich CSS-Sprites hervorragend für kleine Grafiken wie etwa Pfeile, Listenpunkte, Rahmen, Hintergründe oder Schattierungen eignen. Hochauflösende Fotografien oder andere größere Grafiken in ein Sprite zu stecken, ist aufgrund der enormen Dateigrößen wiederum nicht ratsam.

Mehrere Server
Der Browser, oder genauer das HTTP-Protokoll, baut nur eine begrenzte Anzahl an Verbindungen zu einem Server auf und arbeitet diese ab. Mit mehreren Servern kann es allerdings parallel kommunizieren. Deshalb ist es sinnvoll, gerade statische Dateien wie Grafiken oder CSS-Stylesheets auf einen eigenen Server auszulagern, der unter einer eigenen (Sub-)Domain zu erreichen ist (etwa img.ihre-domain.de), um auf diese Weise Ladezeiten einzusparen. Die verfügbare Bandbreite wird so optimal ausgenutzt.

JavaScript
Gerade in Zeiten von Mashups, Ajax und RIAs erfreut sich JavaScript großer Beliebtheit. Dies führt oft zu einer Vielzahl an Scripten aus verschiedenen Quellen. Oftmals ist entscheidend, an welcher Stelle JavaScripte eingebunden und in welcher Reihenfolge diese ausgeführt werden.

Prinzipiell empfiehlt es sich, Java-Scripte möglichst vor dem schließenden Body-Tag einzubinden. Auf diese Weise verringert sich die gefühlte Ladezeit für den Nutzer. Gerade beim Einbinden externer Scripte wie etwa Google Analytics sollte man dies berücksichtigen. Für Stylesheets gilt übrigens das genaue Gegenteil: CSS-Dateien werden optimalerweise möglichst im HTML-Head eingebunden, um das Rendern der Seite frühestmöglich zu gewährleisten.

Fazit

Diese Grundregeln gehören heute zum Handwerkszeug von Web-Entwicklern – oder sollten es zumindest. Wer sie befolgt, tut dies natürlich nicht zum Selbstzweck, sondern verschafft Usern durch eine technologisch einwandfreie Website angenehme Nutzererlebnisse und senkt die Gefahr von Nutzungsabbrüchen aufgrund schlechter Performance. Gleichzeitig sorgt eine sauber organisierte Code-Basis für Übersichtlichkeit und senkt dadurch die Kosten bei späteren Anpassungen. Und nicht zuletzt: Gerade hat Google darüber informiert, dass nunmehr auch die Ladezeit zur Einstufung einer Website herangezogen wird und unmittelbar in die Ermittlung des Rankings einfließt. Insofern ist ein hochwertiges technologisches Fundament auch ein SEO-Faktor.

Haben Sie Fragen? Suchen Sie Wege, um die Performance Ihrer Website zu optimieren, und benötigen dafür technologisches Know-how? Die Experten von //SEIBERT/MEDIA/TECHNOLOGIES helfen Ihnen gerne, bitte sprechen Sie uns an.

Weiterführende Informationen

Expectional Performance im Developer Network von Yahoo!
Tipps und Tricks für schnellere Websites
Die Website von //SEIBERT/MEDIA/TECHNOLOGIES

Mehr über die Creative-Commons-Lizenz erfahren