4 Gründe warum deine Website schneller als die deiner Wettbewerber sein sollte

Nr. 1 – Eine schnelle Ladezeit verbessert die User Experience und verringert die Absprungrate

Die Menschen sind heutzutage daran gewöhnt nicht lange warten zu müssen – sei es bei der Kassen-Schlange im Supermarkt, oder beim Browsen im Web. Dauert etwas zu lange werden wir ungeduldig, sind genervt und brechen unser Vorhaben ggf. sogar komplett ab. Bei dem Besuch einer Website sprechen wir hier von einer schlechten User Experience, die sich dann in einer höheren Absprungrate äußert. Je länger die Ladezeit einer Website, umso höher ist die Absprungrate. Laut dem Website Monitoring Tool Pingdom beträgt „die durchschnittliche Absprungrate 9% für Seiten, die innerhalb von 2 Sekunden geladen werden. Sobald die Seitenladezeit 3 Sekunden überschreitet, schnellt die Absprungrate hoch, auf 24% bei 4 Sekunden, auf 38 % bei 5 Sekunden, 46% bei 6 Sekunden, bis zu 73% bei 16 Sekunden Ladezeit“.¹

Ein weiterer Punkt bei dem die User Experience stark von der Ladezeit deiner Website bestimmt wird ist die Mobilität der User. Laut Uberall benutzen 62 Prozent der Deutschen ihr Smartphone beim Offline-Shopping, also um während des Einkaufens nach Informationen zu suchen.² Die User erwarten, auch von unterwegs und ohne schnelle W-Lan Verbindung, schnell an Informationen auf einer Website zu kommen, um beispielsweise Preise zu vergleichen. Schade jedoch, wenn die Seite langsam lädt.

Nr. 2 – Eine schnelle Ladezeit führt zu einem besseren Suchmaschinen-Ranking

Die Ladezeit ist mittlerweile ein relevanter Teil der Suchmaschinenoptimierung und beeinflusst das Ranking einer Website. Bereits 2010 hat Google bekanntgegeben die Geschwindigkeit einer Seite als Ranking Signal für die Desktop Suche zu bewerten. In Juli 2018 wurde dann bekannt, das die Ladezeit auch in der mobilen Suche berücksichtigt wird³ . Im Mai 2020⁴ hat Google die erweiterten „Page Experience Signals“ als Bestandteil des Google Search Rankings angekündigt. Bisher beinhalteten die „Page Experience Signals“ vier Punkte: Mobile-Freundlichkeit, Sicherheit (Test auf Malware, betrügerische Seiten, schädliche Downloads und unübliche Downloads), Vorteile die sich bei aus der Verwendung von HTTPS ergeben und Zugänglichkeit durch Vermeidung von Interstitials. Mit den Core Web Vitals wurden diese „Page Experience Signals“ um drei Performance relevante Indikatoren erweitert: „Largest Contentful Paint (LCP)“, „First Input Delay (FID)“ und „Cumulative Layout Shift (CLS)“.

• LCP, die Messgröße der Lade Performance - Der Largest Contentful Paint gibt Auskunft darüber zu welchem Zeitpunkt des Ladevorgangs der größte Inhaltsblock auf einer Seite (dies kann ein Text oder Bild sein) dargestellt wird. Laut Google sollte der größte Inhaltsblock innerhalb der ersten 2,5 Sekunden nach Beginn des Ladens der Seite auftreten.
• FID, die Messgröße der Interaktivität - Der First Input Delay Wert misst die Zeitspanne zwischen der ersten Benutzerinteraktion (z.B. auf ein Button geklickt wird) und dem Zeitpunkt, an dem der Browser in der Lage ist auf diese zu reagieren. Der First Input Delay Wert sollte laut Google weniger als 100 Millisekunden betragen.
• CLS, die Messgröße der visuellen Stabilität - Beim Cumulative Layout Shift wird gemessen, wie „stabil“ die visuelle Darstellung einer Website ist, ob es beim Laden einer Seite oder z.B. beim Nachladen eines Bildes zu unerwarteten „Sprüngen“ im Layout kommt. Laut Google soll der CLS Wert weniger als 0,1 betragen.

Die Web Core Vitals messen damit nicht ausschließlich Performance Werte, sondern berücksichtigen auch die „perceived performance“, die gefühlte Performance einer Website. Die Website muss hierbei nicht zwingend schneller laden, aber durch die Optimierung dieser Werte wird sie sich schneller anfühlen und trägt somit ebenfalls zu einer besseren User Experience bei. Wobei man hierzu sagen muss, dass sich viele Verbesserungen der Web Core Vitals durch „klassische“ Performance Optimierungen erreichen lassen.

Hier findest du eine Liste aller Page Experience Signals.

Nr. 3 – Eine schnelle Ladezeit steigert die Conversion-Rate

Die gesteigerte Conversion-Rate aufgrund einer schnellen Ladezeit ist aus meiner Sicht eine zwangsläufige Folge aus den Punkten 1. und 2. Wir reduzieren die Absprünge, da wir aufgrund schneller Ladezeiten keine frustierten und genervten Nutzer haben und sind allg. besser auffindbar. Gute Voraussetzungen für erhöhte Conversion-Raten. Laut der Studie „Milliseconds make Millions“, die von Deloitte Digital durchgeführt und von Google beauftragt wurde, erhöhte sich die Conversion-Rate im Einzelhandel um durchschnittliche 9,2%, wenn die Ladezeit der mobilen Website bereits um eine Zehntelsekunde verbessert wurde.⁵

