Performance aus Frontend-Sicht

Arten von Performance

Bei Factorial unterscheiden wir zwischen drei Arten von Frontend-Performance:

• Lade-Performance
• Wahrgenommene Performance
• Laufzeit-Performance

Die Lade-Performance beschreibt im Grunde die Datenmenge – man kann sich das wie das Gewicht einer Website vorstellen – die beim Aufruf der Seite an den Browser der Nutzer*innen übertragen wird: das HTML-Dokument selbst, Assets wie CSS- und JavaScript-Dateien und – am wichtigsten – Inhalte wie Bilder und Videos. Auch wenn sich eine Website trotz vieler Daten schnell anfühlen kann (wenn sie gut umgesetzt ist), sollte man diese Zahl so gering wie möglich halten: Große Datenmengen belasten nicht nur Ihr eigenes Budget und das Ihrer Kund*innen, sondern führen auch zu einem höheren Energieverbrauch – auf den Geräten der Nutzer*innen und auf dem Server, auf dem Ihre Website gehostet wird.

Die wahrgenommene Performance beschreibt, wie schnell Ihre Website sichtbar und benutzbar wird. Sie wird oft direkt von der Lade-Performance beeinflusst, doch wie schon erwähnt, gibt es Techniken, um auch bei großen Datenmengen ein schnelles Nutzererlebnis zu schaffen.

Die letzte Kategorie – Laufzeit-Performance – beschreibt, wie sich die Website während der Nutzung anfühlt: Funktionieren Scrollen und Animationen flüssig oder wirkt alles ruckelig? Reagiert die Seite unmittelbar, wenn Nutzer*innen auf einen Button klicken, oder lässt die Reaktion auf sich warten?

Runtime Performance

Tools zur Performance-Analyse

Es gibt viele Tools und Dienste, die helfen können herauszufinden, was Ihre Website verlangsamt. Die wichtigsten Tools sind direkt im Browser integriert – meist unter dem Begriff DevTools (Developer Tools) – und ermöglichen die Analyse aller Performance-Aspekte.

Online-Tools können lediglich die ersten beiden Performance-Typen analysieren: Lade- und wahrgenommene Performance. Auch wenn diese Tools dabei helfen können, Probleme und deren Ursachen zu identifizieren, sollte man beachten, dass sie in der Regel nur eine einzelne Seite Ihrer Website analysieren – und versuchen, genau diese Seite so schnell wie möglich zu machen. Das Problem: Nutzer*innen besuchen (hoffentlich) mehrere Seiten Ihrer Website. Eine einzige Seite zu optimieren kann dazu führen, dass nachfolgende Seiten langsamer laden. Beispiel: Wenn Ihre Website beim ersten Seitenaufruf alle Stylesheets für die gesamte Website lädt, dauert dieser erste Aufruf etwas länger – die Folgeseiten laden dafür schneller. Optimiert man die Seite dagegen so, dass nur die für die erste Seite nötigen Stylesheets geladen werden, müssen die anderen Seiten später zusätzliche Stylesheets nachladen – was sie verlangsamt.

Quick Wins für Ihre Website

Wie Sie sehen, gibt es nicht den einen Grund, warum eine Website langsam ist – und auch nicht die eine Lösung, sie schneller zu machen. Glücklicherweise gibt es aber einige allgemeine Maßnahmen, die für jede Website gültig sind. Da die Analyse und Behebung von Laufzeit-Problemen oft tiefere Kenntnisse des Quellcodes erfordert, konzentrieren wir uns hier auf Lade- und wahrgenommene Performance.

Lade-Performance

Zuerst sollten wir sicherstellen, dass Ihre Website möglichst schlank ist, um die Lade-Performance zu verbessern. Dazu gehören folgende Maßnahmen:

