Pagespeed-Optimierung: Maßnahmen für eine schnellere Ladezeit und bessere Rankings

Pagespeed-Optimierung: Wieso ist eine schnelle Ladezeit überhaupt wichtig?

Bessere Nutzersignale

Eine schnelle Ladezeit führt zu besseren Nutzersignalen. Unteranderem sinkt die Absprungrate und die Verweildauer auf deiner Website steigt. Auch konnte nachgewiesen werden, dass durch eine schnelle Ladezeit insgesamt eine höhere Interaktion des Seitenbesuchers mit der aufgerufenen Website stattfindet (mehr Seitenaufrufe).

Höhere Conversion

Die Ladezeit einer Website hat einen nachweisbaren Einfluss auf die Conversion Rate. In Studien konnte immer wieder nachgewiesen werden, dass mit einer längeren Ladezeit die Conversion Rate abnimmt.

Walmart stellte z.B. fest, dass für jede Sekunde weniger Ladezeit die Conversion Rate um 2 % angestiegen ist. Eine schnelle Ladezeit führt also automatisch zu mehr Umsatz.

Geringere Absprungrate

Eine schnelle Ladezeit führt nachweislich zu einer geringeren Absprungrate. Im Rahmen einer Google-Studie konnte nachgewiesen werden, dass eine um 2 Sekunden längere Ladezeit zu einer um 32 % höheren Absprungrate führt.

Eine um 4 Sekunden längere Ladezeit führte sogar zu einer um 90 % höheren Absprungrate.

Bessere Rankings

Der Pagespeed ist einer von 200 Rankingsfaktoren. Bereits 2010 hat Google bestätigt, dass der Pagespeed ein direkter Rankingfaktor ist. Damit beeinflusst dir Ladezeit einer Website direkt die Rankings. Insofern sollte es, auch für bessere Rankings, in deinem Interesse liegen eine Pagespeed-Optimierung deiner Website vorzunehmen.

Qualitätsfaktor

Stell dir vor du suchst nach einem Produkt oder einer Dienstleistung auf Google. Anschließend klickst du auf ein Ergebnis auf der Google-Suchergebnisseite und es passiert… nichts! Die Seite lädt und lädt…

Was machst du nun ganz instinktiv? Du klickst auf “zurück” und rufst einfach die nächste Seite aus den Suchergebnissen auf. Ganz automatisch verbindet das Unterbewusstsein eine lange Ladezeit mit dem dahinterstehenden Unternehmen und es entsteht eine negative Assoziation mit diesem. Hinzukommt, dass niemand gerne seine Zeit verschwendet. Durch lange Ladezeiten verlierst du also ganz automatisch potentielle Kunden.

Auch für Google stellt eine schnelle Ladezeit einen Qualitätsfaktor dar. Google ist schlichtweg daran interessiert dem Nutzer möglichst gute und passende Ergebnisse auf der Suchergebnisseite anzuzeigen. Hierbei spielt auch der Pagespeed eine wichtige Rolle.

Wie du den Pagespeed deiner Website bestimmen kannst

Nun weißt du, dass der Pagespeed sowohl für dich als auch für den Kunden elementar wichtig ist. Stellt sich jedoch die Frage, wie du den Pagespeed deiner Website denn bestimmen kannst… Seite neu laden und mitzählen? 🙂 Natürlich nicht…

Pagespeed Insights

Pagespeed Insight ist ein eigenes Tool von Google, mit dem du den Pagespeed deiner Website für mobile Endgeräte und den Desktop-PC bestimmen kannst.

Neben einem Wert von 0 bis 100 werden dir auch Empfehlungen gegeben, was an deiner Website verbessert werden sollte.

Interessant an der Sache ist, dass Google selbst (mobil) nur einen Wert von 70 (von 100) erreicht:

PageSpeed Insights: Pagespeed-Test der Domain www.google.de (Screenshot)

Für die Desktop-Version erreicht die Url www.google.de aber einen Wert von 99 von 100 Punkten. Anzumerken ist hierbei, dass die Desktop-Versionen in der Regel immer einen höheren Wert erreichen. Zudem geht es beim Pagespeed-Test auch nicht unbedingt darum, dass du volle 100 Punkte – sowohl mobil als auch auf der Desktop-Variante – erreichen musst. Jedoch solltest du zwingend schlechte Werte vermeiden!

Ein schlechter Pagespeed kann dazu führen, dass gute Inhalte schlechte Rankings erhalten. Ein guter Pagespeed führt aber nicht dazu, dass schlechte Inhalte gute Rankings erhalten!

