Gaby Jenni
UX Strategist
Oct 17, 2022 8 min read

Warum ist Website Performance so wichtig?

Egal, wie schön dein Design oder wie gut dein SEO ist: Ist deine Website zu langsam für deine Nutzer*innen, verlierst du sie so schnell, wie sie gekommen sind. Dass Google Websites, die langsam laden, im Pagerank abstraft, ist inzwischen längst bekannt.

Welche Faktoren die Ladezeit deiner Website beeinflussen und welche Massnahmen du ergreifen kannst, erläutern wir dir in diesem Artikel.

Was ist eigentlich Website Performance?

Die Performance einer Website bezieht sich auf die Geschwindigkeit, mit der die Website heruntergeladen und dem User im Webbrowser angezeigt wird. Der Page Speed kann anhand verschiedener Tools gemessen und analysiert werden. 

Zum Beispiel mit Page Speed Insights von Google. Die Ergebnisse werden auf einer Skala von 1-100 bewertet. Das Gute dabei ist, dass die Seite nicht nur analysiert wird, es werden auch direkt Optimierungstipps geliefert.

Welche Faktoren beeinflussen die Performance und wie?

Folgende Punkte spielen fĂĽr die Performance deiner Website eine essentielle Rolle und werden in der Gesamtbewertung deiner Website unterschiedlich gewichtet:

First Contentful Paint

Die First Contentful Paint misst, wie lange es dauert, bis der Browser die ersten Inhalte geladen hat. Zu diesen Inhalten zählt, was sich innerhalb der HTML Struktur einer Webseite abbildet.

Dazu gehören SVG oder PNG Dateien oder Skripte, die früh ausgeführt werden. Nicht dazu zählen etwa Inhalte in iframes.

Gewichtung: 10%

Empfohlen wird daher, keine grossen Elemente am Seitenanfang zu platzieren. Ebenfalls wirken sich Video-Headers stark negativ auf die First Contentful Paint aus, wobei Videos in der Mitte der Seite nicht relevant für den FCP sind. 404er haben ebenfalls negative Folgen für den FCP-Wert und sollten deshalb reduziert und im Idealfall ganz vermieden werden. Gleiches gilt für Page Redirects (301), diese führen zu Serverabfragen, welche Zeit kosten (Avoid multiple page redirects) und deswegen wenn möglich vermieden werden sollten.

Speed Index (10%)

@Gaby Jenni

Erklärung
Während Metriken wie First Contentful Paint einen einzelnen Zeitpunkt messen, besteht der Zweck des Speed Index darin, den gesamten Ladevorgang der Seite zu erfassen.

Der Speed Index zeigt die durchschnittliche Zeit an, die eine Seite benötigt, um von ihrem Ausgangszustand (blank screen) zu einem visuell vollständigen Zustand zu gelangen. Diese Metrik ist benutzerorientiert: Sie verfolgt nur den visuellen Fortschritt, so wie ein User die Ladegeschwindigkeit wahrnehmen wird. Die Seite kann problemlos Komponenten und Daten im Hintergrund laden, ohne die Metrik negativ zu beeinflussen.

Messung
Lighthouse nimmt im Hintergrund ein Video des Ladevorgangs auf und berechnet die Differenz zwischen den einzelnen Frames. Das Ergebnis dieser Video-Analyse wird dann mit realen Websites aus dem HTTP-Archiv verglichen – daraus ergibt sich dann der Score.

Konzeptionelle/UX Optimierungen

Dabei können einfache Optimierungen vorgenommen werden, um die Metrik positiv zu beeinflussen. Bilder sollten nie grösser als 1MB sein. Durch die Reduzierung der Dateigrösse kannst du die Leistung deiner Webseite verbessern. (How to Use WebP Images) Im Idealfall könntest du die Bilder als WebP-Format verwenden. Hier findest du die grössten Vor- und Nachteile dieses Format. Ausserdem sollten Videos, wenn möglich, extern bei einer Videoplattform gehosted werden (zB. Vimeo). Vorteile: schnellere Ladezeit der Seite, Video Qualität wird automatisch an den User angepasst und sie sind einfach zu teilen. (embedding vs. uploading video)  

Technische Optimierungen