• Komprimierung aktivieren für alle Dateien mit Textinhalt: HTML, CSS, JavaScript, JSON, SVG usw. Üblich sind gzip oder Brotli, wobei letzteres oft effizienter ist. Beide lassen sich so konfigurieren, dass die Dateigröße maximal reduziert wird – was aber zu langsameren Dekompressionen führen kann. Ein Kompromiss ist wichtig – aber selbst unkonfigurierte Komprimierung ist besser als gar keine.
• Minifizierung aller Dateien, die komprimiert werden: Entfernen unnötiger Leerzeichen, Zeilenumbrüche und Umbenennung von Funktionsnamen – natürlich ohne die Funktionalität zu beeinträchtigen. Dieser Prozess ist meist Teil des Build-Prozesses, kann aber auch manuell über Dienste wie minifier.org durchgeführt werden.
• Bilder und Videos haben den größten Einfluss auf das „Gewicht“ der Website. Sie sollten möglichst klein und in der richtigen Auflösung implementiert sein. Automatisierung ist möglich, führt aber oft zu schlechteren Ergebnissen. Manuelles Bearbeiten ist meist besser. Für PNGs kann ImageAlpha helfen: Es reduziert die Farbtiefe (z. B. von 2^24 auf 256 oder weniger), was oft völlig ausreicht und bis zu 80 % der Dateigröße sparen kann.
• Das richtige Format wählen: Grob gesagt: PNG > JPG > WEBP (GIF möglichst vermeiden). Ausnahmen bestätigen die Regel – auch hier lohnt sich manuelles Testen.
• Nur wirklich benötigte Dateien laden: Bei Websites, die nicht komplett neu entwickelt, sondern z. B. über ein CMS wie Drupal erstellt wurden, werden oft zusätzliche CSS-/JS-Dateien geladen, die gar nicht genutzt werden. Diese sollten entfernt werden – nicht nur zur Reduzierung der Ladezeit, sondern auch um mögliche Konflikte zu vermeiden. Dabei muss man jedoch darauf achten, ob die Dateien an anderer Stelle der Website verwendet werden.

Wahrgenommene Performance

Jetzt, da unsere Website möglichst schlank ist, geht es darum, die wichtigsten Assets zuerst zu laden – alles andere später. Das verbessert die wahrgenommene Performance:

• CSS- und JavaScript-Dateien blockieren normalerweise das Rendering: Wird eine solche Datei im HTML entdeckt, wartet der Browser mit dem Rendern, bis der Download abgeschlossen ist. Für CSS ist das in Ordnung – niemand möchte ein ungestyltes HTML-Dokument sehen. Für JavaScript ist das jedoch oft nicht nötig, da es meist nichts am Look verändert. Die Lösung: <script defer=“true“>. So wird die JS-Datei mit niedriger Priorität im Hintergrund geladen und erst nach vollständigem Laden des HTML-Dokuments ausgeführt.
• Achtung bei Drittanbieter-Skripten: Viele Tracking- und Analyse-Tools müssen blockierend geladen werden. Sie sollten sparsam eingesetzt werden, da sie die Performance beeinträchtigen.
• Drittanbieter-Skripte von fremden Servern können problematisch sein: Ist der Server langsam oder nicht erreichbar, kann dies Ihre komplette Website blockieren. Besser: alle Assets vom eigenen Server ausliefern – auch wegen der besseren Cache-Kontrolle.
• Lazy Loading für Bilder: Bilder erst laden, wenn sie sichtbar werden (oder kurz davor). Moderne Browser wie Edge, Firefox und Chrome unterstützen loading=“lazy“ nativ.

Fazit

Die zentrale Aussage: Performance ist ein entscheidender Erfolgsfaktor für Ihre Website – sie entscheidet darüber, ob sich Nutzer*innen wohlfühlen oder abspringen. In diesem Artikel habe ich einige einfache Schritte beschrieben, um die Performance zu verbessern. Aber: Jede Website ist individuell. Die maximale Optimierung erfordert tiefere Analysen und gegebenenfalls komplexere Änderungen. Wenn Sie glauben, dass Ihre Seite noch Potenzial hat – und das Beste herausholen wollen – dann melden Sie sich gerne bei uns.