Der Pagespeed ist einer von vielen Rankingfaktoren. Verrenn dich also nicht bei der Optimierung des Pagespeeds. Ein solider Wert von 75 und mehr (mobil) reicht häufig schon aus, um bei Google nicht in Ungnade zu falle… 🙂

Pingdom Website Speed Test

Das Tool von Pingdom ist ebenfalls ein sehr schönes Tool um den Pagespeed deiner Website zu bestimmen.

GTmetrix

Auch GTmetrix ist ein interessantes Tool, mit dem du den Pagespeed deiner Website bestimmen lassen kannst.

Was du bei sämtlichen der oben genannten Tools wissen solltest ist, dass hiermit nicht der Pagespeed der gesamten Website getestet wird. Es wird lediglich immer nur die eingegebene Url einem Test unterzogen. Daher solltest du nicht immer nur die Url deiner Startseite eingeben. Wenn du einen Onlineshop betreibst, kannst du auch ruhig mal eine Produktseite oder die Kategorieseite deines Onlineshops einem Pagespeed-Test unterziehen. Gleiches gilt, wenn du z.B. einen Blog betreibst, dass du auch mal einzelne Blogbeiträge testen kannst.

Nachdem du nun weißt, wie du den Pagespeed deiner Website bestimmen kannst, geht es nun darum den Pagespeed zu optimieren. Hierfür gibt es nicht nur eine Stellschraube an der gedreht werden kann. Hier eine Auswahl der wichtigsten Optimierungsmöglichkeiten für einen schnelleren Pagespeed:

  • Bilder optimieren
  • Lazy Load verwenden
  • Caching nutzen
  • CSS, HTML und JavaScript verkleinern
  • Den richtigen Hoster nutzen

Sofern du die oben genannten Optimierungsmöglichkeiten umsetzt, bist du einem anständigen Pagespeed schon ein ganzes Stück näher. Schauen wir uns das ganze also mal im Detail an… Eines aber noch vorab:

Vor jeder Optimierung solltest du zwingend ein Backup deiner Website erstellen! Hierfür kannst du z.B. das kostenlose WordPress-Plugin UpdraftPlus nutzen!

Pagespeed-Optimierung: Bilder optimieren

Bilder machen auf einer Website einen Großteil der Dateien aus, welche geladen werden müssen. Entsprechend groß ist der Einfluss von Bildern auf die Ladezeit. Daher solltest du unbedingt die Bilder deiner Website optimieren, um einen guten Pagespeed zu erreichen.

Bilder richtig skalieren

Stell dir vor du möchtest auf deiner Website einen Blogbeitrag veröffentlichen. Für das Titelbild des Blogbeitrages nutzt du z.B. ein kostenloses Bild von Unsplash.com. Das Bild welches du dir nun runtergeladen hast hat z.B. das Format 1920 x 1280 Pixel. Wird das Bild auf deiner Website nun z.B. aber nur in 1000 x 600 Pixel angezeigt, solltest du das Bild auch nur in diesem Format bzw. dieser Größe zur Verfügung stellen. Dies kannst du z.B. ganz einfach mit Paint ändern:

Pagespeed-Optimierung: Bilder richtig skalieren
Pagespeed-Optimierung: Bilder richtig skalieren mit Paint (Bildquelle: Unsplash.com | Justin Morgan)

Um ein Bild auf die richtige Bildgröße zu skalieren, kannst du dieses einfach in Paint öffnen. Anschließend wählst du “Größe ändern” und wählst dann “Pixel” (statt Prozentsatz) aus. Hier kannst du das Bild nun von den beispielhaften 1920 x 1280 Pixel auf deine Wunschgröße von z.B. 1000 x 600 Pixel anpassen.

Achte darauf, dass das Seitenverhältnis des Ursprungbildes beibehalten bleibt. Reduziere hierfür zunächst die Horizontale von 1920 Pixel auf 1000 Pixel. Die Vertikale ergibt sich anschließend automatisch. Diese sollte nach Möglichkeit wie ausgegeben übernommen und nicht abgeändert werden, um das Seitenverhältnis unverändert zu belassen.

Hast du die Bildgröße nun skaliert, hast du bereits den ersten Schritt in die richtige Richtung getan.

Bilder komprimieren

Nachdem du das Bild nun auf die richtige Größe (in Pixel) skaliert hast, solltest du dieses komprimieren. Hierbei ist jedoch wichtig, dass die Bildqualität nicht unter der Komprimierung leidet.

Um Bilder zu komprimieren kannst du beispielsweise TinyPNG nutzen. Hier kannst du einfach dein Bild, welches du vorher skaliert hast, bei TinyPNG hochladen bzw. rüber ziehen. TinyPNG komprimiert dann dein Bild in der Regel ohne das die Bildqualität hierunter leidet.