Auch technisch können einige Anpassungen zu einer verbesserten Leistung der Webseite führen. Dabei kann der Main-Thread entlastet werden, wenn unnötiges Java Script zu einem späteren Zeitpunkt geladen wird. (siehe auch: Total Blocking Time) Eine weitere Optimierung ist es den Flash of Invisible Text (FOIT) also das Verhalten vom Browser, den Text so lange nicht anzuzeigen, bis der externe Font vollständig geladen ist, zu vermeiden. Durch einen kleinen Trick kann währenddessen der Inhalt sofort mit einer Systemschriftart angezeigt werden. Hierzu gibt's zwei Optionen: Entweder arbeitet man mit font-display: swap, welcher den Browser anweist, bis zum Laden der Schrift eine Schrift aus der Liste der Alternativen zu benutzen und auf den Webfont umzuschalten, sobald die Schrift geladen ist oder das CSS wird so überarbeitet, dass beim ersten Laden keine Custom Fonts verwendet werden.

Falls dich weitere technische Aspekte interessieren findest du hier weitere Optimierungsmöglichkeiten:

Quellen:
Speed Index ,What's Speed Index and How to Improve It on WordPress  ,What is Speed Index? How to Improve Speed Index?

Largest Contentful Paint (LCP / 25%)

@Dimitri Wittwer

Erklärung
LCP ist eine sehr wichtige Metrik, da sie aufzeigt, wann die Seite für einen User die relevanten Inhalte anzeigt. FCP Im Gegensatz nützt dem User noch nicht wirklich viel, da sie nur misst, wie rasch die ersten Inhalte geladen werden. Der LCP Wert gibt die Renderzeit des grössten Bildes oder Textblocks innerhalb des sichtbaren Viewports an.

Messung
Gemessen wird die Ladezeit bis das grösste Element im Viewport vollständig angezeigt wird.

Konzeptionelle/UX Optimierungen

Es sollte immer klar sein, welches Element das grösste auf deiner Webseite ist. Wenn du dieses Element identifiziert hast solltest du versuchen dieses möglichst klein zu halten. Oftmals sind grosse Slider, die viel Bildmaterial beinhalten zu heavy. Die Optimierung der Bilder könnte dem Abhilfe schaffen.

 

Technische Optimierungen

Durch Caching müssen gewisse Inhalte wie zB. Stylesheets, Bilder, JS nicht jedesmal aufs Neue geladen werden. (Achtung: Browser-Cache hat eine Lifetime von 24h, sofern Cache nicht manuell geleert wird) Durch serverseitiges Caching lässt sich die Cache-Lebensdauer des Browser Caches festlegen. Dazu teilt der Server dem Browser mit, wie lange bestimmte Dateien einer Website gespeichert werden sollen.

Quelle:
Largest Contentful Paint

Time to Interactive (TTI / 10%)

@Gaby Jenni

Erklärung
Time to Interactive misst, wie lange es dauert, bis eine Seite vollständig interaktiv ist. Eine Seite gilt als vollständig interaktiv, wenn:

  • Die Seite zeigt nĂĽtzliche Inhalte an (siehe First Contentful Paint)

  • Event-Handler fĂĽr die meisten sichtbaren Seitenelemente registriert sind und

  • die Seite auf Benutzerinteraktionen innerhalb von 50 Millisekunden reagiert.

Messung
Wie beim Speed Index, werden auch hier die Ergebnisse aus der Analyse mit realen Daten aus dem HTTP Archive verglichen.

Konzeptionelle / UX Optimierungen

Technische Optimierungen

Analog zum Speed Index kann auch hier der Haupt-Thread entlasten werden. Ein durch lang-laufende JS blockierter Haupt-Thread wirkt sich ebenfalls negativ auf den Score aus. Weiter hilfreich für die bestmögliche Performance sind die Reduzierung der Ausführungszeit von JavaScript und das vermeiden von parallel laufenden Netzwerkabfragen.

 

Quellen:
Time to Interactive , How to Improve Time to Interactive (TTI) on WordPress

Total Blocking Time (TBT / 30%)

@Michelle Andrey

