So steigern Sie Google PageSpeed ​​Insights Score für WordPress

Die Ladegeschwindigkeit einer Website kann ihren Erfolg machen oder brechen. Wenn Sie zwei identische Seiten vergleichen, erhält die schnellere Seite eine bevorzugte Behandlung von Suchmaschinen wie Google. Glücklicherweise gibt es eine Möglichkeit, die Geschwindigkeit Ihrer Website zu testen und Ratschläge zur Verbesserung zu erhalten. Es heißt Google PageSpeed ​​Insights - hier ist es, was es ist und wie Sie es verwenden können.

Was sind Google PageSpeed ​​-Erkenntnisse?

Google PageSpeed ​​Insights (PSI) ist ein kostenloses Online -Tool, das von Google entwickelt wurde, das die Geschwindigkeit und verschiedene Elemente der Benutzererfahrung von Webseiten auf mobilen und Desktop -Geräten analysiert. Es analysiert die Seite und bietet Punktzahlen und Empfehlungen, mit denen Website -Eigentümer die Leistung ihrer Website verbessern können. Jeder kann einen Bericht auf jeder Webseite ausführen - es ist eine großartige Möglichkeit, um zu sehen, wie gut Ihre eigenen und Wettbewerber -Websites laufen.

Hier ist eine Live -Demo einer Website, die mit unserem Divi WordPress -Thema erstellt wurde, auf dem Sie auf eine Schaltfläche klicken, um einen schnellen PageSpeed ​​-Bericht auszuführen, wenn Sie es noch nicht getan haben.

Das Chrome -Team von Google führte 2020 Core Web Vitals (CWV) ein, um Metriken für die Ermittlung guter Site -Geschwindigkeit und Benutzererfahrung zu standardisieren. PageSpeed ​​Insights ist einfach das Tool, das diese Metriken analysiert und berichtet. Aus diesem Grund ist es für Site -Eigentümer von entscheidender Bedeutung, CWV -Metriken zu verstehen und wie sie Ihre Seitengeschwindigkeitsseo beeinflussen.

Kern -Web -Vitals: Was bedeuten und messen diese Akronyme?

