Bei der Suchmaschinenoptimierung (SEO) geht es darum, Glaubwürdigkeit bei Google aufzubauen. Eine Möglichkeit, wie wir eine Beziehung zu Google aufbauen, ist die Optimierung der Seitengeschwindigkeit.

Die Seitengeschwindigkeit ist nicht nur ein wichtiger Ranking-Faktor, sondern wirkt sich auch auf das Nutzerverhalten aus. Je schneller die Seite lädt, desto wahrscheinlicher ist es, dass der Nutzer auf der Seite bleibt.

Je engagierter ein Nutzer ist, desto wahrscheinlicher wird er konvertieren.

Aus Erfahrung bei vielen verschiedenen Projekten wissen wir, dass die Seitengeschwindigkeit inzwischen ein sehr wichtigerer Ranking-Faktor ist, da der Traffic von mobilen Geräten weiter zunimmt.

Um uns darauf vorzubereiten, haben wir beschlossen, die Websites unserer Kunden nach und nach zu überarbeiten. Dieser Mehraufwand hat die Glaubwürdigkeit auf breiter Front erhöht.

Durch die Optimierung der Seitengeschwindigkeit für unsere Kunden konnten wir bei vielen Websites eine durchschnittliche Steigerung der Nutzeraktivität feststellen. Doch wie kam es dazu?

Was ist Google Page Speed?

Im Jahr 2021 hat Google offiziell damit begonnen, die PageSpeed-Core Web Vitals als ein SEO-Signal einzubeziehen.

Wenn Ihre Webseite hauptsächlich von organischem Traffic über Google lebt, wie es bei den meisten der Fall ist, lohnt es sich, an den Core Web Vitals zu arbeiten, damit Sie den Traffic nicht nur behalten, sondern auch noch steigern können!

Google Page Speed ist ein Tool, das Google den Webmastern zur Verfügung stellt, um die Geschwindigkeit ihrer Seiten zu messen.

Sie ist ein sehr wichtiger Ranking-Faktor für Suchmaschinen, und eine gute Seitengeschwindigkeit kann dazu beitragen, dass Ihre Website auf den Ergebnisseiten der Suchmaschinen besser platziert wird.

Wie Sie Ihren Google Page Speed Score überprüfen können

Wenn Sie die Geschwindigkeit Ihrer Website verbessern möchten, ist das Tool Page Speed Insights von Google ein guter Ausgangspunkt, der Ihnen bereits sehr viel über die Probleme Ihrer Webseite verrät.

Mit diesem Tool können Sie die Geschwindigkeit Ihrer Seiten anhand einer Reihe von globalen Best Practices überprüfen.

- Gehen Sie zu https://pagespeed.web.dev/ und tragen Sie die URL der Homepage Ihrer Website für den Test ein

- Klicken Sieauf die Schaltfläche "Analysieren" unter "PageSpeed"

- Nachdem der Test abgeschlossen ist, können Sie die Ergebnisse für Mobile-, aber auch für Desktopgeräte ansehen

Was sind die Ursachen für langsame Seiten?

Langsame Seiten können durch eine Reihe von Faktoren verursacht werden, z. B. durch veraltete Technologie, langsame Server, ineffiziente Kodierung und falsche Ressourcenverwaltung.

Eine der häufigsten Ursachen für langsame Seiten ist veraltete Technologie oder sehr viele Sonderfunktionen. 

Das liegt daran, dass alte Technologien weniger effizient sind, wenn es um die Verarbeitung von Informationen geht. Sie neigen auch dazu, mehr Ressourcen zu verbrauchen, was zu langsameren Seitengeschwindigkeiten führen kann.

Im Falle von WordPress sind das oft langsame WordPress Plugins, die den Pagespeed ausbremsen.

Ineffiziente Codierung kann ebenfalls zu langsamen Seiten führen. Schlecht geschriebener Code kann zu Websites führen, die schwer zu navigieren sind und schnell laden. Das liegt daran, dass schlecht geschriebener Code zu Fehlern führen kann, deren Behebung länger dauert.

