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.

PageSpeed Glossar

Wenn Du ein Vermarkter bist oder nicht viel über Technologie weißt, können viele technische Begriffe im Zusammenhang mit PageSpeed ​​verwirrend sein. Dies ist eine kurze Definition einiger häufig verwendeter PageSpeed-Begriffe.

Der Anwendungscache (oder AppCache) wird verwendet, um verschiedene Ressourcen für Offline-Benutzer zu speichern (und letztendlich bereitzustellen).
Brotli ist Googles eigenes Datenkomprimierungsformat (das Gzip ersetzen kann).

Ein Content Delivery Network (CDN) ist ein Servernetzwerk, das Inhalte basierend auf dem geografischen Standort von Benutzern und Servern an Benutzer bereitstellen kann. CDN kann zur Erhöhung der Seitengeschwindigkeit beitragen, indem Inhalte von einem Server bereitgestellt werden, der näher an einem einzelnen Besucher Ihrer Website liegt.

connectEnd ist die Zeit zwischen dem Zeitpunkt, zu dem der Browser die Verbindung zum Server herstellt, und dem Zeitpunkt, zu dem das Dokument abgerufen und angezeigt wird.

connectStart ist, wenn eine Verbindung zu einem Server beginnt.

Der kritische Renderpfad bezieht sich auf die Reihe von Ereignissen, die der Browser durchläuft, um die ursprüngliche Ansicht der Webseite anzuzeigen. Durch die Optimierung des „kritischen Rendering-Pfads“ kann die Website den Inhalt des „ersten Bildschirms“ auf der Website verwenden, um Benutzern schneller Dienste bereitzustellen, was zu einer besseren Benutzererfahrung führen kann.

CSSOM ist eine Übersicht oder Karte der verschiedenen CSS-Stile auf einer Webseite.

Die DNS-Suchzeit ist die Zeit, die der Browser benötigt, um die Suche nach Ihrer Domain abzuschließen.

Document.readyState bezieht sich auf die Phase des Ladens des Dokuments (typischer Status ist: Laden, interaktiv oder vollständig)

domComplete ist die Zeit unmittelbar vor dem Setzen der aktuellen Dokumentbereitschaft durch den User-Agenten.

domContentLoaded zeigt an, dass das HTML analysiert wird, kein CSS-Skript blockiert ist und das Javascript, das den Parser verhindert, ausgeführt wurde.

domInteractive ist die Zeit, bevor der Benutzeragent das aktuelle Dokument auf „interaktiv“ vorbereitet.

domLoading ist die Zeit, bevor der Benutzeragent den aktuellen Bereitschaftsstatus des Dokuments auf „Laden“ setzt.

Ein aufgezeichneter Zeitpunkt, zu dem der Browser zum ersten Mal versucht, ein Dokument abzurufen.

Die Anzeige „Leistung in der ersten Ansicht“ kann den ersten Besuch des Benutzers auf der Webseite replizieren.

Gzip ist eine Methode zum Komprimieren von Dateien, um sie kleiner und einfacher zu laden.

Das Browser-Caching ist eine Methode zum vorübergehenden Speichern von Dateien auf dem Gerät des Benutzers, damit diese Elemente später durch Zugriff auf dieselbe Seite schneller werden. Das Google PageSpeed-Tool empfiehlt normalerweise die Verwendung des Browser-Cache.

„Minimierungscode“ oder „Minimierung“ bezieht sich auf das Bereinigen oder Reduzieren von Dateien, die Code enthalten (wie CSS, HTML und JS), indem alle unnötigen Zeichen (wie zusätzliche Leerzeichen) entfernt werden.

Der Navigationsstartpunkt ist der eigentliche Startpunkt der Seitenstruktur, der vom Benutzer durch Klicken auf einen Link oder andere Navigationsmethoden initiiert wird.

Die Navigations-Timing-API ist eine Schnittstelle, die zeitbezogene Informationen aus dem Browser für Webanwendungen bereitstellen kann.

„Sichtbarer Inhalt“ bezieht sich auf den Inhalt der „gefalteten Anzeige“ auf dem Desktop oder Gerät, den Benutzer auf ihrem Bildschirm sehen, wenn sie die Seite besuchen. Es wird empfohlen, dass das Google PageSpeed-Tool „erste Anzeige von sichtbarem Inhalt“ bereitstellt. Dies soll sicherstellen, dass Benutzer (schnell) zuerst die Grundelemente der Seite laden und über Plug-Ins für die gemeinsame Nutzung von sozialen Netzwerken verfügen, Javascript analysieren, verschieben usw.

Die Umleitungszeit misst die Zeit, die benötigt wird, um alle Umleitungen zu verfolgen, wenn Ressourcen angefordert werden.

Um das Rendern von Javascript und CSS zu verhindern, müssen Javascript und CSS geladen werden, bevor Benutzer die Seite sehen können. Im Allgemeinen können Sie durch Umschreiben des Seitencodes einige dieser Elemente auf unterschiedliche Weise laden, um die Ladezeit der Seite zu verkürzen.

requestStart ist der Moment, in dem der Browser das aktuelle Dokument vom Server, dem zugehörigen Anwendungscache oder lokalen Ressourcen anfordert.

responseEnd ist die Zeit, nachdem der Benutzeragent das letzte Byte des aktuellen Dokuments empfangen hat oder bevor die Verbindung geschlossen wird (je nachdem, was zuerst eintritt).

responseStart ist die Zeit unmittelbar nachdem der Browser das erste Byte der Antwort vom Server, dem zugehörigen Anwendungscache oder der lokalen Ressource empfangen hat.

SecureConnectionStart ist die Zeit unmittelbar nach dem Handshake-Prozess, um die Verbindungssicherheit zu gewährleisten.

Die TCP-Verbindungszeit wird verwendet, um die Zeit zu messen, die zum Herstellen einer Übertragungsverbindung und anderer Zeitintervalle wie SSL-Handshake und SOCKS-Authentifizierung benötigt wird.

TTFB repräsentiert die Zeitspanne zwischen der Seitenansicht und dem Empfang des ersten Antwortbytes.