Optimierungstechniken für eine bessere Front-End-Web-Performance
Kommentare

Zu den essentiellen Elementen einer guten User Experience gehört neben vielen anderen Faktoren auch eine gute Seitenladezeit. Gleichzeitig zählt die Performance einer Website auch zu den Kriterien, mit denen Googles Algorithmus das Ranking innerhalb der Suchmaschinenergebnisse ermittelt – ein zusätzlicher Grund also, warum die Optimierung der Seitenladezeit bei Webdesignern durchaus weit oben auf der Liste der regelmäßigen Aufgaben stehen sollte.

Pedro Semeano hat einige Tipps zusammengefasst, mit denen sich die Front-End-Web-Performance verbessern lässt.

HTML-Struktur optimieren

Um die Seitenperformance zu verbessern, gibt es verschiedene Techniken, die wir euch in der Vergangenheit bereits kurz vorgestellt haben. Sie gehen idealerweise alle Hand in Hand, sodass es ratsam ist, nicht nur auf eine bestimmte Technik zu setzen und andere links liegen zu lassen. Besonders die Optimierung der HTML-Struktur und die passende Server-Konfiguration sind zwei Methoden, die für eine bessere Front-End-Web-Performance sorgen können – und zwar sowohl auf Desktop, als auch auf Mobile Devices.

Dass die HTML-Struktur Einfluss auf die Seitenladezeit nimmt, erklärt sich eigentlich von selbst. Es ist darum unerlässlich, für ein möglichst gutes HTML-Markup zu sorgen, was nicht nur die Performance verbessern kann, sondern auch die Lesbarkeit des Codes erhöht. Meist wird dabei allerdings der Verweis auf externe Ressourcen wie die benötigten JavaScript- und CSS-Dateien direkt in den des HTML-Dokuments gesetzt.

Das Problem an der Sache: im ungünstigsten Fall blockieren die Dateien das Rendern der Seite, sodass keine weiteren HTML-Elemente angezeigt werden, bis die entsprechende Ressource-Datei vollständig heruntergeladen wurde. Die JavaScript- und CSS-Ressourcen erst am Ende des Dokuments – also vor dem -Tag zu referenzieren, ist dabei eine mögliche Lösung und im Fall von JavaScript auch nicht besonders schwierig umzusetzen.

Anders sieht es dagegen bei am Ende abgerufenen CSS-Dateien aus. Häufig kommt es dabei zum sogenannten „flash of unstyled content“ (FOUC), der dafür sorgt, dass User die Seite ohne jegliche Styles sehen, wenn diese noch nicht aus der externen Ressource geladen wurden. Dem kann man auf verschiedene Arten aus dem Weg gehen, etwa indem mit style-Attributen im -Element oder inlined CSS und JavaScript gearbeitet wird – zumindest, wenn man nur kleine Mengen CSS und JavaScript benötigt. Allerdings handelt es sich dabei um einen Lösungsansatz, der aus guten Gründen nicht gerne gesehen wird.

Bessere Performance durch richtige Server-Konfiguration

Auch bei der Server-Konfiguration lässt sich einiges für eine bessere Seitenperformance tun. Zum einen sollte man den Seitendateien, also zum Beispiel den externen Stylesheets, JavaScript-Dateien oder Bildern, erlauben, vom Browser gecached zu werden, indem im HTTP-Header Cache-Control spezifiziert wird. Damit kann definiert werden, wie und vor allem wie lange der Browser einzelne Dateien cachen soll.

Die aktuellen Einstellungen lassen sich beispielsweise mit den Chrome DevTools inspizieren und – falls nötig – entsprechend anpassen. Wie lange einzelne Dateien gecached werden sollten, hängt davon ab, wie oft sie geändert werden. CSS- und JavaScript-Dateien können dabei durchaus auch über ein Jahr hinweg gecached werden, während für Bilddateien ein kürzerer Zeitraum empfohlen wird.

Auch mit Datenkomprimierung kann die Seitenladezeit verbessert werden, weil die benötigten Dateien schneller heruntergeladen werden können. Dabei werden die komprimierten Dateien nach der Anforderung heruntergeladen und anschließend vom Browser dekomprimiert. Zum Komprimieren von Dateien können Tools wie GZip auf dem Webserver aktiviert werden; wie man dafür bei Apache und NGINX vorgehen sollte, erklärt Pedro Semeano ausführlich mit Code-Beispielen in seinem Artikel.

In jedem Fall wird deutlich, dass die Optimierung der Seitenperformance problemlos in die normale Arbeitsroutine integriert werden kann und so für konstant gute Ergebnisse sorgt. Es gibt dabei einige Prozesse, die sich leicht automatisieren lassen und so am Ende nicht nur für eine bessere Performance der Website sondern vor allem auch für eine besser User Experience sorgen – und darauf sollte wirklich jeder Webentwickler Wert legen.

Aufmacherbild: Measuring performance for adv or others purpose use von Shutterstock / Urheberrecht: NH

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -