Pimp your PageSpeed – Google wird es Dir danken

Page-Speed ist die Zeit, die zum Laden einer Webseite benötigt wird. Jeder von uns weiß, wie nervig es ist, wenn man mehrere Sekunden warten muss, bis sich eine Webseite vollständig aufgebaut hat. Der Page-Speed hat somit einen direkten Einfluss auf die Kundenerfahrung und die Interaktion mit der Website. Weißt die Webseite über einen längeren Zeitraum einen schlechten Page-Speed auf, so wirkt sich dies negativ auf die Kundenerfahrung und somit auf die Marke aus. Grund genug in diesem Blog einmal ausführlich den PageSpeed als Rankingfaktor unter die Lupe zu nehmen und Dir die wichtigsten Faktoren für einen besseren Page-Speed aufzuzeigen.

Warum ist der Page-Speed ein wichtiger Rankingfaktor?

Schon 2009 hatte Google die Ladegeschwindigkeit im Fokus und animierte Webentwickler, sich ernsthaft mit dem Thema Page-Speed auseinanderzusetzen. Wurde der PageSpeed in den ersten Jahren von Google eher als Indikator für eine bessere User Experience gesehen, entwickelte er sich immer mehr zu einem ernstzunehmenden Rankingfaktor.

Heute hat der PageSpeed im Mobile-First-Index eine tragende Rolle und bildet die Grundlage der Core Web Vitals, den laut Google wichtigsten Kennzahlen für die User Experience. Doch einen guten Page-Speed zu erreichen, hängt von vielen internen und externen technischen Faktoren ab. Diese müssen analysiert und vor allem optimiert werden. Um Googles Anforderungen bezüglich des Page-Speeds gerecht zu werden, sollte deshalb, neben einem Online-Redakteur, auch ein Webentwickler in die Page-Speed Optimierung mit eingebunden werden.

Pagespeed – Die Auswirkung einer niedrigen Ladegeschwindigkeit

In den letzten Jahren hat sich in vielen Analysen gezeigt, dass ein deutlicher Zusammenhang zwischen der Seitengeschwindigkeit, der Besucherbindung sowie der Absprungrate besteht.
Denn unsere Zeit wird uns immer wichtiger und die Ladegeschwindigkeit einer Website entscheidet, ob wir mit einer Webseite länger interagieren werden oder nicht.

Tatsächlich ergab eine Studie für E-Commerce-Websites, dass bei einer Verzögerung von 1 Sekunde 11 % weniger Seitenaufrufe, 16 % weniger Kundenzufriedenheit und 7 % weniger Conversions“ verzeichnet wurden. Mit jeder weiteren Sekunde steigen diese Faktoren, und damit auch die Absprungrate, exponential an. Eine weitere Studie stellte fest, dass bei einer Ladegeschwindigkeit von 6 Sekunden die Hälfte der User das Interesse an der Website verliert.

Mobile Friendly Bounce Rate

Das ist vor allem ärgerlich, wenn Du sehr viel Arbeit und Zeit in Deine Website investiert hast, diese aber aufgrund eines langsamen Servers oder interner technischer Probleme bezüglich CSS oder Javascript, schlecht performt. Google berichtet, dass eine Verzögerung der Ladezeit von nur einer Sekunde die Zufriedenheit der Besucher um 16 % verringert und 79 % dieser Nutzer das Produkt oder die Dienstleistung nicht kaufen, wenn sie mit der Gesamtleistung der Website nicht zufrieden sind.

Google PageSpeed insights und weitere Tools

Wie schon beschrieben, ist die Optimierung der Ladegeschwindigkeit ein komplexes Thema. Um sich diesem anzunähern ist es wichtig, die einzelnen Metriken des Page-Speeds zu verstehen, die beispielsweise Google in seinem Analysetool PageSpeed Insights verwendet.

Analyse Mobile Friendly Test Google

