Egal, wie gut Dein SEO oder Deine UX ist: Wenn Deine Webseite zu langsam für Deine Nutzer ist, verlierst Du sie so schnell, wie sie gekommen sind. Und viel schmerzhafter: Leads wirst Du auf diesem Weg nicht generieren können.
Welche Erfolgsfaktoren die Ladezeit Deiner Website in neue Sphären katapultieren und wie Du diese planen und sofort umsetzen kannst, darum geht es in diesem Artikel.
Warum ist PageSpeed so wichtig?
Nichts ist sicherer als der Wandel. Klarer Fall, oder? Und das gilt besonders für die Web-Technologien und damit für die Website Performance, die für alle Unternehmen entscheidend sind, die mit und über das Netz Geld verdienen.
Web-Features entwickeln sich rapide weiter, und das Grundprinzip dabei lautet: Zeit ist Geld. Die Ladezeit hat direkte Auswirkungen auf die Conversion und letztlich auf die Umsätze, die mit der Seite generiert werden.
Ein paar Beispiele: Amazon hat 2006 errechnet, dass das Unternehmen 1,6 Milliarden Dollar (!) im Jahr weniger Umsatz machen würde, wenn die Ladezeit der Seite eine Sekunde langsamer wäre. Pinterest hat die subjektive Ladezeit um 40 Prozent gesenkt und damit ein Traffic-Plus von 15 Prozent geschafft.
Bei Walmart sinkt die Conversion mit jeder Sekunde mehr um 2 Prozentpunkte.
Wie sieht das konkret in der Praxis aus? 18 Prozent der Online-Shopper brechen den Einkauf ab, wenn die Seite zu langsam lädt – und 79 Prozent von ihnen kommen danach nicht mehr wieder.
Dass noch eine Menge zu tun ist, hat Google selbst in einem Benchmark von Landingpages herausgefunden. Ein Viertel aller Seiten hat eine Ladezeit länger als 10 Sekunden!
Und mal ernsthaft: Wer wartet denn von uns Nutzern heute noch 10 Sekunden lang ab, bis sich eine Seite dann doch einmal fertig aufbaut? Dass Google selbst Seiten, die langsam laden, im Pagerank abstraft, ist inzwischen längst bekannt.
Halten wir mal kurz fest: PageSpeed beeinflusst die Website Performance und somit direkt Deinen Umsatz. Es gibt aber noch weitere Gründe, warum Du die Geschwindigkeit Deiner Website immer im Blick haben solltest. An erster Stelle steht immer das Nutzererlebnis.
Wie bereits erwähnt: Wenn Deine Nutzer zu lange warten müssen, springen sie ab. Der Nutzer hat jedoch eine sehr subjektive Einstellung zur Ladezeit. Wenn Du eine Ladeanimation hast, sieht der Nutzer direkt, dass etwas passiert und wartet auch mal etwas länger für den ersten Aufruf.
Google hat ein Budget, wie häufig die eigenen Bots eine Seite pro Zeiteinheit crawlen. Da Google Deinen Server nicht mit zu vielen Anfragen gleichzeitig lahmlegen möchte, drosselt Google die Anzahl, wenn die Suchmaschine merkt, dass der Server-Aufruf Deiner Seiten zu lange dauert. Dies ist zwar nur für sehr große Seiten relevant, aber eine schnelle Seite sorgt dafür, dass der Crawler häufiger und schneller Deine Seite crawlen kann.
Dass der Preis für Google Ads sich aus verschiedenen Qualitätskriterien zusammensetzt, ist Dir sicher bekannt. Doch wusstest Du auch, dass die Geschwindigkeit Deiner Website auch dazugehört?
In Google Ads siehst Du eine Spalte “Geschwindigkeit auf Mobilgeräten”. Es gibt Punkte von 0 bis 10, wobei 0 sehr schlecht und 10 sehr gut ist.
Da es verschiedene Kriterien gibt, ist es bei einer Optimierung oft schwer zu sagen, welchen prozentualen Einfluss die Geschwindigkeit hat. Aber mit einem Score von 2 wirst Du bei der identischen Seite tendenziell mehr bezahlen als mit einem Score von 8.
In einem Kundenprojekt optimierten wir für eine Landingpage nicht nur die Ladezeit, sondern ganzheitlich und konnten den CPC um etwa 30 Prozent senken. Weitere positive Effekte: eine viel bessere Conversion!
Google Core Web Vitals: Darauf solltest Du achten
Mittlerweile sollten alle diesen Begriff verinnerlicht haben. Leider ist trotzdem nicht allzu viel passiert. Searchmetrics hat 2021 in einer Studie über zwei Millionen Websites analysiert.
Umso erstaunlicher: 90 Prozent der mobilen Websites haben den Test nicht bestanden.
Ich habe selbst in einem Test die Websites der DAX-Unternehmen analysiert und 85 Prozent der Seiten haben die Core Web Vitals nicht bestanden. Dabei war das größte Problem der Largest Contentful Paint (LCP) – also die Ladezeit des größten Elements im sichtbaren Bereich.
Bei großen Brands ist PageSpeed nicht immer priorisiert. Doch auch hier suchen Nutzer natürlich das Weite, wenn sie zu lange warten müssen.
Das ganze etwas positiver ausgedrückt: 90 Prozent der mobilen Websites haben noch das Potenzial, den Test zu bestehen. Häufig muss nur an kleinen Stellschrauben gedreht werden, damit die Webseite schneller wird.
Website Performance: So planst Du eine schnelle Website
Hast Du Dir schon mal überlegt, wie Du eine schnelle Webseite konzipierst und was dabei wichtig ist? Wenn ja, bist Du bereits weiter als die meisten! Denn: Eine kluge Planung ist die halbe Miete.
In der Vergangenheit war PageSpeed bei vielen häufig ein nerviges Nebenprodukt kurz vor oder nach dem Launch einer Website. Das ist so, als würdest Du aus einem rostigen Transporter plötzlich einen modernen Sportwagen machen. Ja, es ist möglich, kostet aber viel Zeit, Geld und Nerven.
Am besten weißt Du bereits in der Konzeptionsphase, dass Du eine schnelle Website haben möchtest.
Dazu solltest Du Dir ein paar Fragen stellen:
Wie schnell soll die Website sein?
Für einige ist alles unter 4 Sekunden schnell, Google definiert die Grenze bei 2,5 Sekunden. Ich empfehle als Ziel immer eine Ladezeit von unter 2 Sekunden.
Wie schnell Deine Website sein soll, hängt stark von der Zielgruppe ab. Geht es um ein Intranet, und alle Deine Nutzer gehen über den Firmencomputer auf die Seite? Hast Du hauptsächlich mobile Nutzer? Stammen sie überwiegend aus anderen Ländern?
Wie hoch ist die erwartete Last?
Es macht einen großen Unterschied, ob Du zehn Nutzer am Tag oder 10.000 Nutzer am Tag haben möchtest. Das hat Auswirkungen auf Deine Infrastruktur bzw. Dein Webhosting sowie auf Deine Caching-Strategie. Des Weiteren können Bestandteile Deiner Website (wie eine Umfangreiche Produktsuche) bereits mit einem Besucher Deine Performance stark verringern. Die Ladezeit muss immer für alle Unterseiten berücksichtigt und optimiert werden.
Wie sieht die aktuelle Infrastruktur aus?
Du solltest früh beachten, welches Webhosting-Paket Du abgeschlossen hast und welche weiteren Dienste zu Deiner Infrastruktur gehören. Umfasst Deine Infrastruktur zum Beispiel bereits ein CDN (Content Delivery Network) oder eigene Datenbankserver? Für eine sehr gute Performance benötigst Du das passende Webhosting-Paket, was tendenziell mehr als 19,99 Euro kostet.
Welche Caching-Strategie verfolgst Du?
Für große Websites, bei denen sich häufig Inhalte ändern, ist es sinnvoll, eine Cache-Strategie zu entwickeln.
Wann wird der Cache gelöscht und automatisch neu generiert?
Auch darüber solltest Du Dir vorab Gedanken machen. Cache ist auch nicht gleich Cache. Ob Server-Cache oder Browser-Cache, hier kannst Du einige Optimierungen vornehmen, damit Deine Performance verbessert wird.
Kannst Du bereits das Website Performance Budget berechnen?
Mit einem Performance Budget kannst Du exemplarisch errechnen, wie lange es dauert, bis der Webbrowser alle Dateien vom Server heruntergeladen hat.
Eine Beispielrechnung: Du möchtest, dass Deine Seite in unter zwei Sekunden mit recht schnellem mobilem Internet geladen wird. Dann dürfen alle Dateien zusammen nicht größer als 400 kb sein.
Über die Schieberegler kannst Du simulieren, wie groß die einzelnen Bereiche sein dürfen. Spannend daran finde ich, dass Du ganz automatisch ein Gefühl dafür bekommst, wie viel Kilobyte Deine Webseite haben darf.
Hinzu kommen noch weitere Faktoren wie die Ausführungszeit. Doch der reine Download der Dateien braucht in diesem Beispiel bereits zwei Sekunden.
Beispiel:
Du möchtest etwa 10.000 mobile Nutzer pro Tag auf Deine Seite ziehen. Diese kommen aus Europa und Südamerika. Du schreibst täglich 50 aktuelle Beiträge und die meistgenutzte Seite ist die Suche, da sie zentraler Anlaufpunkt Deiner Produktübersicht ist. Dabei wünschst Du Dir eine Ladezeit von unter zwei Sekunden.
Dann solltest Du über folgende Punkte nachdenken:
- Richte ein CDN mindestens für Europa und Südamerika ein, damit alle Nutzer eine schnelle Website ausgeliefert bekommen. Nur so kannst du eine optimierte Ladezeit erzielen.
- Verwende angemessenes Webhosting sowie Caching, da 10.000 Nutzer kleinere Webhosting Pakete in die Knie zwingen.
- Entwickle eine Caching-Strategie für Deine News bzw. die Aktuelles-Übersicht. Bei vielen neuen Beiträgen am Tag brauchst Du ein gutes Caching, damit der Nutzer immer die aktualisierte Seite bekommt. Zum Beispiel:
Immer wenn ein aktueller Beitrag aktualisiert bzw. geschrieben wird, löscht sich der Cache für die Übersichtsseite selbst und wird automatisch neu generiert.
- Bedenke: Eine schlecht umgesetzte Suche kann Deine Datenbank stark verlangsamen. Wenn die Suche ein zentraler Punkt Deiner Seite ist, solltest Du über einen eigenen Suchindexer wie „Solr“ oder „Elasticsearch nachdenken“. Diese sind für extrem schnelle Suchen ausgelegt und entlasten Deine Datenbank.
- Ein großes Video wird Deine Performance stark nach unten ziehen. Du solltest es deshalb nur über einen Klick starten und nicht als Hintergrundbeschallung laufen lassen.
Mit diesen konkreten Maßnahmen wird Deine Website schneller
Bei der PageSpeed-Optimierung ergeben viele Details zusammen ein großes Kunstwerk – und zwar, eine blitzschnelle Seite. Mit einer Website verhält es sich wie mit einem großen Puzzle: Die kleinen Einzelteile brauchen viel Zeit zum Zusammenbau, mit weniger Teilen, einfacheren Formen und klaren Farben lässt sich die Zuordnung der Teile und der Aufbau des Gesamtbildes viel schneller umsetzen.
Einige der langfristig gültigen Tricks, das Puzzle einfacher zu machen, möchte ich hier kurz wiedergeben.
Aktuelle Software-Versionen nutzen
Webhosting passt zu Deinem Projekt
Statisches HTML
Mit der wichtigste Punkt ist es, statisches HTML vorzuhalten. Stell Dir folgendes vor: Der Besucher kommt auf Deine Website und der Aufruf der HTML-Datei dauert jedes Mal fünf Sekunden. Bei jedem Aufruf erfolgen diverse Datenbankabfragen. Wenn nun jede Datenbank Abfrage eine halbe Sekunde dauern würde, wären das bei 10 Abfragen 5 Sekunden. Hier spricht man von dynamisch generiertem HTML.
Statisches HTML wird nicht aus der Datenbank generiert, sondern ist in einem Cache oder statisch auf dem Server als .html Datei abgelegt. Der Abruf dieser darf in der Regel nicht mehr als 50ms betragen. Wir haben also 5 Sekunden im Vergleich zu 50 Millisekunden.
Wenn Du dieses dynamisch generierte HTML cachest, z. B. als eine statische HTML Datei, dann sparst Du 4,95 Sekunden! Der Hauptgrunddafür ist, dass alle weiteren Anfragen an den Server wie CSS, JavaScript, Bilder und Schriften erst nach dem HTML erfolgen können.
Die weiteren Dateien laden in diesem Fall erst nach 5 Sekunden bzw. nach 50 Millisekunden. Statisches HTML birgt die größten Potenziale für die Performance Deiner Website.
Komprimierung nutzen
Wenn der Webbrowser ein 100kb HTML Dokument herunterladen muss, kann der Server diese Datei vorher mithilfe von gzip oder brotli komprimieren. Die Datei verkleinert sich dann auf ca. 25kb, wird komprimiert an den Webbrowser übermittelt, der diese entpackt und sie dann verarbeiten kann.
Das funktioniert mit allen textbasierten Inhalten. Dazu gehören JavaScript, CSS, SVGs und Schriften. Bilder können auf diese Weise nicht komprimiert werden, da sie in der Regel bereits komprimiert sind.
Da JavaScript und CSS heutzutage durch den exzessiven Einsatz von Frameworks immer größer werden, kannst Du hier häufig mehr als 60 Prozent einsparen. Um die Komprimierung zu aktivieren, reichen ein paar Zeilen in der Webserver-Konfiguration bzw. .htaccess-Datei
Bilder für Web optimieren
Wenn man nur die Dateigröße betrachtet, ist hier das größte Potenzial. Leider sieht man es immer wieder, dass Bilder zu groß oder nicht für Web optimiert hochgeladen werden.
In dem Bild siehst Du dreimal das gleiche Bild. Es sieht identisch aus, es gibt aber einen sehr großen Unterschied. Das Original JPEG hat 970kb. Wenn man dieses für Web optimiert, kann man es verlustfrei auf 120kb verkleinern. Idealerweise kann Dein CMS das automatisch.
Falls nicht, kann ich Dir die Seite tinypng empfehlen. Da kannst Du einfach ein JPEG, PNG oder WebP hochladen und bekommst ein optimiertes Bild zurück.
Als Drittes siehst Du ein 60kb kleines WebP-Bild. WebP ist ein modernes Bildformat mit einer besseren Komprimierung als JPEG. Und dies bringt Dir eine Ersparnis von 94 Prozent.
Mittlerweile unterstützen auch alle modernen Webbrowser das neue Format. Moderne CMS können automatisch alle Deine Bilder in WebP umwandeln, andernfalls findest Du im Internet einige Tools, die Dir die Bilder umwandeln, um so die Performance zu verbessern.
Bilder nachladen
Einen weiteren Performance-Boost bringt Dir Lazy Loading bei Bildern. Das bedeutet, Du lädst nur die Bilder, die im aktuell sichtbaren Bereich sind und lädst beim Scrollen die weiteren Bilder nach. Dadurch kannst Du häufig 90 Prozent der Anfragen an den Server einsparen.
Bilder responsiv ausgeben
Wenn wir von modernen Formaten sprechen, solltest Du nicht vergessen, dass Deine Besucher auch verschiedene Displaygrößen verwenden. Du möchtest dem mobilen Besucher ein kleineres Bild zeigen als dem Besucher zu Hause am Desktop? Dies kannst Du mit dem <picture> Tag lösen.
Hierbei kannst Du verschiedene Bilder für verschiedene Displaygrößen definieren:
<picture>
<source media=”(max-width:600px)” srcset=”image-mobile.webp”>
<source media=”(max-width:800px)” srcset=”image-tablet.webp”>
<img src=”image-desktop.webp”>
</picture>
Ich empfehle nicht mehr als sechs Breakpoints zu definieren, da Dein HTML sonst irgendwann zu groß wird.
Aber, Vorsicht: Hast Du auf dem Tablet noch einen Dreispalter mit Bild, könnte dieses Bild auf dem Mobilgerät größer sein als auf dem Tablet.
JavaScript optimieren
JavaScript und CSS im Nachhinein zu optimieren, ist immer sehr schwierig, weshalb hier unbedingt bei der Umsetzung bereits darauf geachtet werden muss. Verwende keine unnötigen JavaScript-Bibliotheken. Manchmal braucht man nur einen kleinen Teil einer Bibliothek, bindet diese aber komplett ein. Punktuell kannst Du einzelne Komponenten aus den Bibliotheken exportieren.
Javascript sollte immer minifiziert werden. Das heißt, dass alle unnötigen Zeichen, wie Leerzeichen und Leerzeilen, gelöscht werden. Jedes Leerzeichen verbraucht nämlich 8 Byte.
Zusätzlich sollte Dein JavaScript modular aufgebaut sein, sodass z. B. eine Formularvalidierung auch nur auf Seiten mit einem Formular eingebunden werden sollte. Je nachdem wie Dein JavaScript aufgebaut ist und wie wenig Du benutzt, kann es auch sinnvoll sein, alles zu einer Datei zusammenzuführen.
Das empfehle ich aber nur für eine Gesamtgröße unter 100kb. Denn je größer die Datei ist, desto später kann der Browser diese erst verarbeiten. Um die Performance noch weiter zu optimieren, ist es sinnvoll, einige JavaScript-Dateien erst zu laden, wenn sie wirklich gebraucht werden.
CSS optimieren
Für CSS gilt das gleiche wie für JavaScript. Zusätzlich solltest Du auf zu lange Verkettungen der Selektoren verzichten.
Schlechter CSS Selektor:main .wrapper .inner-wrapper p { color:red; }
Es ist besser, dem Paragrafen eine Klasse zu geben wie .c-red { color:red }
Das klingt kleinlich, aber wenn Du die letzten fünf Prozent herausholen willst, zählt jedes Byte.
Zusätzlicher Vorteil: Das Rendering vom Webbrowser wird schneller. Je länger die Verkettung ist, desto länger benötigt dieser zur Verarbeitung. Dabei geht es zwar nur um Millisekunden, aber viele Millisekunden ergeben auch mal eben eine Sekunde.
HTTP/2 nutzen
Bei HTTP/1 war es noch so, dass der Webbrowser jede Datei nacheinander herunterladen musste – wie bei einem Wasserfalldiagramm. Mit HTTP/2 kann der Webbrowser mehrere Dateien gleichzeitig mit einer Verbindung herunterladen. Das bringt Dir einen Boost von mehr als 40 Prozent, da der Webbrowser nicht jedes Mal erneut eine neue Verbindung aufbauen muss.
Leider sind einige Server noch auf HTTP/1 gestellt. Häufig kannst Du das per Knopfdruck aktivieren.
HTTP/3 steht schon in den Startlöchern und wird von ein paar Dienstleistern bereits unterstützt. Es wird jedoch noch einige Zeit dauern, bis alle Hosting-Anbieter das unterstützen.
Cache Header korrekt setzen
Mit Cache Headern kannst Du dem Webbrowser mitteilen, ob und wie eine Website gecached werden soll. Dazu wird eine Konfiguration über Dein CMS oder Deine Webserver Konfiguration angegeben. Dadurch wird der zweite Aufruf der Seite deutlich schneller, da die Inhalte aus dem Webbrowser Cache geladen werden und je nach Einstellung keine Anfrage an den Webserver gestellt werden muss.
In der Praxis würdest Du zum Beispiel für Bilder eine Cache-Dauer von einem Jahr einstellen. Im Gegensatz zu JavaScript und CSS-Dateien sollten diese sich nicht ändern. Für JavaScript und CSS kommt es ganz auf Dein Konzept an – aber mindestens über einen Tag sollten die Dateien schon gecached werden.
Aktuelle Software-Versionen nutzen
Du solltest immer darauf achten, die aktuellen Versionen zu verwenden – für Dein CMS und für die weiteren Komponenten Deines Webservers. Zum Beispiel läuft WordPress mit PHP 8.1 über 50 Prozent schneller als mit PHP 7.x.
Webhosting passt zu Deinem Projekt
Es gibt diverse Möglichkeiten, wie Du Dein Webhosting aufbauen kannst. Ob als Cluster, CDN, mit Proxy-Cache oder einem einfachen Webhosting-Paket bei einem 0815-Hoster: Wichtig ist, dass es zu Deinen Bedürfnissen und Zielen passt.
Dabei muss ich Dir jedoch sagen, dass ein gutes Webhosting mehr als 9,99 Euro im Monat kosten sollte.
PageSpeed ist kein Projekt, das abgeschlossen wird
Mein Fazit lautet: Eine langsame Website ist ein Bug.
Die Website Performance ist kein Projekt, sondern als laufende Aufgabe zu begreifen. Nur vor dem Launch einmal übers Tempo nachzudenken, das reicht einfach nicht mehr aus. Vor dem Launch und vor jedem neuen Feature solltest Du neu analysieren und eventuell schnell handeln. Letztlich ist es auch eine Frage der grundlegenden Konzeption und des Designs.
Verantwortungsvolle Website-Betreiber handeln proaktiv, bevor die ersten Kundenklagen oder schlechte Conversion-Zahlen hereinkommen. Wenn das grundlegende Verständnis von PageSpeed besteht und Du die aktuellen Tools einsetzt, dann stellt PageSpeed kein Problem mehr dar.
Wenn Du noch mehr über das Thema erfahren oder eine kostenlose Quick-Analyse Deiner Website haben möchtest, kannst Du direkt einen Termin mit mir buchen.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
