So erreichen Sie 100 in Google PageSpeed ​​Insights (auf WordPress)

Wäre es nicht großartig, wenn es ein Tool gäbe, mit dem Sie Ihre Website schneller machen können? Nun, es gibt! Google PageSpeed ​​Insights ist der Name und es ist ein kostenloser Dienst, der Ihnen zur Verfügung steht, um Ihre Probleme mit langsamen Websites zu lösen. In diesem Artikel sehen wir uns an, was es ist, wie es funktioniert und wie Sie die schwer fassbare Google PageSpeed ​​Insights 100/100-Punktzahl in WordPress erreichen können.

Was ist Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights ist ein Online-Tool zur Messung der Geschwindigkeit und Benutzererfahrung Ihrer Website. Es misst die Ladezeit einer Website auf dem Desktop und auf Mobilgeräten und zeigt verschiedene Metriken über die Leistung einer Website an. Werden die Metriken als suboptimal beurteilt, gibt das Tool Verbesserungsvorschläge.

Gehen Sie einfach zu Google PageSpeed ​​Insights, geben Sie eine URL ein und klicken Sie auf „Analysieren“. Google bewertet Ihre Website sowohl auf Mobilgeräten als auch auf Desktops. Möglicherweise stellen Sie fest, dass Sie bei einem besser abschneiden als bei dem anderen.

Google hat früher eine Gesamtpunktzahl von 100 für eine Webseite vergeben, aber das tun sie nicht mehr.

Stattdessen misst Google drei Statistiken, die es Core Web Vitals nennt. Diese sind:

• Largest Contentful Paint (LCP) : wie schnell der Hauptinhalt der Website geladen wird. Dies sollte für eine gute Benutzererfahrung 2,5 Sekunden oder weniger betragen.
• First Input Delay (FID) : wie schnell die Seite auf Benutzereingaben reagiert. FID sollte 100 Millisekunden oder weniger betragen.
• Cumulative Layout Shift (CLS) : Misst die visuelle Stabilität einer Webseite. Ein CLS-Score von 0,1 oder weniger ist vorzuziehen.

Darüber hinaus misst Google Folgendes:

• First Contentful Paint (FCP) : Die Zeit, die es dauert, bis die Webseite mit dem Rendern auf dem Bildschirm beginnt. Ein guter FCP-Score liegt bei 1,8 Sekunden oder weniger.
• Interaction to Next Paint (INP) : misst, wie die Seite auf Benutzerinteraktionen reagiert. Eine wirklich responsive Website hat einen INP von 200 Millisekunden oder weniger.
• Zeit bis zum ersten Byte (TTFB) : Die Zeit, die benötigt wird, bis das erste Datenbyte nach einer Serveranforderung gesendet wird. Eine TTFB von 0,8 Sekunden oder weniger ist ideal.

Darunter, im Abschnitt Leistungsprobleme diagnostizieren, gibt Ihnen Google PageSpeed ​​Insights vier Bewertungen – Leistung, Zugänglichkeit, Best Practices und SEO. 90 oder mehr ist ein guter Wert, 50 bis 89 zeigen an, dass Verbesserungen möglich sind, und alles unter 50 ist schlecht.

Darunter befinden sich die Möglichkeiten und Diagnosen von Google. Auf diese Weise können Sie Ihren Leistungswert indirekt verbessern. Die Leistungsmetrik hat den größten Einfluss auf die Geschwindigkeit Ihrer Website.

Bevor wir uns damit befassen, wie Sie die Leistung Ihrer Website verbessern können, werfen wir einen Blick darauf, warum die Geschwindigkeit der Website so wichtig ist.

Warum ist die Geschwindigkeit einer Website wichtig?

Die Geschwindigkeit einer Website hat einen großen Einfluss auf das Nutzer- und Verbraucherverhalten.

Die durchschnittliche Zeit, die zum vollständigen Laden einer mobilen Zielseite benötigt wird, beträgt 22 Sekunden [1] .

Die Wahrscheinlichkeit eines Absprungs steigt um 32 % , wenn die Seitenladezeit von 1 Sekunde auf 3 Sekunden sinkt [2] .

53 % der Besuche werden abgebrochen , wenn das Laden einer mobilen Website länger als 3 Sekunden dauert [3] .

Wenn Sie eine E-Commerce-Website betreiben, führt eine langsame Website natürlich zu geringeren Conversions, und das sollten Sie angehen. Die Konversionsrate sinkt mit der Ladezeit einer Website [4] :

• Seiten, die in 2,4 Sekunden geladen wurden, hatten eine Konversionsrate von 1,9 %
• Bei 3,3 Sekunden betrug die Conversion-Rate 1,5 %
• Bei 4,2 Sekunden betrug die Conversion-Rate weniger als 1 %
• Bei über 5,7 Sekunden betrug die Conversion-Rate 0,6 %