Im Folgenden findest Du eine kurze Erklärung über die einzelnen Metriken:

  • Der First Contentful Paint (FCP) misst die Zeit, die der Browser benötigt, um den ersten Inhalt zu rendern, nachdem ein User Deine Seite aufgerufen hat. Befindet sich der PageSpeed unter 1,8 Sekunden bewertet Google die Seite als schnell, bis 3 sec bewegt sich die Seite im mittleren Bereich und wird dann als langsam eingestuft.
  • Der Speed Index zeigt auf, wie schnell Inhalte beim Laden der Seite visuell dargestellt werden können. Befindet sich der PageSpeed unter 3,4 Sekunden, bewertet Google die Seite als schnell, bis 5,8 sec bewegt sich die Seite im mittleren Bereich und wird dann als langsam eingestuft.
  • Der Largest Contentful Paint (LCP) bezieht sich auf die Ladezeit des längsten Textes oder des größten Bildes. Die Metrik gibt an, dass der Hauptinhalt einer Seite richtig geladen wurde. Befindet sich der PageSpeed unter 2,5 Sekunden bewertet Google die Seite als schnell, bis 4 sec bewegt sich die Seite im mittleren Bereich und wird dann als langsam eingestuft.
  • Die Time to Interactive (TTI) behandelt die Interaktivität einer Seite; Die Verzögerung der ersten Eingabe stellt die Zeit dar, die von der ersten Interaktion eines Benutzers mit der Website bis zur angemessenen Reaktion des Browsers auf diese Interaktion vergeht. Befindet sich der Speed Index unter 2,5 Sekunden bewertet Google die Seite als schnell, bis 4 sec bewegt sich die Seite im mittleren Bereich und wird dann als langsam eingestuft.
  • Die Total Blocking Time (TBT) misst die Gesamtzeit, die eine Seite benötigt, um auf Mausklicks, Bildschirmtipps oder Tastaturdrücke zu reagieren. Man spricht hier von sogenannten „Blockierungsanteilen“ die zwischen der First Contentful Paint (FCP) und der Time to Interactive (TTI) liegen. Befindet sich der PageSpeed unter 200 Millisekunden bewertet Google die Seite als schnell, bis 600 Millisekundern bewegt sich die Seite im mittleren Bereich und wird dann als langsam eingestuft.
  • Die Cumulative Layout Shift (CLS) hebt die Fälle hervor, in denen sich das Layout einer Seite unerwartet oder die visuelle Stabilität der Seite ändert. Wenn sich eine Seite verschiebt, können Benutzer versehentlich auf die falsche Schaltfläche der Webseite klicken.

Neben Google PageSpeed insights gibt es noch weitere kostenlose Analysetool, wie beispielsweise GT-Metrix, Pingdom oder Site Speed Test, die Du Dir einmal anschauen kannst. Letztendlich entscheidet die Userfreundlichkeit.

Die drei häufigsten Ursachen für einen langsamen Page-Speed

Pagespeed und Webserver – die externe PageSpeed-Falle

Gerade bei mittelständischen Kunden stellen wir immer wieder fest, dass sich die Leistung des bestehenden Webservers sich negativ auf den Pagespeed auswirkt. Oftmals werden hier vermeintlich günstige Webhoster eingekauft, deren Leistungen schnell an ihre Grenzen geraten. Dies kann mehrere Ursachen haben. Oftmals sind günstige Webserver einfach überlastet, weil der Webserver zu viele Anfragen beantworten muss oder die zugrunde liegende Infrastruktur die aktuellen Standards nicht mehr erfüllt. Wichtig ist, dass solche Flaschenhälse frühzeitig erkannt werden, um schnell reagieren zu können. Deshalb raten wir schon vor der Entwicklung einer Website, das richtige Webhosting zu wählen, um eine technische Grundlage für einen guten PageSpeed zu legen.

Nicht der Preis ist ausschlaggebend, denn man kann tatsächlich für viel Geld bei Domainfactory, Webgo und viele andere mehr Server mieten, welche nicht schnell genug die Webseite ausliefern. Es gibt Anbieter, welche auch für kleines Geld super schnelles und sicheres Hosting mit viel Features anbieten. Beispiel sind DigitalOcean, linode, VULTR, aws und Google Cloud Platform. Die Location der Server ist dort frei bestimmbar. Für geltendes EU-Recht kann hier jeweils der Server in Frankfurt ausgewählt werden. Um die Entscheidung und Zentralisierung zu vereinfachen, empfehlen wir Cloudways. Dort kann man die genannten Server auswählen, einzelnen Produkten (wie z.B. WordPress Installationen) zuweisen und im Falle einer Überbelastung vertikal skalieren. Auch ein CDN lässt sich optional dazubuchen, wenn man seine Seiten weltweit ausspielen möchte. Somit ist gewährleistet, dass die Seite an jedem Punkt des Planeten gleich schnell ausgeliefert wird.