Darüber hinaus kann ineffizienter Code dazu führen, dass Websites zu viele Ressourcen verbrauchen, was wiederum zu langsameren Seitengeschwindigkeiten führt.

Wie Sie beim Google Page Speed Test 100 Punkte erreichen (Case-Study / Checkliste)

Um beim PageSpeed Insights-Tool 100 Punkte zu erreichen, müssen Sie einige Voraussetzungen erfüllen.

Wenn Sie das Vorhaben starten, den Pagespeed zu optimieren, machen Sie dies am besten in mehreren Phasen. Jeder der folgende Teilbereich kann mehrere Stunden dauern, um das Optimium zu erreichen.

Für unser Fallbeispiel nehmen wir ein spannendes Kundenprojekt von Starsmedia, nämlich den E-Auto-Ladekabel Hersteller & Onlineshop www.electric-ways.net.

Aber bevor wir zu den Optimierungen übergehen, sehen wir uns kurz die Ausgangslage von ELECTRIC-WAYS an.

Die Plattform die auf dem Shop genutzt wird ist WordPress und als Shopsystem wird WooCommerce genutzt, dass sicher vielen bekannt ist. Als Theme kam zuvor das Hello-Theme zum Einsatz, dass wiederum mit dem Elementor-Builder ergänzt wurde, um ein flexibles Design erstellen zu können.

Als Serveranbieter ist Cloudways im Einsatz, der von Haus aus schon sehr schne

Der damalige Pagespeed betrug auf Mobile 55 und auf Desktop 87 Punkte.

Im Überblick finden Sie die wichtigsten Punkte, die wir im Zuge der Optimierung gemeinsam mit unserem Kunden angegangen sind:

1. Optimierung der Bilder und Nutzung des WEBP-Formats. Übergroße Bilder sind die häufigste Ursache für langsame WordPress-Websites.
2. Umstellung von Elementor auf Oxygen Builder
3. Nutzung des serverseitigen Cachings
4. Nutzung des CSS-Cachings von Oxygen
5. CSS-Files nur auf Seiten laden, auf denen sie gebraucht werden
6. Nutzung von "Images Apsect Ratio" um den CLS auf faktisch Null zu bekommen.
7. Bereinigung und Optimierung der Datenbank mit Hilfe von WP Optimize
8. Aktivierung der GZIP-Komprimierung, Reduzierung von CSS-, HTML- und JS-Dateien  mit Hilfe von WP Optimize
9. Aktualisierung aller Plugins
10. Deaktivierung unnötiger Plugins
11. Selektives Laden von Plugins mit Hilfe von Asset Cleanup

Hier die Ergebnisse mit dem Testool von GTmetrix:

Checkliste: Google Page Speed Optimieren

1. Google PageSpeed Insights Test

• Gehen Sie zu PageSpeed Insights.
• Tragen Sie die URL der Homepage Ihrer Website ein.
• Klicken Sie auf "Analysieren" und überprüfen Sie die Ergebnisse für Mobile und Desktop.

2. Bilder Optimieren

• Format: Konvertieren Sie Bilder in das WEBP-Format.
• Größe: Reduzieren Sie die Bildgröße ohne Qualitätsverlust.

3. Caching Implementieren

• Serverseitiges Caching: Aktivieren Sie serverseitiges Caching.
• CSS-Caching: Verwenden Sie das CSS-Caching des verwendeten Builders (z.B. Oxygen).

4. Code Optimieren

• CSS und JavaScript: Minimieren und kombinieren Sie CSS-, HTML- und JavaScript-Dateien.
• Selektives Laden: Laden Sie CSS- und JavaScript-Dateien nur auf den benötigten Seiten.
• GZIP-Komprimierung: Aktivieren Sie die GZIP-Komprimierung.