Hohe PageSpeed ​​Insights-Punktzahl im Vergleich zur tatsächlichen Seitengeschwindigkeit

Google berechnet den PageSpeed ​​Insights-Score sowohl aus Labordaten (unter kontrollierten Bedingungen gesammelt) als auch aus Felddaten (von echten Nutzern in freier Wildbahn gesammelt).

Um Ihre tatsächliche Seitengeschwindigkeit zu testen, können Sie Online-Tools wie GTmetrix oder den Geschwindigkeitstest von Pingdom verwenden.

Mit diesen Tools können Sie Ihre Website an verschiedenen Standorten testen.

Sie können auf GTmetrix sehen, dass die Seitenladezeit für einen Testserver in San Antonio, Texas, 666 ms beträgt – ein sehr guter Wert.

In Hongkong ist die Ladezeit der Seite etwas länger – 1,4 Sekunden.

Pingdom zeigt auch eine schnelle Ladezeit von 850 ms für einen Test in Washington DC, aber eine langsamere Ladezeit von 1,06 s in Tokio, Japan.

Mit dem Uptrends-Tool können Sie mobil und auf dem Desktop testen. Hier ist das Ergebnis für die WP Shout-Site aus Paris, Frankreich auf dem iPad Air – eine Ladezeit von 1,9 Sekunden:

Es scheint also eine Korrelation zwischen dem Score von Google PageSpeed ​​Insights und der tatsächlichen Seitengeschwindigkeit zu geben.

So erhalten Sie den idealen Google PageSpeed ​​Insights 100-Score auf WordPress

Jetzt wissen Sie, warum ein hoher Google PageSpeed ​​Insights-Score wichtig ist. Es ist an der Zeit, nach Möglichkeiten zu suchen, wie Sie ihn verbessern können.

Die Möglichkeiten zur Verbesserung des Google PageSpeed ​​Insights-Scores

1. Bilder optimieren

Die Optimierung Ihrer Bilder für das Web ist eine einfache Möglichkeit, Ihren Leistungswert zu verbessern.

Sie benötigen ein Bildkomprimierungs-Plugin wie Optimole.

Dieses Plugin kann Ihre Bilder auf eine kleinere Dateigröße komprimieren, damit sie schneller geladen werden können. Sie können sie für alle neuen Bild-Uploads sowie für Ihre bestehenden verwenden. Das Tolle an Optimole ist, dass es Ihre Bilder auch über ein CDN liefert, was eine noch schnellere Lieferung ermöglicht.

Es kann Ihre Bilder auch in das WebP-Format konvertieren, das eine kleinere Größe als JPG- oder PNG-Dateien hat. Dies hilft Ihnen dabei, die Empfehlung zum Bereitstellen von Bildern in Formaten der nächsten Generation weiterzugeben. Darüber hinaus können Sie die Größe größerer Bilder ändern, indem Sie eine maximale Breite für sie festlegen.

Stellen Sie sicher, dass Ihre Bilder die angegebenen Breiten- und Höhenattribute haben, um die Bildelemente zu erfüllen, die keine explizite Breiten- und Höhenmöglichkeit haben .

Das Optimole-Plugin enthält auch Lazy Loading, das Bilder oder Videos nur lädt, wenn ein Benutzer zu ihnen herunterscrollt. Dies hilft bei der unten gezeigten Möglichkeit, Offscreen-Bilder zurückzustellen .

Eine weitere Methode zur Reduzierung der Bilddateigröße ist die Verwendung von SVG-Bildern. SVGs sind Vektordateien, sodass sie einfach neu skaliert werden können, ohne dass sich dies auf ihre Dateigröße auswirkt. Sie werden in WordPress nicht nativ unterstützt, aber Sie können sie mit einem Plugin wie SVG Support oder Safe SVG zu Ihrer Medienbibliothek hinzufügen.

2. Vermeiden Sie eine übermäßige DOM-Größe

Was ist das DOM? DOM steht für Document Object Model und ist eine baumartige Struktur, in der alle HTML-Elemente, Attribute und Texte der Seite enthalten sind.

Einige Strategien zum Verringern der Größe des DOM bestehen darin, lange Webseiten in kleinere Abschnitte aufzuteilen und das Verstecken von DOM-Knoten mit der Deklaration {display:none;} in CSS zu vermeiden.

Ein Faktor, der die DOM-Größe erhöhen kann, ist die Verwendung eines Seitenerstellers. Seitenersteller neigen dazu, die Anzahl der <div>-Elemente auf einer Seite zu erhöhen.

Wenn Sie Elementor verwenden, wurden seit Version 3.0 einige HTML-Wrapper entfernt, wodurch die Größe des DOM verringert wurde.

