Pagespeed: So verbesserst du die Ladezeit deiner Website

Um die Absprungrate zu senken, die Conversion Rate zu erhöhen und die Interaktion deiner User zu erhöhen, ist es wichtig, dass deine Website schnell und reibungslos lädt.

Eine Website mit verbesserter Seitengeschwindigkeit führt nicht nur zu einer guten User Experience, sondern kann auch zu besseren Rankings auf den Suchergebnisseiten beitragen.

In diesem Artikel erfährst du, was die Pagespeed genau ist, warum sie wichtig ist, wie du sie misst und verbessern kannst.

Pagespeed: Was ist das überhaupt?

Kurz gesagt: Pagespeed bedeutet Ladezeit.

Die Geschwindigkeit deiner Website bezieht sich im Wesentlichen auf die Zeit, die es braucht, bis die Inhalte deiner Seite vom Server heruntergeladen und im Browser des Nutzers angezeigt werden.

Das kannst du dir so vorstellen: Klickt ein User auf einen Link, wird eine neue Seite geladen. Im besten Fall vergeht nur ein kurzer Augenblick und der Nutzer sieht den gesamten Inhalt der neuen Seite.

Warum ist die Ladezeit einer Website wichtig?

Die Performance einer Website wirkt sich außerordentlich auf das Ranking in den Suchmaschinen aus. Denn es ist so: Hat deine Website eine sehr lange Ladezeit, führt das beim Nutzer zu Unzufriedenheit, da er nicht schnell auf die gewünschten Informationen zugreifen kann.

Im Umkehrschluss: Webseiten mit einer guten Pagespeed sorgen dafür, dass sich ein Nutzer gerne und dementsprechend lange auf deiner Website aufhält. Dieses Signal bekommt dann auch die Suchmaschine, die deine Website als positiv einstuft und mit einem guten Ranking belohnt.

Die Ladezeit wirkt sich direkt auf das Nutzerlebnis, sprich die User Experience, aus. Zufriedene Nutzer kaufen lieber. Bedeutet, dass deine Pagespeed auch einen großen Einfluss darauf hat, wie viele Menschen auf deiner Seite einkaufen.

Laut einer Studie von WPO stats führt eine schnell ladende Website dazu, dass Nutzer häufiger auf deine Seite kommen, sich länger aufhalten und öfter kaufen.

Mit einer langsamen Website machst du dich sowohl bei der Suchmaschine als auch bei den Nutzern unbeliebt. User, die lange mit einem weißen Bildschirm konfrontiert werden, springen ab und klicken lieber auf das nächste Suchergebnis. Bleiben sie trotz schlechter Pagespeed auf deiner Seite, beeinflusst das ihre Stimmung und sie sind womöglich voreingenommen.

Wie wird die Pagespeed gemessen?

Die Pagespeed deiner Website wird in verschiedenen Stufen gemessen. Schließlich finden zwischen dem Klick des Nutzers – sprich der Anfrage – und dem Erscheinen deiner Website-Inhalte mehrere Prozesse im Hintergrund statt.

Dazu gehören:

• Time to First Byte (TTFB):
  Wie lange dauert es, bis der erste Byte vom Webserver geladen wird?
• First Contentful Paint (FCP):
  Wann wird im Browser das erste Inhaltselement angezeigt?
• First Meaningful Paint (FMP):
  Wann hat der User das Gefühl, die Website sei vollständig geladen?
• Time to Interactive (TTI):
  Wann ist die Website bereit für Interaktionen durch den Nutzer?

Wie teste ich die Ladezeit meiner Website?

Um herauszufinden, wie es um deine Pagespeed steht, kannst du einen Website Speed Test durchführen. Dafür gibt es kostenlose Tools von Google selbst, in die du deine URL eingeben und testen kannst. Das wohl gängigste Tool unter Webmastern: PageSpeed Insights

Im besten Fall könntest du deine Seite gleich an mehreren Geräten und zu echten Bedingungen testen und die entsprechenden Werte prüfen. Weil das allerdings sehr umständlich ist, kannst du den Test auf deinem eigenen Computer durchführen.

