Pimp your PageSpeed

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

• 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.

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.