Ihr PageSpeed ​​-Score wird durch fünf Kernmetriken gemessen (obwohl nur drei als „Kern“ angesehen werden, wobei die anderen beiden als „bemerkenswert“ bezeichnet werden.

Hier finden Sie eine kurze Erklärung der Acronyms LCP, INP, CLS, FCP und TTFB:

• LCP (größte inhaltliche Farbe) misst, wie lange es dauert, bis das größte Inhaltselement (Bild, Video, Textblock) im Ansichtsfenster sichtbar ist, um auf dem Bildschirm zu rendern. Es zeigt, wie schnell der Hauptinhalt der Seite für den Benutzer sichtbar ist. Anstrengen Sie 2,5 Sekunden oder weniger für eine gute Benutzererfahrung.
• INP (Interaktion zur nächsten Farbe) misst die Reaktion einer Seite auf Benutzerinteraktionen. Es befasst sich mit der Latenz aller Interaktionen aller Klick-, Tippen und Tastaturen während des Besuchs eines Benutzers auf einer Seite und meldet einen einzelnen Wert, der die typische Latenz der Seite darstellt. Ein guter INP ist 200 Millisekunden oder weniger. Dies wurde früher als Eingangsverzögerung bezeichnet .
• CLS (kumulative Layoutverschiebung) misst die visuelle Stabilität einer Seite. Es quantifiziert, wie viel Bewegung sichtbarer Inhalte im Ansichtsfenster auftritt. Unerwartete Layoutverschiebungen können Benutzer frustrieren (z. B. wenn sich eine Schaltfläche bewegt, wenn sie versuchen, darauf zu klicken). Ziehen Sie einen CLS -Wert von 0,1 oder weniger an.
• FCP (erster inhaltlicher Farbe) misst die Zeit, als die Seite geladen wird, wenn ein Inhalt (Text, Bild usw.) zuerst auf dem Bildschirm gemalt wird. Es zeigt an, wie schnell der Benutzer ein visuelles Feedback erhält, das die Seite geladen hat. Ziehen Sie 1,8 Sekunden oder weniger an.
• TTFB (Time to First Byte) misst die Zeit, die der Browser benötigt, um das erste Datenbyte vom Server nach Anforderung einer Seite zu empfangen. Es ist eine wichtige Metrik für die Reaktionsfähigkeit der Server. Anstrengen Sie 800 Millisekunden oder weniger.

Warum priorisieren Sie die mobile Seitengeschwindigkeit?

Mit dem Aufkommen von Smartphones und der Tatsache, dass die meisten Suchanfragen jetzt von mobilen Geräten erfolgen, haben Google und andere Suchmaschinen begonnen, die mobile Erfahrung von Websites und Webseiten zu priorisieren. Wenn Sie also eine PageSpeed ​​Insight -Bewertung durchführen, werden Sie feststellen, dass Sie sowohl für Desktop als auch für Mobilgeräte eine Punktzahl erhalten.

Nach meiner Erfahrung ist es heutzutage sehr einfach, eine Punktzahl von 95 oder höher auf einem Desktop mit einer mobilen Version zu erhalten. Dies ist aus ein paar Gründen:

1. Viele Webdesigner entwerfen ihre Websites immer noch hauptsächlich aus der Desktop -Erfahrung. Mobiles Design ist ein nachträglicher Gedanke.
2. Der mobile Geschwindigkeitstest setzt Internetgeschwindigkeiten mithilfe von Mobilfunkdaten an, während Desktops tendenziell stabile und hochgeschwindige Internetverbindungen verwenden. Aufgrund dieser Ungleichheit sind mobile Erlebnisse in der Regel langsamer.
3. Basierend auf den oben genannten Nr. 1 optimieren Webdesigner ihre Websites auch im Hinblick auf Desktops, was bedeutet, dass viele der besten Optimierungen nicht auf das mobile Erlebnis zugeschnitten sind.

Stellen Sie vor diesem Hintergrund sicher, dass Ihr mobiles Erlebnis mindestens so gut ist wie Ihr Desktop. In beiden Fällen werden sowohl Desktop- als auch mobile Erlebnisse anhand der gleichen Kriterien beurteilt, und Sie sollten sich dieser Metriken bewusst sein.

So verbessern Sie Kern -Web -Vitale für bessere PageSpeed ​​-Scores

Okay, es gibt viel, was Sie tun könnten , aber es hilft, es einzugrenzen. Ich habe priorisierte und umsetzbare Vorschläge für Site -Eigentümer gesammelt, um jede der Kern -Web -Vitals zu verbessern. Sie werden meine Empfehlungen auf der Grundlage der Probleme finden, mit denen Sie konfrontiert sind.

LCP (größte inhaltliche Farbe)

Für LCP möchten Sie sich auf das „größte Element“ konzentrieren, wie im Bericht beschrieben. Mit einer schlechten Punktzahl dafür sehen Benutzer weniger wichtige Seiteninhalte, bevor sie den Hauptinhalt sehen.

Konzentrieren Sie sich auf diese drei Dinge:

1. Optimieren Sie das LCP -Element: Identifizieren Sie das größte Element im ersten Ansichtsfenster (häufig einen Bild- oder Heldentext). Optimieren Sie dieses Element zuerst:
   • Bilder: Komprimieren Sie Bilder mit modernen Formaten wie WebP. Verwenden Sie eine angemessene Größen Sie (Servieren Sie nicht größere Bilder als nötig). Verwenden Sie SRCSet- und Größenattribute für reaktionsschnelle Bilder. Erwägen Sie, eine CDN für die Bildlieferung zu verwenden.
   • Textblöcke: Stellen Sie sicher, dass Web-Schriftarten effizient geladen werden (unter Verwendung von Schriftarten: Swap ist gut). Vermeiden Sie große Blöcke von Render-Blocking-JavaScript oder CSS, die das Rendering der Textverzögerung verzögern.
2. Optimieren Sie den oberen Inhalt . Verschiebung von nicht kritischen Ressourcen unterhalb der Falte aufschieben.
3. Verbesserung der Server -Reaktionszeiten (TTFB): Ein schnelleres TTFB wirkt sich direkt auf LCP aus. Siehe TTFB -Vorschläge unten.

INP (Interaktion zur nächsten Farbe)

INP konzentriert sich darauf, wie Ihre Seite auf die Benutzerinteraktion reagiert (z. B. Schaltflächenklicks). Es ist eine der stärker ausgerichteten Metriken und kann für Nichtentwickler viel schwieriger sein.

Aber Sie sollten sich auf diese Aufgaben konzentrieren, wenn Sie glauben, dass Sie dafür bereit sind:

1. Minimieren Sie lange Aufgaben : Identifizieren und brechen Sie langlebige JavaScript-Aufgaben (alles, was den Hauptfaden für 50 m oder mehr blockiert). Verwenden Sie die Code-Aufteilung und verschieben Sie nicht kritische JavaScript.
2. Event -Handler optimieren : Stellen Sie sicher, dass Ereignishandler (wie Klick- oder Tippen Sie auf Ereignisse) effizient und verursachen keine langen Verzögerungen. Vermeiden Sie komplexe Berechnungen oder DOM -Manipulationen in Ereignishandlern.
3. Vermeiden Sie Layout -Thrashing : Vermeiden Sie es, synchrone Layouts zu erzwingen (bei dem JavaScript den Browser dazu zwingt, das Layout in kurzer Zeit mehrmals neu zu berechnen). Dies geschieht oft beim Lesen und dann sofort schreiben Stile.

CLS (kumulative Layoutverschiebung)

Um CLS zu verbessern, arbeiten Sie hart daran, unerwartete Layoutverschiebungen zu verhindern. Wenn dies geschieht, werden wichtige Elemente und Stile zu unerwarteten Zeiten geladen, sodass die Dinge auf dem Bildschirm herumspringen.

Konzentrieren Sie sich auf diese Dinge:

1. Setzen Sie die explizite Breite und Höhe auf Bildern und Videos : Fügen Sie immer Breite und Höhenattribute (oder verwenden Sie CSS-Aspekt-Ratsverhältnisse) für Bilder und Videos, um sie während des Ladens Platz für sie zu reservieren. Dies verhindert, dass Inhalte herumspringen.
2. Reserveraum für Anzeigen und eingebettete Inhalte : Wenn Sie Anzeigen oder Einbettungen verwenden, die sich ändern können, reservieren Sie sie mit Platzhaltern oder Skelettladern ausreichend Platz.
3. Vermeiden Sie es, Inhalte über vorhandenen Inhalten einzuführen : In den vorhandenen Inhalt nicht dynamisch in den vorhandenen Inhalt injizieren, es sei denn, dies ist eine Antwort auf die Benutzerinteraktion.

FCP (erste inhaltliche Farbe)

Schlechte FCP -Ergebnisse treten auf, wenn Inhalte nicht sehr schnell sichtbar sind. Dies vermittelt den Eindruck, dass die Seite möglicherweise nicht geladen wird.

Konzentrieren Sie sich auf diese Elemente, um FCP -Probleme anzugehen:

1. Rendernblockierungsressourcen beseitigen : Minimieren oder eliminieren Sie CSS und JavaScript, die das Rendering von Blocks blockieren. Minimieren und komprimieren Sie CSS und JavaScript -Dateien. Inline Critical CSS (das CSS benötigt, um über dem Glühen in den Falten zu rendern) und nicht kritische CSS aufschieben. Verschiebende nicht kritische JavaScript unter Verwendung der Defer- oder Async-Attribute.
2. Optimieren Sie die Server -Reaktionszeit : Ein schnelleres TTFB verbessert den FCP direkt. Siehe TTFB -Vorschläge unten.
3. Optimieren Sie die Ressourcenbeladungsreihenfolge : Priorisieren Sie das Laden kritischer Ressourcen (wie CSS und Schriftarten, die für den oberflechten Inhalt benötigt werden) frühzeitig.

TTFB (Zeit bis zum ersten Byte)

Ähnlich wie oben warten die Benutzer darauf, dass eine Seite geladen wird. Bei TTFB geht es jedoch mehr um Ihre Serverkonfiguration als darum, wie gut eine einzelne Seite lädt. TTFB würde die Reaktionsfähigkeit Ihres Servers zeigen, die eine Seite auf Ihrer Website anzeigt.

Geben Sie wirklich in diese Elemente ein, um die Reaktionszeiten der Server anzusprechen:

1. Serverleistung optimieren : Dies ist häufig der wirkungsvollste Faktor.
   1. Aktualisieren Sie Ihren Hosting -Plan auf einen leistungsstärkeren Server (oder Aktualisierung eines leistungsstärkeren Hosting -Anbieters).
   2. Verwenden eines Content Delivery Network (CDN), um statische Vermögenswerte näher an den Benutzern zu speichern.
   3. Optimierung Ihres serverseitigen Code- und Datenbankabfragens.
2. Verwenden Sie Caching : Implementieren Sie ordnungsgemäße Caching-Mechanismen (GZIP, Browser-Caching, serverseitiges Caching, Objekt-Caching), um die Last auf Ihrem Server zu reduzieren.
3. Verwenden Sie einen DNS -Anbieter mit schnellen Lookup -Zeiten : Ein schneller DNS -Anbieter kann die Zeit verkürzen, die zur Lösung Ihres Domänennamens in eine IP -Adresse benötigt wird.

So beheben Sie die Seitengeschwindigkeit für WordPress -Website

WordPress ist eine hervorragende Plattform, mit der Sie Ihre Website so optimieren können, dass Sie das Gefühl haben. Website -Bauherren wie Wix und Squarespace verarbeiten dies für Sie, aber diese Kosten werden in Ihr Abonnement eingebunden. Sie sind eingesperrt, wenn sie sich für die Gasleistung entscheiden oder die Preise erhöhen. Wenn dies mit einem Hosting -Anbieter oder einem Plugin (bei Verwendung von WordPress) passiert, können Sie die Anbieter problemlos wechseln, um die Leistung bei Ihrer gewünschten Preise beizubehalten.

Hier sind die grundlegenden Plattformen, Dienste und Plugins. Ich empfehle Ihnen, Kern -Web -Vitals zu verbessern, wie auf Ihrem PageSpeed ​​Insights -Bericht gezeigt. CWVs sind durchdringen, sodass das Fixieren manchmal die anderen verbessert. Sie werden feststellen, dass einige unserer Empfehlungen mehrere Metriken helfen können.

Wie man TTFB verbessert

TTFB misst die Reaktionsfähigkeit Ihres Servers. Ein schnelleres TTFB bedeutet, dass Ihre Website früher geladen wird. Um dies zu beheben, müssen Sie auf der Serverseite arbeiten.

Hosting für SiteGround

Zuverlässiges Hosting mit optimierten Serverkonfigurationen ist für eine schnelle TTFB von entscheidender Bedeutung. SiteGround bietet eine hervorragende Leistung und Funktionen für WordPress.

Holen Sie sich SiteGround

Cloudflare cDN

Ein Content Delivery Network (CDN) wie CloudFlare kann die statischen Vermögenswerte Ihrer Website auf Servern weltweit ausräumen, wodurch die Distanzdaten bewegt und TTFB für Benutzer weltweit verbessert werden. Die kostenlose Version bietet erhebliche Vorteile.

Holen Sie sich Cloudflare

Wie man FCP, CLS und LCP verbessert

Diese CWVs sind stark davon beeinflusst, wie schnell Ihr Inhalt lädt und wie stabil Ihr Layout während des Ladens ist. Caching und Bildoptimierung sind der Schlüssel.

Nitropack

Nitropack maximiert die Effizienz der Website mit intelligentem Caching, optimierter Ressourcenbereitstellung und erweiterten Bildoptimierungstechniken wie fauler Laden und Webp -Conversion. Ich möchte dies erwähnen, weil es mit dem Caching umgeht und eine CDN und eine Bildänderung anbietet (je nach Plan). Das bedeutet, dass es sich um einen One-Stop-Shop für die drei wichtigen Dinge handelt, die Sie benötigen (Caching, Bildoptimierung und CDN).

Holen Sie sich Nitropack

W3 Total Cache

W3 Total Cache ist ein langjähriges WordPress -Caching -Plugin, das eine umfassende Reihe von Optionen bietet, um die Ladezeiten zu verbessern, einschließlich Seiten zwischen Seiten, Minifikation und Browser -Caching.

Holen Sie sich W3 Total Cache

WP -Rakete

WP Rocket ist ein benutzerfreundliches Caching-Plugin, das die Optimierung mit Funktionen wie dem Caching, der Vorspannung und der Änderung von Dateien vereinfacht. Es hat eine begeisterte Anhängerschaft und ist ziemlich einfach zu bedienen. Es gibt Add-Ons für ein CDN oder funktioniert gut mit Tonnen verschiedener Konfigurationen.

Holen Sie sich WP Rocket

Ewww Bildoptimierer

EWWW Image Optimizer optimiert Ihre Bilder automatisch und reduziert die Dateigrößen ohne merklichen Qualitätsverlust. Dies verbessert die Ladezeiten und verhindert CLS. Es hilft bei der Bildgröße und liefert Bildformate der nächsten Generation, die für das moderne Web besser geladen werden.

Holen Sie sich EWWW Image Optimierer

Wie man LCP und INP verbessert

Wenn Sie den Code sowohl für LCP als auch für INP knacken, muss Ihre Website Inhalte schnell angezeigt werden, sei es beim ersten Laden der Seite oder auf einer nachfolgenden Aktivität. Ein Performanten -WordPress -Thema kann dazu beitragen, dies zu erreichen.

Divi -Thema

Divi wurde erstellt, um die Menge an CSS und JavaScript auf jeder Seite zu minimieren, noch vor der Änderung. Wenn Sie ein Divi -Modul verwenden, können Sie darauf vertrauen, dass es gut codiert ist und dass es Ihren Server nicht besteuert. Um noch mehr Leistung von Divi zu erzielen, verwenden Sie globale Design -Voreinstellungen, um die für eine Seite benötigte Anzahl von CSS weiter zu reduzieren. All dies kommt zusammen, damit Sie bessere Seiten erstellen können, die gut aussehen und dem Sie vertrauen können, um gut zu laufen. Lesen Sie mehr über die vollständige Optimierung von Divi.

Holen Sie sich Divi Pro

Alles zusammenstellen

Die Optimierung Ihrer Website für Core Web Vitals (CWVS) ist eine Investition in Ihren Online -Erfolg. Ich weiß, dass es viel ist, aber wenn Sie sich auf LCP, INP, CLS, FCP und TTFB konzentrieren, verbessern Sie die Benutzererfahrung direkt und machen Ihre Website angenehmer und ansprechender. Dies führt zu niedrigeren Absprungraten, einer erhöhten Zeit vor Ort und letztendlich mehr Conversions.

Darüber hinaus berücksichtigt Google diese Metriken wichtig, sodass die Verbesserung Ihrer Kern -Web -Vitals Ihre Sichtbarkeit der Suchmaschine verbessern können. Obwohl diese Metriken keine Ranking -Faktoren sind, helfen sie den Arten von Dingen, die Ranking -Faktoren sind. Ich hoffe, dass Sie sehen, dass diese Verbesserungen noch mehr organischen Verkehr zu Ihrer Website führen.

Erstellen Sie noch heute eine WordPress-Site mit hoher Punktzahl

Wenn Sie Ihre Website noch nicht erstellt haben, würde ich mich in dieser Reihenfolge konzentrieren:

1. Erhalten Sie ein zuverlässiges Hosting (wir empfehlen SiteGround)
2. Wählen Sie ein Thema wie Divi aus, das mit Best Practices gebaut wurde, um eine erstaunliche Leistung zu erzielen.
3. Beenden Sie es mit einem guten Caching -Plugin und CDN.

Test Divi Page (Live -Demo)

Holen Sie sich heute Divi

Häufig gestellte Fragen