Sobald du dir die Website auf deinem Rechner aufrufst, merkst du selbst schnell, ob dir die Ladezeit lang oder kurz vorkommt. Das gibt dir ein gutes Gefühl dafür, welche Erfahrung die Nutzer beim Aufrufen deiner Seite machen.

Natürlich liefern dir Tools konkrete Hinweise und Messwerte, was dir wiederum dabei hilft, diese zu verbessern. An deinem Computer kannst du dafür die Entwickler-Tools von Chrome oder Firefox nutzen. Diese findest du unter „Netzwerk“ bzw. „Network“.

Beachte: Setze unbedingt ein Häkchen bei „Disable Cache“. Du möchtest schließlich wissen, wie sich die Ladezeit verhält, wenn jemand zum ersten Mal auf deine Seite gelangt. Außerdem solltest du aus deinem Content Management System (bspw. WordPress) ausgeloggt sein, wenn du den Test durchführst.

Folgende (kostenlose) Tools kannst du zum Testen deiner Ladezeit nutzen:

• PageSpeed Insights
  Googles Pagespeed Insights gibt dir einen Score (für Mobile und Desktop) und sagt dir auch gleich, was du verbessern kannst.
• WebPageTest
  Braucht etwas Zeit der Test, gibt aber eine gute Übersicht und verteilt Noten (A gut, bis D schlecht).
• Pingdom Website Speed Test
  Kurze, knackige Übersicht der wichtigsten Parameter.
• GTmetrix
  GTmetrix gibt dir Pagespeed- und den sog. YSLOW-Score und sagt dir was du verbessern kannst.

„Be 20% faster than your fastest competitor.“

Wie kann ich die Ladezeit meiner Website verbessern?

Wie wichtig die Ladezeit deiner Website ist, weißt du jetzt. Die nächste Frage, die sich an diesem Punkt stellt:
Wie kannst du die Ladezeit deiner Website nun verbessern?

Es gibt gleich mehrere Faktoren, die hier eine Rolle spielen. Auf der einen Seite sind das einige Dinge, die du beachten solltest, auf der anderen Seite bietet dir das zahlreiche Verbesserungsmöglichkeiten.

Die wichtigsten Punkte, die du direkt umsetzen kannst, habe ich hier für dich zusammengestellt.

Seitengröße reduzieren

Je mehr Dateien du auf deiner Website einbindest, umso mehr Daten müssen natürlich geladen werden. Mache dir also schon bei der Erstellung deiner Seite Gedanken darüber, welche Dateien es wirklich braucht. Um die Seitengröße zu reduzieren, solltest du auf möglichst kleine Dateien und Skripte achten. Als Faustregel gilt: Deine Seite sollte inklusive JavaScript- und CSS-Dateien eine Transfergröße von bis zu 2 Megabyte haben.

In der Regel verfügt jede Website an der ein oder anderen Stelle über Bilder und Videos. Diese sollten natürlich eine möglichst hohe Qualität aufweisen. Und dennoch solltest du die Dateigröße weitestgehend reduzieren, um deine Website zu verschlanken.

Animationen reduzieren

Animationen, Übergänge, Slider und Pop-ups sind beliebte Mittel im Webdesign. Und trotzdem sollten sie so sparsam und zielgerichtet wie möglich eingesetzt werden. Damit die Animationen nicht auf Kosten der Performance gehen, sollten sie wirklich gut und nur an ausgewählten Stellen umgesetzt werden.

Schnelles Hosting

Tatsächlich ist dein Hosting ein wesentlicher Faktor für eine gute Pagespeed. Ein zuverlässiges und schnelles Hosting stellt sicher, dass deine Website rund läuft und gleicht größere Datenmengen aus. Damit ist deine Seite außerdem weniger anfällig für Bugs und Probleme.

Antwortzeit des Servers reduzieren

Möchte ein User deine Website aufrufen, muss der Server auf eine Datenbank zugreifen. Damit dieser Vorgang schnell gelingt, solltest du die Antwortzeit des Servers reduzieren. Eine erste Maßnahme ist, dass du immer darauf achtest, die neueste PHP-Version zu installieren. Denn mit einer neuen Version wird meist auch die Antwortzeit verringert.