Die Studie findet ihr hier. Bei einer Website die einen Tagesumsatz von 1.000 € macht, wären das erstmal nur 92 € am Tag mehr, was, auf den Monat gerechnet, aber bereits ein Plus von 2.760 € bedeuten würde.

Nr. 4 – Eine schnelle Ladezeit führt zu weniger CO2 Emissionen

Der Energieverbrauch einer Website steigt mit der Ladezeit. Für den Aufruf einer Seite wird Strom in den Server- und Rechenzentren, bei der Übertragung über das Netzwerk und letztlich auch vom Endgerät verbraucht, mit dem wir die Seite besuchen. Ist eine Seite dabei sehr rechenintensiv für das Endgerät, weil beispielsweise viel JavaScript geladen und ausgeführt werden muss, steigt der Energiebedarf weiter. Wir merken das meist an einer ansteigenden Wärmeentwicklung, weil sich das Smartphone durch die erhöhte CPU-Rechenleistung erhitzt, oder wenn beispielsweise die Lüfter am Computer anspringen.

Eine schnelle Website kann nicht nur direkt, sondern auch indirekt Energie und CO2 einsparen. Mit all den vorherigen Punkten kommt der User schneller an sein Ziel und zusammen mit relevantem Content und einer gut strukturierten Seite können wir so Absprünge vermeiden und hiermit vermutlich auch weiteres Browsing und Anfragen an Suchmaschinen verhindern.

Eine optimierte Website sollte nur so viel Code wie nötig laden. Je kleiner die Dateigrößen und je weniger Dateien insgesamt bei einem Seitenaufruf geladen werden müssen, umso weniger CO2 wird emittiert.

Welche Maßnahmen zur Performance Optimierung gibt es?

Es gibt eine Vielzahl an Maßnahmen zur Performance Optimierung, mit denen sich für jedes Projekt, Infrastruktur und Budget ein passendes Paket schnüren lässt. Dabei unterscheide ich drei Aufgabenbereiche: Website, Browser und Server. Je nach Projekt können wir ggf. einen Bereich mehr oder weniger stark beeinflussen, einige Optimierungsmaßnahmen wirken im ersten Moment vielleicht übertrieben oder kleinlich, aber wir sollten so viele Maßnahmen wie möglich umsetzen, da sie am Ende in der Summe, auch wenn nur hier und da einige Kilobyte oder Millisekunden eingespart werden, entscheidend sein können.

Im Bereich Website gibt es oftmals viel Optimierungs-Potential, das im Frontend anfällt. Zu den üblichen Optimierungsmaßnahmen gehören zum Beispiel die Verwendung moderner Datei- und Bildformate, die durch effiziente Kompressionsmethoden eine kleine Dateigröße aufweisen, die korrekte Auslieferung von Bildern in der richtigen Größe des aktuellen Endgerätes sowie dem sog. Lazy Loading, das Nachladen von Bildern, Videos oder iFrames die beim Scrollen in den sichtbaren Bereichs kommen, führen zu einer deutlich besseren Performance. Ebenso die Verwendung von Caching-Methoden und das Verkleinern (das sog. Minifizieren) von Source Code sind wichtige Optiermungsmaßnahmen. Viele Maßnahmen in diesem Bereich können und sollten wir automatisieren. Die Auswirkung von Drittanbieter Code sollte ebenfalls unbedingt berücksichtigt werden.

Die Optimierungen die ich in den Bereich Browser zähle sind nicht ganz trennscharf und zählen in ihrer Umsetzung teilweise in den Bereich Website oder Server. Dennoch fasse ich sie in einem eigenen Bereich zusammen, da wir hier speziell Browser und Browser-Funktionen für unsere Performance-Optimierung ansprechen. Hierzu gehören u.a. das gesamte Thema Browser-Caching und Browser Resource Hints.

Im Bereich Server steckt ebenfalls ein riesiges Potential. Neben der Hard- und Software, kommt es auch auf den Server-Standort und dessen Anbindung an, insbesondere wenn es ein internationales Web-Projekt ist (Stichwort CDN). Serverseitiges Caching und Kompressionsmöglichkeiten wie GZip oder brotli sollten genutzt werden, aber auch die Verwendung aktueller Protokolle wie HTTP/2 sorgen für einen Performance-Schub. Unter anderem kann auch die Verwendung einer aktuellen PHP Version einen deutlichen Unterschied bedeuten – der Hosting Provider Kinsta hat beispielsweise die Leistung von 22 Plattformen auf 6 verschiedenen PHP-Versionen getestet und deutliche Performance Verbesserung bei neueren PHP-Versionen festgestellt.⁶ Weiterhin gibt es auch kleinere Best Practices, wie z.B. das Vermeiden von unnötigen Redirects.

Insgesamt sind die Einsparmöglichkeiten groß und können teilweise bereits mit kleineren Anpassungen vorgenommen werden, werden aber schnell aufwändiger werden, je größer das Projekt, die Infrastruktur oder die Code-Base ist. Aus meiner Sicht sollte eine Website nur so viel Code wie nötig laden, um so schnell wie möglich zu sein.