5. Plugins Verwalten (WordPress spezifisch)

• Aktualisierung: Halten Sie alle Plugins auf dem neuesten Stand.
• Deaktivierung: Deaktivieren Sie unnötige Plugins.
• Selektives Laden: Nutzen Sie Tools wie Asset Cleanup, um Plugins selektiv zu laden.

6. Hosting und Server

• Serveranbieter: Verwenden Sie einen schnellen und zuverlässigen Hosting-Anbieter.
• Servertechnologie: Stellen Sie sicher, dass Ihre Servertechnologie auf dem neuesten Stand ist.

7. Datenbankoptimierung (WordPress spezifisch)

• Datenbank Bereinigung: Nutzen Sie Plugins wie WP Optimize zur Datenbankbereinigung und -optimierung.

8. Vermeidung von Blockierenden Ressourcen

• CSS: Laden Sie kritische CSS inline, um Render-Blocking zu vermeiden.
• JavaScript: Laden Sie nicht-kritische JavaScript-Dateien asynchron.

9. Content Delivery Network (CDN)

• CDN-Einsatz: Nutzen Sie ein CDN, um Inhalte schneller zu liefern.

10. Lazy Loading

• Bilder: Implementieren Sie Lazy Loading für Bilder und Videos, um die Ladezeit initialer Inhalte zu verkürzen.

11. Core Web Vitals Optimieren

• LCP (Largest Contentful Paint): Stellen Sie sicher, dass die größte sichtbare Seite innerhalb von 2.5 Sekunden lädt.
• FID (First Input Delay): Reduzieren Sie die Zeit bis zur ersten Benutzerinteraktion auf weniger als 100 Millisekunden.
• CLS (Cumulative Layout Shift): Minimieren Sie Layoutverschiebungen während des Seitenaufbaus.

12. Ressourcenverwaltung

• Ressourcenminimierung: Stellen Sie sicher, dass Ihre Website nicht unnötige oder überflüssige Ressourcen lädt.
• Optimierte Fonts: Verwenden Sie systemeigene Schriftarten oder optimieren Sie Web-Schriftarten für schnellere Ladezeiten.

Optimierungsvorschläge Google Page Speed für WordPress

1. Verwendung eines Leichtgewichts-Themes

• Themes: Wählen Sie ein leichtes und schnelles Theme wie GeneratePress, Astra oder Neve. Diese sind gut optimiert und bieten schnelle Ladezeiten.

2. Optimierung der Datenbank

• Automatische Bereinigung: Nutzen Sie Plugins wie WP-Optimize oder WP-Sweep, um Ihre Datenbank regelmäßig zu bereinigen und zu optimieren.
• Revisionskontrolle: Begrenzen Sie die Anzahl der Post-Revisions, um die Datenbank sauber zu halten.

3. Content Delivery Network (CDN)

• CDN-Integration: Integrieren Sie ein CDN wie Cloudflare oder MaxCDN, um die Ladezeiten zu verbessern, indem Inhalte von Servern weltweit bereitgestellt werden.

4. DNS Prefetching

• Prefetching: Nutzen Sie DNS Prefetching, um die Ladezeiten zu verbessern, indem Sie Verbindungen zu externen Ressourcen im Voraus herstellen.

5. Reduzierung der HTTP-Anfragen

• Kombinierung von Dateien: Kombinieren Sie CSS- und JavaScript-Dateien, um die Anzahl der HTTP-Anfragen zu reduzieren.
• Inline-Small-Assets: Inline kleine CSS- und JavaScript-Dateien, um HTTP-Anfragen zu minimieren.

6. Prefetching und Preloading von Ressourcen

• Preload-Schlüsselressourcen: Verwenden Sie das Preload-Attribut, um wichtige Ressourcen vorab zu laden.
• Prefetch-Schriftarten: Laden Sie Schriftarten und andere Ressourcen vorab, um Ladezeiten zu verkürzen.