Content Delivery Network (CDN) einsetzen

Der Verbindungsaufbau zwischen dem Webserver und dem User dauert je nach Standort unterschiedlich lang. Schnellere Verbindungszeiten erreichst du mit dem Einsatz eines Content Delivery Networks. Das sogenannte CDN sorgt dafür, dass deine Website nicht so viele Knotenpunkte zwischen weiter entfernten Standorten überwinden muss. Denn deine Website wird dann dort zwischengespeichert und kann schneller abgerufen werden.

HTTP-Requests verringern

Damit deine Daten von einem Server zu deinen Nutzern übertragen werden können, braucht es bestimmte Protokolle. Das bekannteste Datenübertragungsprotokoll ist das HTTP (Hypertext Transfer Protocol). Du kannst dir das so vorstellen: Für jede einzelne Datei auf deiner Website benötigt es eine eigene Server-Abfrage. Je mehr Protokolle deine Website hat, desto mehr Abfragen müssen ausgeführt werden. Bedeutet: Weniger HTTP-Requests führen zu einer verbesserten Pagespeed. 

Gzip-Kompression aktivieren

Gzip ist ein Kompressionsprogramm, mit denen Daten in komprimierter Form vom Server an den Client übertragen werden können. Damit sparst du Bandbreite und verbesserst somit deine Pagespeed.

Du kannst deine Gzip-Kompression ganz einfach mit einem Eintrag in deiner .htaccess-Datei aktivieren.

Theme & Bilder optimieren

Für eine geringe Byte-Zahl solltest du möglichst wenige Bilder und Graphiken auf deiner Website einsetzen. Die Dateien, auf die du nicht verzichten kannst, solltest du vor dem Upload unbedingt optimieren, sprich verkleinern. Das funktioniert mit Tools wie ImageOptim oder Gimp.

Natürlich bedeutet das nicht, dass du nun gänzlich auf Bilder verzichten solltest. Schließlich erfüllen diese eine wichtige Funktion in deinem Webdesign. Wichtig ist die Optimierung vor dem Hochladen. Das bedeutet:
Lade deine Bilder nie in der originalen Dateigröße hoch, sondern achte immer auf eine Reduzierung der Dateigröße.

Lazy Load einsetzen

Bei Lazy Load wird ein Skript eingesetzt, das dafür sorgt, dass nur die Inhalte geladen werden, die der User aktuell in seinem Browserfenster sehen kann. Bedeutet: Es wird nicht die gesamte Website auf einmal geladen, sondern immer nur die gerade sichtbaren Content-Elemente. Sobald der User weiter nach unten scrollt, werden die nächsten Inhalte nachgeladen.

Schriftschnitte reduzieren

Achte darauf, möglichst wenige Schriftschnitte – also Varianten deiner Schriftart – zu verwenden. Denn auch diese müssen jeweils geladen werden. Hier gilt es einen Kompromiss zwischen typografischer Gestaltungsfreiheit und Datenmenge zu finden.

Moderne Browser laden wirklich nur die Schriften, die wirklich dargestellt werden. Für eine bessere Performance kannst du zum Beispiel nur die .woff-Datei einer Schrift einbinden – diese wird in den meisten Browsern korrekt angezeigt. Sollte das einmal nicht der Fall sein, spielt der Browser eine Ersatzschrift aus.

Mit HTML- und CSS-Kenntnissen kannst du die Google Font selbst einbinden. Damit sorgst du für eine bessere Performance und Pagespeed als bei der Einbindung per Google-Script – und du bist bezüglich DSGVO auf der sicheren Seite.

Caching

Von Caching hast du bestimmt schon einmal gehört. Aber was bedeutet das eigentlich?

Sobald du eine Seite besuchst, merkt sich dein Browser die geladenen Dateien und speichert diese auf deinem Rechner ab, damit er sie beim nächsten Aufruf der Seite direkt parat hat. Dein Browser speichert also sämtliche Daten deiner besuchten Websites im Cache.