Oder Sie könnten dazu übergehen, Gutenberg anstelle eines Seitenerstellers zu verwenden, wie es Chris Lema getan hat.

Weitere Tipps zur Vermeidung einer übermäßigen DOM-Größe finden Sie in diesem Beitrag.

3. Optimieren Sie JavaScript und CSS

CSS- und JS-Dateien können minimiert und komprimiert werden, um die Leistung zu verbessern. Die Verkleinerung entfernt alle Leerzeichen aus einer CSS- oder JS-Datei, während die GZIP-Komprimierung wiederholte Zeichen wie {.

Zu den WordPress-Plugins, mit denen Sie CSS oder JS minimieren können, gehören Autoptimize (kostenlos) und WP Rocket (kostenpflichtig).

Die Minifizierung kann Ihre Website beschädigen, daher haben Plugins, die minifizieren, eine Option zum Ausschließen von Dateien von der Minifizierung, wenn Sie ein Problem haben.

WP Rocket hat auch die Möglichkeit, Ihre CSS- und JS-Dateien in einer einzigen Datei zu kombinieren , wodurch Anfragen reduziert werden. Sie werden dies jedoch nicht wollen, wenn Ihr Webserver HTTP/2 verwendet. Sie können zuerst testen, ob Ihr Server HTTP/2 ausführt.

Sie können die GZIP-Komprimierung mit den meisten Caching-Plugins aktivieren. Wenn Ihr Webserver Apache oder LiteSpeed ​​ist, kann das Plugin direkt in Ihre .htaccess-Datei schreiben oder Zeilen zum Kopieren und Einfügen bereitstellen. Wenn Sie NGINX oder IIS verwenden, stellt Hummingbird auch die Konfiguration bereit, um die Komprimierung auf diesen Servern zu aktivieren.

Wenn auf Ihrer Website CSS oder JS vorhanden ist, das nicht verwendet wird, ist es an der Zeit, es zu entfernen. Sie können Chrome DevTools verwenden, um unbenutztes CSS und JS zu finden, das höchstwahrscheinlich von einem Plugin stammt.

Sie können auch den CSS Saver von Rapidload verwenden, um zu sehen, welches CSS Sie von Ihrer Website verlieren können:

4. Beseitigen Sie Ressourcen, die das Rendern blockieren

Renderblockierende CSS- und JS-Dateien sind Dateien, die als Blockierung der ersten Farbe Ihrer Webseite gekennzeichnet werden.

Das Autoptimize-Plug-in kann dieses Problem beheben und als Ergebnis Ihre First Contentful Paint- und Largest Contentful Paint-Ergebnisse verbessern.

5. Reduzieren Sie die anfängliche Antwortzeit des Servers

Die Antwortzeit des Servers hängt von einigen Faktoren ab: dem Design und den Plugins, die Sie verwenden, und der Art des Webhostings, das Sie haben.

Erwägen Sie, alle überschüssigen Plugins zu entfernen, die Sie nicht verwenden, oder wechseln Sie zu einem leichten Thema wie Astra.

Für das Hosting empfehlen wir Managed WordPress Hosting gegenüber Shared Webhosting. Verwaltete WordPress-Hosts beinhalten die Serveroptimierung als Teil des Dienstes.

6. Sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibtStellen Sie sicher, dass Text während des Ladens von Webfonts sichtbar bleibt

Wenn Sie Web Fonts verwenden, verhindert die Empfehlung von Google, dass der Text Ihrer Seiten beim Laden unsichtbar wird.

Die Empfehlung schlägt vor, font-display: swap; zu Ihrer @font-face-Deklaration in Ihrem Stylesheet.

Der folgende Screenshot zeigt, wie Sie diese Eigenschaft mit dem Asset CleanUp-Plugin hinzufügen.

7. Halten Sie die Anzahl der Anfragen niedrig und die Übertragungsgrößen klein

Google PageSpeed ​​Insights protokolliert die Anzahl der vom Webserver angeforderten Dateien und die Größe dieser Dateien.

Wenn Sie hier große Zahlen haben, können Sie sie reduzieren durch:

• Optimieren Sie Ihre Bilder und Mediendateien. Es wird empfohlen, Videodateien anstelle von animierten GIFs zu verwenden.
• Optimieren Sie Ihr CSS und JS
• Optimieren Sie Ihre Schriftarten und Skripte von Drittanbietern
• Verringern der Größe der HTML-Datei

8. Vermeiden Sie das Verketten kritischer Anfragen

Kritische Anforderungen sind Anforderungen, die zum Laden der Seite unbedingt erforderlich sind. Beispielsweise könnte ein Logo eine kritische Anforderung sein.

Lange Ketten und Ketten mit großen Downloads werden als schlecht für die Geschwindigkeit Ihrer Website angesehen. Sie wirken sich auf den First Contentful Paint und den Largest Contentful Paint aus.

Laut Google sollten Sie Folgendes tun, um das Verketten kritischer Anfragen zu vermeiden:

• Minimieren Sie die Anzahl kritischer Ressourcen: Beseitigen Sie sie, verschieben Sie ihren Download, markieren Sie sie als asynchron und so weiter.
• Optimieren Sie die Anzahl der kritischen Bytes, um die Downloadzeit (Anzahl der Roundtrips) zu reduzieren.
• Optimieren Sie die Reihenfolge, in der die verbleibenden kritischen Ressourcen geladen werden: Laden Sie alle kritischen Ressourcen so früh wie möglich herunter, um die kritische Pfadlänge zu verkürzen.

Sie können dies tun, indem Sie:

• Vorabladen von Schlüsselanforderungen, Bildern und Schriftarten durch Verwendung von „link rel=“preload“ in dem HTML, das darauf verweist.
• Minimieren Sie Ihr CSS und JavaScript.
• Beseitigen Sie Ressourcen, die das Rendern blockieren.

Sie können ein Plugin wie WP Rocket verwenden, um diese Aufgaben für Sie auszuführen.

9. Vermeiden Sie lange Haupt-Thread-Aufgaben und minimieren Sie die Haupt-Thread-Arbeit

Lange Hauptthread-Tasks sind JavaScript-Tasks (über 50 ms), die die Time to Interactive für den Benutzer verzögern.

Die Minimierung der Haupt-Thread-Arbeit bedeutet, die Zeit für das Parsen, Kompilieren und Ausführen von JS zu verkürzen.

Sie können die Länge und Zeit von JavaScript-Aufgaben reduzieren, indem Sie:

• Minimierung Ihrer Verwendung von aufgeblähten Plugins
• Hosten Sie Ihre Schriftarten und Analyseskripte lokal
• Minimierung oder Zurückstellung von JS und CSS
• faules Laden von Hintergrundbildern

Im folgenden Artikel finden Sie weitere Tipps zur Minimierung der Haupt-Thread-Arbeit in WordPress.

10. Vermeiden Sie große LayoutverschiebungenVermeiden Sie große Layoutverschiebungen

Layout-Verschiebungen tragen zur Metrik „Kumulative Layout-Verschiebung“ bei und erwecken bei Benutzern den Eindruck des Seitensprungs.

Sie können dieses Problem beheben, indem Sie:

• Hinzufügen von Abmessungen zu Ihren Medien
• Vorladen Ihrer Schriftarten
• Optimierung Ihrer dynamischen Inhalte, z. B. Newsletter-Anmeldeformulare

Weitere Informationen findest du in diesem Leitfaden zur Behebung der kumulativen Layoutverschiebung in WordPress.

11. Reduzieren Sie die Auswirkungen von Code von Drittanbietern

Skripte von Drittanbietern werden an anderer Stelle gehostet, z. B. Google Analytics-Tracking oder YouTube-Einbettungen.

Versuchen Sie nach Möglichkeit, Skripts lokal zu hosten. Mit YouTube ist dies nicht möglich, aber Sie können Ihren Analysecode und Ihre Schriftarten lokal hosten.

Sie können das Plugin Local Google Fonts verwenden, um Google Fonts auf Ihrem eigenen Server zu hosten.

Das Local Google Analytics for WordPress – caches external requirements Plugin wird Ihr Google Analytics lokal hosten.

12. Verwenden Sie ein CDN

Ein Content Delivery Network ist ein Remote-Netzwerk von Servern, die Webinhalte speichern und Benutzern bereitstellen.

Ein CDN kann die Geschwindigkeit Ihrer Website verbessern, indem statische Dateien (z. B. HTML, CSS und JavaScript) zwischengespeichert und einem Benutzer von einem Ort in der Nähe bereitgestellt werden. Dies trägt dazu bei, Ihre Ergebnisse für First Contentful Paint und Largest Contentful Paint zu reduzieren.

Wir verwenden Cloudflare CDN bei WP Shout. Sie können damit kostenlos beginnen.

Erfahren Sie mehr darüber, warum Sie ein CDN verwenden sollten und die besten Optionen.

Fazit, wie man zum Google PageSpeed ​​Insights 100 Score kommt

Wir haben gesehen, dass es einige Faktoren gibt, die die Geschwindigkeit der Website bestimmen. Diese Tipps helfen Ihnen, eine perfekte Punktzahl zu erreichen.

Sie sollten sich jedoch nicht zu sehr auf die Punktzahl 100 festlegen – eine Punktzahl von 90+ ist immer noch sehr gut. Lesen Sie Davids Beitrag zur Optimierung der Websiteleistung, um zu sehen, was wir getan haben, um unsere Ergebnisse zu verbessern.