7. Optimierung der Schriftarten

• System-Schriftarten: Nutzen Sie systemeigene Schriftarten, um die Ladezeit zu reduzieren.
• Web-Schriftarten: Optimieren Sie Web-Schriftarten, indem Sie nur die benötigten Schriftschnitte und -stile laden.

8. Verringerung von Redirects

• Direkte Links: Vermeiden Sie unnötige Redirects, indem Sie direkte Links verwenden.
• Korrekte URL-Struktur: Stellen Sie sicher, dass Ihre URL-Struktur korrekt ist und keine unnötigen Weiterleitungen verursacht.

9. Asynchrone und Deferred JavaScript

• Async und Defer: Laden Sie JavaScript-Dateien asynchron oder verzögert, um die Render-Blockierung zu vermeiden.

10. Lazy Loading für Videos und Iframes

• Videos und Iframes: Implementieren Sie Lazy Loading für Videos und Iframes, um die initiale Ladezeit zu verbessern.

11. Nutzung eines Performance-Plugins

• Plugins: Verwenden Sie Performance-Plugins wie WP Rocket, W3 Total Cache oder Swift Performance, um die Gesamtleistung Ihrer Website zu verbessern.

12. Optimierung von WooCommerce

• Produktbilder: Optimieren Sie Produktbilder für schnellere Ladezeiten.
• Datenbank-Caching: Nutzen Sie Datenbank-Caching, um die Performance Ihres WooCommerce-Shops zu verbessern.
• Produktanzahl: Reduzieren Sie die Anzahl der angezeigten Produkte pro Seite, um die Ladezeit zu verkürzen.

13. Entfernung von Query Strings aus statischen Ressourcen

• Query Strings: Entfernen Sie Query Strings aus statischen Ressourcen wie CSS und JavaScript-Dateien, um das Caching dieser Dateien zu verbessern.

14. Nutzung eines Reverse Proxies

• Reverse Proxy: Nutzen Sie einen Reverse Proxy wie Varnish Cache, um die Ladezeiten Ihrer Website weiter zu verbessern.

15. WordPress Heartbeat API

• Heartbeat API: Reduzieren oder deaktivieren Sie die WordPress Heartbeat API, um Serverressourcen zu schonen.

PageSpeed Tools, die hier beim Benchmarking helfen können

Google PageSpeed Insights - Ein kostenloses Tool von Google, das eine Bewertung für die Geschwindigkeit und Nutzerfreundlichkeit einer Website gibt. Es analysiert sowohl die Desktop- als auch die Mobilversion der Website.
https://developers.google.com/speed/pagespeed/insights/
#GooglePageSpeedInsights

GTmetrix - Eine Website, die die Ladezeit und die Leistung von Websites misst. Es bietet auch eine detaillierte Analyse der Page Speed-Optimierungsmöglichkeiten.
https://gtmetrix.com/
#GTmetrix

Pingdom - Ein Tool, das die Ladezeit und die Leistung von Websites überprüft und auch eine Liste der langsamsten Elemente auf der Website bereitstellt.
https://www.pingdom.com/
#Pingdom

WebPageTest - Ein Open-Source-Tool, das die Ladezeit und die Leistung von Websites misst. Es bietet auch eine detaillierte Analyse der Performance, einschließlich der Netzwerklatenz und der Verbindungsstärke.
https://www.webpagetest.org/
#WebPageTest

Fazit

Der Page Speed Test von Google ist eine hervorragende Möglichkeit, die Geschwindigkeit Ihrer Website zu messen. Wenn Sie den Test durchführen, erhalten Sie Einblicke in die Leistung Ihrer Website und können bei Bedarf Änderungen vornehmen. Stellen Sie vor allem sicher, dass alle Ihre Seite auf einem schnellen Server liegt und auch auf Mobile rasch geladen werden kann. Denn selbst ein paar langsame Seiten können sich negativ auf Ihr Ranking bei Google auswirken.