Bei WordPress läuft das Caching nochmal etwas anders ab. Im Normalfall beginnt der Server nach dem Seitenaufruf damit, die Inhalte einer Website aus der Datenbank zusammenzubauen. Die Daten sucht er sich mühsam aus den einzelnen Datenbankeinträgen zusammen – vom Text über die Bilder bis hin zu den Links in deinem Footer. Das dauert natürlich seine Zeit und bereitet dem Server viel Arbeit.

Hier kommt das Caching zum Einsatz.

Nach dem allerersten Aufruf der Seite merkt sich der Server, welche Inhalte aus der Datenbank eingebaut sind, und muss diese bei weiteren Aufrufen nicht mehr neu zusammensuchen. Das gesamte HTML-Dokument mit den Informationen aus der Datenbank wird zwischengespeichert und ohne Umwege direkt geladen.

Aus diesem Grund wird Caching deine Website-Performance verbessern.

Für Anfänger empfiehlt sich der Einsatz des Plugins Cachify. Fortgeschrittene können sich an den zahlreichen Einstellungen von WP Fastest Cache oder WP Super Cache bedienen und damit das Maximum herausholen.

Möglichst wenig Skripte einsetzen

Dein Theme, deine Plugins und dein Content Management System (bspw. WordPress) – hinter allem steckt ein Skript. Jedes Skript muss einmal geladen werden. Bedeutet: Je weniger Skripte, desto besser die Pagespeed.

Deshalb: Reduziere die Skriptmenge und setze Skripte nur dort ein, wo sie wirklich benötigt werden.

Du kannst zum Beispiel ein möglichst schlankes Template/Theme und wenige Plugins einsetzen.

Skripte zusammenlegen

Alternativ zur Reduktion von Skripten kannst du bestimmte Skripte auch einfach zusammenlegen.

Ein Beispiel: Wenn du aus 4 separaten Java-Scripts und 7 CSS-Dateien jeweils eine Java-Script- und eine CSS-Datei machst, muss der Server weniger Anfragen verarbeiten. Auch dafür gibt es Plugins, die das für dich übernehmen.

Skripte minifizieren (minify)

Statt die Anzahl der Skripte an sich zu reduzieren, kannst du jedes Skript selbst ebenfalls optimieren. Und zwar indem du es minifizierst. Denn sowohl dein hauptsächliches Dokument als auch die geladenen Skripte enthalten Leerzeichen, Umbrüche und Tabs, die der Webbrowser allerdings gar nicht braucht, um deine Website korrekt darzustellen.

Wähle dafür ein Plugin, wie Merge + Minify + Refresh, aus und setze es für eine verbesserte Pagespeed ein.

WP Rocket, Autoptimize W3 Total Cache WP Optimize, WP Super Cache

Skripte in den Footer packen

Damit deine Website für den User möglichst schnell geladen wird, kannst du einige Skripte erst am Ende deines Dokumentes laden. Dafür bindest du sie im Footer ein. Ein Tool wie Async JavaScript hilft dir dabei. Diese Methode ist allerdings nicht für Anfänger geeignet. Mache dir vorab ausführliche Gedanken darüber, welche Inhalte und Daten der User direkt beim Laden der Seite benötigt und welche Skripte erst später geladen werden können.

Die Ladezeit als Erfolgsfaktor

Die Pagespeed gibt an, wie schnell die Inhalte deiner Seite geladen werden. Es ist aber mehr als nur ein theoretischer Wert.

Mit den passenden Pagespeed-Tools erfährst du viel über die Nutzererfahrung und findest heraus, an welchen Punkten du deine Website optimieren kannst. Das hilft dir nicht nur bei der Suchmaschinenoptimierung, sondern auch bei der Verbesserung der User Experience.

Zufriedene Benutzer bringen dir schließlich eine höhere Conversion Rate und bessere Verkaufszahlen.

Und wenn du nun noch (deutlich) tiefer in die Pagespeed-Optimierung einsteigen möchtest, dann empfehle ich dir folgende Quellen:

• Responsive Design Is Not Enough, We Need Responsive Performance
• Designing for Performance
• Fast load times – Techniques for improving site performance