PageSpeed und Bildkomprimierung

Immer wieder werden wir von unseren Kunden gefragt, was die richtige Bildgröße für eine Webseite sei. Dies lässt sich in wenigen Sätzen leicht beantworten. Bilddaten sollten immer so groß wie möglich und so klein wie möglich sein und JPG oder png als Format haben.

Beispiel Headerbilder

Headerbild Markenpositionierung

Das Headerbild verfügt in der Regel über eine Auslösung von 1920×1280 Pixel und hat eine Größe von 330 kB. Diese können dann in Deinem WordPress CMS nochmals komprimiert werden. Wir raten allerdings, Bildformate wie WebP, WebM oder AVIF zu verwenden, wodurch Bilder noch schneller geladen werden können und wenig Daten verbrauchen. Durch einen Converter können in WordPress jpeg-Daten an diese Formate angepasst werden. Weiterhin sollten Lottie-Files für Animationen genutzt werden.

PageSpeed – Die technischen Fallen

Hier kommen wir nun in den Bereich der Webentwickler, auf den ich nur kurz eingehen werde. Denn CSS-Dateien und Java-Script sind nicht jedermanns Sache. Kurzum geht es darum, den Datenmüll bei der Programmierung so klein wie möglich zu halten. Wenn also die CSS schnell geladen werden und JavaScript das Rendern nicht ausbremst, dann hat der Webentwickler einen guten Job gemacht. Dies wird am einfachsten erreicht, wenn der Webentwickler die CSS generell im Head-Bereich der HTML-Datei lädt und JavaScripts unten vor dem schließenden Body-Tag positioniert. Nebenbei sollten auch 301-Weiterleitungen so weit wie möglich minimiert werden. Deshalb ist es, wie anfangs beschrieben, sinnvoll, dem Pagespeed immer mit einem Expertenteam zu begegnen, um hier eine perfekte Performance zu generieren.

Page Speed und SEO – Warum PageSpeed-Optimization wichtig ist

Wirkt sich ein schlechter PageSpeed auf mein Ranking aus? Diese Frage bekommen wir immer öfter gestellt und wir können sie mit einem klaren „Ja“ beantworten. Hier greifen wieder die schon erwähnten Core Web Vitals, die 2020 eingeführt wurden und eine hohe Relevanz bei der Messung und Positionierung von Websites in Suchmaschinen haben. Es verwundert also nicht, dass diese im PageSpeed Insights-Tool von Google integriert wurden. Der PageSpeed und die Core Web Vitals bilden somit die neue Währung, die als Ranking-Faktoren auf die Top-Ten-Platzierungen einzahlen. Die neuen Metriken LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift) sind eng an den PageSpeed gekoppelt und bewerten die User Experience einer Website. Sie können über das PageSpeed Insights-Tool und über die Google Search Console abgerufen werden und sollten schon früh in die Planung einer Website mit einbezogen werden. Letztendlich ist es ein weiterer Schritt zur Markenbildung und Kundenbindung, die über die Website optimal transportiert werden kann und somit ein Muss für Webentwickler und Webdesigner, um zukünftige Webseiten gut zu positionieren.

PageSpeed Tools

  • Google PageSpeed ​​Insights – Hiermit kannst Du bestimmte Vorschläge direkt von den Google-Tools erhalten.
  • Lighthouse – ist ein Open-Source-Automatisierungstool zur Verbesserung der Qualität der Website. Du kannst das Programm auf jeder Website ausführen, die öffentlich ist oder eine Authentifizierung erfordert. Es prüft Leistung, Zugänglichkeit, progressive Webanwendungen usw.

Webseiten Belastungstests & PageSpeed Tests Tools