Erklärung
TBT misst die Gesamtzeit, in der eine Seite nicht auf Benutzereingaben wie Mausklicks, Bildschirmberührungen oder Tastatureingaben reagieren kann. Die Summe wird berechnet, indem der blockierende Anteil aller langen Tasks zwischen “First Contentful Paint” und “Time to Interactive” addiert wird. Jede Aufgabe, die länger als 50 ms ausgeführt wird, ist eine lange Aufgabe. Die Zeitspanne nach 50 ms ist der blockierende Anteil.

Beispiel: Wenn Lighthouse eine 70 ms lange Aufgabe erkennt, beträgt der blockierende Anteil 20 ms.

Messung

Tipps & Tricks

 

Konzeptionelle Optimierungen

 

Technische Optimierungen

Für die meisten Webseiten müssen Sie in der Regel ein Skript eines Drittanbieters zu Ihrem HTML-Code hinzufügen. Dieser Third-Party-Code kann die Ladeleistung Ihrer Seite erheblich beeinträchtigen. Finde hier nützliche Tipps um die Auswirkung zu minimieren: Reduce the impact of third-party code. Eine Verringerung der Anzahl der Anfragen oder der Übertragungsgrößen gewisse Leistungskennzahlen verbessern. Alle "Tekkies" unter uns finden hier mehr Infos dazu: Keep request counts low and transfer sizes small.

 

Quelle:
Total Blocking Time

Cumulative Layout Shift (CLS / 15%)

@Alexander Muischneek

Erklärung
Layout Shift bedeutet, ein plötzliches Verschieben des aktuellen Contents, weil andere Elemente (z.B: Banner oder Bilder) eingeblendet oder in der Grösse verändert werden. Dies ist aus Benutzersicht sehr irritierend und man weiss teilweise nicht mehr, wo man vorher war. Good to know: Animationen mit CSS Transitions gelten nicht als CLS.

Messung

Konzeptionelle Optimierungen

Dynamischer Content, welcher z.B. während dem Scrollen plötzlich / unerwartet angezeigt wird (typische Beispiele sind Newsletter Signups, verwandte oder nächste Artikel, etc.). Diese sollten wenn möglich reduziert oder ganz weg gelassen werden. Dies gilt aber nicht für Animationen mit normalem Scrollverhalten.

Technische Optimierungen

Bilder, Ads, Embeds und iFrames ohne fix definierte Grösse werden initial als nicht vorhandenes Element gerendert und nehmen den Platz erst ein, wenn das das entsprechende Element (Bild oder embedded Source) geladen wurde (was häufig etwas später sein kann). Im HTML-Tag muss daher zwingend width und height angegeben werden, damit der Platz "reserviert" wird.

Web Fonts, welche zu spät geladen werden, sorgen dafür, dass der Text entweder ersetzt wird mit der neuen Font (“FOUT” - flash of unstyled text) also bei Fonts welche aufgrund von schwachen Verbindungen oder inperformanten Schriften, zunächst ohne den Webfont und mit der Standardschriftart gerändert werden oder Text versteckt bzw. neu angezeigt wird (“FOIT” - flash of invisible text - siehe auch Performance | Speed Index). Dieses Problem kann am besten gelöst werden, in dem Fonts preloaded werden.

Ressourcen:
Cumulative Layout Shift (CLS)

Glossar

Main-thread: Im Haupt-Thread verarbeitet der Browser Benutzerereignisse und Styles. Alle JavaScript-Funktionen werden in diesem Thread ausgeführt. Dies bedeutet, dass lang laufende JavaScript-Funktionen den Thread blockieren können, was zu einer nicht reagierenden Seite und einem schlechten Benutzererlebnis führt. Je weniger der Haupt-Thread leisten muss, desto mehr kann er auf Benutzerereignisse reagieren.

Rendering: Der Prozess im Browser, der den Code in die Website umwandelt.

FOIT: flash of invisible text - Das Verhalten vom Browser, den Text so lange nicht anzuzeigen, bis der externe Font vollständig geladen ist.

FOUT: flash of unstyled text - Gemeint ist damit ein Effekt der bei der Verwendung von Webfonts eintreten kann. Bei schwachen Verbindungen oder bei inperformanten Schriften kann es vorkommen, dass die Website zunächst ohne den Webfont und mit der Standardschriftart gerändert wird.