Pagespeed optimieren Bilder optimieren
Pagespeed-Optimierung: Bilder komprimieren mit TinyPNG

Das ursprüngliche Bild, welches zuvor skaliert wurde, wurde nun mittels TinyPNG komprimiert. Die Dateigröße konnte damit von 681 KB auf 207 KB reduziert werden ohne dass sich die Bildqualität verschlechtert hat. Hierdurch kann das Bild deutlich schneller geladen werden, was sich positiv auf den Pagespeed auswirkt. Bei einer Vielzahl an Bildern, welche auf einer Website vorhanden sind, macht dies bei der Ladezeit einen erheblichen Einfluss aus.

Bilder im WebP-Format nutzen

Nach Möglichkeit solltest du Bilder im neuen Bildformat WebP zur Verfügung stellen. Hierfür musst du jetzt jedoch nicht hingehen und jedes Bild auf deiner Website manuell von JPG oder PNG auf WebP umstellen. Hierfür kannst du ganz einfach das kostenlose WordPress-Plugin EWWW Image Optimizer nutzen.

Der Vorteil an dem Plugin ist, dass dieses erkennt, ob der Browser, mit welchem die Website aufgerufen wurde, das WebP-Format unterstützt. Sollte dies nicht der Fall sein, wird das Bild automatisch im Ursprungsformat (z.B. JPG) zur Verfügung gestellt.

Pagespeed mit Lazy Load optimieren

Nachdem du sämtliche Bilder deiner Website richtig skaliert, komprimiert und auf das WebP-Format umgestellt hast, bist du einem guten Pagespeed schon ein ganzes Stück näher. Als nächstes solltest du das sogenannte Lazy Load aktivieren, welches ebenfalls einen enormen Einfluss auf deinen Pagespeed haben kann.

Lazy Load ist im Prinzip nichts anderes als das zunächst nur die Bilder und Videos geladen werden, welche sich für den Seitenbesucher im sichtbaren Bereich befinden. Bilder welche weiter unten auf der Website sind, die der Seitenbesucher also zunächst gar nicht sieht, werden vorerst auch nicht geladen. Erst wenn der Seitenbesucher nach unten scrollt und in die Nähe des nächsten Bildes kommt, wird das Bild nachgeladen.

Dadurch das nicht sämtliche Bilder auf einer Seite direkt geladen werden müssen – unter Umstände Bilder die der Seitenbesucher nicht zu Gesicht bekommen wird, da er einfach nicht runterscrollt – erhöht sich automatisch der Pagespeed deiner Website.

Das Gute hierbei ist, dass du keine Programmierkenntnisse und kein weiteres Plugin benötigst. Denn das kostenlose WordPress-Plugin EWWW Image Optimizer, welches oben bereits für das WebP-Format empfohlen wurde, stellt dir auch die Möglichkeit des Lazy Load zur Verfügung.

Caching nutzen, um den Pagespeed zu optimieren

Vermutlich hast du schonmal was vom sogenannten Cache gehört, kannst aber nicht wirklich etwas damit anfangen bzw. erklären was dies ist und wieso der Cache sinnvoll ist. Daher hier die Kurzform:

Beim Cache handelt es sich an sich um eine Art Zwischenspeicher, in dem bestimmte Daten gespeichert werden. Wenn du viel im Internet unterwegs bist, werden von deinem Browser verschiedene Daten gespeichert. Hierdurch können Inhalte schneller wiederhergestellt werden, wenn du eine zuvor besuchte Website erneut besuchst.

Wenn du nun einen Pagespeed-Test mit Pagespeed Insights durchführst, bekommst du unter Umständen die Empfehlung “Serverantwortzeit reduzieren (Time to first Byte)” angezeigt. Durch einen Cache wird genau diese Empfehlung umgesetzt.

Für WordPress gibt es hierfür z.B. das kostenlose WordPress-Plugin WP Fastest Cache.

Pagespeed optimieren - Caching nutzen
Pagespeed-Optimierung: Caching nutzen, um die Serverantwortzeit zu reduzieren

Pagespeed-Optimierung: CSS, HTML und JavaScript verkleinern

Durch die Verkleinerung der CSS-, HTML- und JavaScript-Dateien werden Leerzeichen, Zeilen und unnötige Zeichen aus dem Quellcode entfernt. Hierdurch werden die Dateigrößen reduziert, was ebenfalls zu einer schnelleren Ladezeit führt.

Um den Code zu verkleinern brauchst du ebenfalls keinerlei Programmierkenntnisse. Stattdessen reicht hierfür das kostenlose WordPress-Plugin Autoptimize aus.

Nachdem du in den Einstellungen aktiviert hast, dass CSS, HTML und JavaScript optimiert werden soll, solltest du deine Website jedoch unbedingt überprüfen, ob sämtliche Funktionen (z.B. deines Onlineshops) noch wie gewünscht funktionieren und die Website wie zuvor dargestellt wird.

Sofern du HTTP2 nutzt, sollten die JavaScript- und CSS-Dateien nicht zusammengefügt werden.

Der richtige Webhoster für schnelleren Pagespeed

Sofern du an dieser Stelle eine Auskunft á la “Webhoster XY ist der einzig Wahre” erwartest muss ich dich leider enttäuschen. Bei der Auswahl des richtigen Webhoster kommt es stattdessen vielmehr darauf an was du benötigst.

Zunächst gilt es also zu klären was du brauchst. Wenn du dir dessen bewusst bist, kannst du dich auf die Suche nach einem geeigneten Webhoster machen. Dies liegt einfach daran, dass für das richtige Hosting an einen kleinen Blog andere Anforderung zu stellen sind als an einen gutlaufenden Onlineshop mit viel Traffic.

Grundsätzlich besteht – vor dem Hintergrund des Pagespeeds – zunächst die Auswahl zwischen Shared Webhosting und einem Managed Server.

Shared Webhosting

  • In der Regel relativ günstig.
  • Es werden mehrere Kunden auf einem Server gehostet.
  • Die Speicherkapazität, RAM und CPU werden auf die einzelnen Kunden, welche auf dem Server gehostet werden aufgeteilt. Sofern einige Seiten, welche auf dem Server liegen diesen stark in Anspruch nehmen, wirkt sich dies negativ auf die Leistung deiner Website aus.
  • In der Regel verzögerte “Time to first Byte”. Die Antwortzeit des Servers erfolgt also verzögert.

Managed Server

  • In der Regel relativ teuer.
  • Im Gegensatz zum Shared Webhosting wird deine Webprojekt alleine auf dem Server gehostet.
  • Die Speicherkapazität, RAM und CPU stehen ausschließlich für deine Website zur Verfügung, was sich vorteilhaft auf die Leistung deiner Website auswirkt.
  • In der Regel schnellere “Time to first Byte”.

Dies soll nun nicht heißen, dass du in jedem Fall auf einen Managed Server zurückgreifen sollst. Vor dem Hintergrund des Pagespeeds schneidet dieser jedoch besser ab. Aber auch mit dem Shared Webhosting lassen sich in der Regel gute Pagespeed-Werte erzielen.

Zudem gibt es zwei weitere Punkte, die du bei der Wahl des richtigen Webhoster berücksichtigen solltest:

  • Erreichbarkeit (Ausfallzeit des Servers) und
  • Preis.

Fast kein Webhoster hat eine Erreichbarkeit von 100 %. Aber einige Webhoster kommen schon fast an die 100 % heran. Zumindest beträgt die Ausfallzeit bei den Top-Webhostern nur einige wenige Minuten im Monat. Schlechtere Webhoster kommen teilweise auf mehrere Stunden Ausfallzeit pro Monat.

Letztendlich bleibt noch der Preis als Entscheidungskriterium. Da dieser jedoch relativ ist und immer in Bezug auf den Einzelfall betrachtet werden muss, musst du hierbei selbst entscheiden was dir gutes Webhosting wert ist. Wenn du einen gutlaufenden Onlineshop betreibst, solltest du bereit sein für gutes Webhosting mehr zu zahlen als wenn du lediglich einen kleinen privaten Blog betreibst, um deine Familie über deinen aktuellen Urlaub auf dem Laufenden zu halten.

Fazit

Du weißt nun, weshalb eine schnelle Ladezeit wichtig ist und wie du diese optimieren kannst. Wichtig ist hierbei nochmals zu erwähnen, dass der Pagespeed einer von über 200 Rankingfaktoren ist. Du solltest dich also nicht nur auf die Optimierung des Pagespeeds konzentrieren. Ein guter Pagespeed alleine wird nicht dazu führen, dass schlechte Inhalte gute Rankings erzielen! Dies solltest du unbedingt verinnerlichen…

Konzentriere dich auf die regelmäßige Erstellung guter Inhalte für den Seitenbesucher. Dies, in Kombination mit einer guten Onpage- und Offpage-Optimierung wird früher oder später zum Erfolg führen. Das wichtigste hierbei: Geduld! SEO ist ein Marathon und kein Sprint!


    Fragen? Jetzt Kontakt aufnehmen