Wie können Sie Ihre Google Core Web Vitals Scores verbessern?

Veröffentlicht

(23. August 2020)

Nächste Ära der Webseitenleistung

Ich habe einige Monate gearbeitet über Strategien zur Verbesserung der Webseitenleistung auf meinen firmeneigenen Websites und um ehrlich zu sein, ist es eine wirklich interessante Arbeit, sie mit euch zu teilen.

Ich verstehe, dass die Arbeit an der Webseitenleistung nicht neu ist Das Ding und die Leute haben sich viele Ideen und Tricks ausgedacht, um die Geschwindigkeit beim Laden von Seiten zu erhöhen. Aber jetzt scheint es nicht mehr genug zu sein und Sie müssen in das nächste Level eintreten !!

As Ihr solltet wissen, wie wichtig SEO (Search Engine Optimization) ist und wie ihr eure Webseitenergebnisse nicht nur auf der ersten Seite der Google-Ergebnisse, sondern oben auf derselben ersten Seite veröffentlicht, ist wirklich sehr viel! Lange Rede, kurzer Sinn – ich garantiere Ihnen, dass die Google Core Web Vitals im Folgenden einen dieser größten Beiträge zum SEO-Ranking der Google-Suchergebnisse leisten werden.

Kurz & Einfache Erläuterungen zu Google Core Web Vitals

Core Web Vitals, die im ersten Quartal dieses Jahres eingeführt wurden, sind eine Reihe von Metriken, die sich auf Geschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität Ihrer Webseite beziehen.

Google hat diese als die wichtigsten Web-Vitale definiert:

  • Größte inhaltliche Farbe : Die Zeit, die zum Laden des Hauptinhalts einer Seite benötigt wird. Eine ideale LCP-Messung ist 2,5 Sekunden oder schneller.
  • Verzögerung der ersten Eingabe : Die Zeit, die eine Seite benötigt, um interaktiv zu werden. Eine ideale Messung ist kleiner als 100 ms .
  • Kumulative Layoutverschiebung : Das Ausmaß der unerwarteten Layoutverschiebung des visuellen Seiteninhalts. Eine ideale Messung ist kleiner als 0,1 .

Dieser Satz von Metriken wurde entwickelt, um Helfen Sie Websitebesitzern dabei, die Benutzererfahrung zu messen, die sie in Bezug auf Laden, Interaktivität und visuelle Stabilität bieten.

Insgesamt wird Ihre Seitenleistung im Folgenden wie folgt eingestuft.

Vollständige Liste der Metriken, die für Seitenleistungsmetriken berücksichtigt werden.

Im nächsten Abschnitt werden im Wesentlichen die Ideen oder Methoden zur Verbesserung der Leistung beim Laden von Seiten und der CWV-Werte erläutert.

Tipps zur Verbesserung Ihrer Kernwerte für Web-Vitale

Nachfolgend sind einige Methoden aufgeführt Dies hat mir geholfen, die Ergebnisse meiner Core Web Vitals drastisch zu verbessern und die Gesamtseitenleistung zu verbessern.

  1. Browser- und CDN-Cache effektiv nutzen (verbessert FID und LCP)
    Dies ist ein sehr einfacher Ansatz ch, um Ihre FID- und LCP-Werte zu verbessern. Stellen Sie sicher, dass Ihre statischen Assets von einem CDN bereitgestellt werden (wenn es AWS ist, können Sie es in Cloudfront zwischenspeichern). Dies führt dazu, dass die Ressourcen schnell in Ihre Browser gelangen. Stellen Sie zur Verbesserung des zweiten Ladevorgangs sicher, dass die auf der Clientseite erreichten Assets in Ihrem Browser zwischengespeichert sind.
    cache-control: max-age=120 – bedeutet, dass die zurückgegebene Ressource für 120 gültig ist Sekunden, nach denen der Browser eine neuere Version anfordern muss.
    Sie können auch Ihre dynamischen Seiten in zwischenspeichern Ihr CDN mit dem richtigen TTL-Wert basierend auf Ihrem Anwendungsverhalten.
  2. Legen Sie genaue Größenattribute oder -abmessungen für Ihre Medien und Anzeigen fest (verbessert CLS)
    Dies ist sehr wichtig, um Ihre CLS-Werte zu verbessern. Stellen Sie sicher, dass für Ihr Bild oder Medien-Tags eine richtige height:XXpx; width: YYpx festgelegt ist. Auch dies ist zumindest für die Komponenten, die sich über der Falte befinden, sehr wichtig. Eine Abkürzung dafür ist, dass Sie, wenn Ihnen die Ideen ausgehen, um die genaue Höhe des Bildes zu erhalten, height:auto; festlegen können, was mir wirklich geholfen hat. Wenn auf Ihrer Website neben Anzeigen auch Anzeigen geschaltet werden, stellen Sie sicher, dass Sie die richtigen Anzeigenflächen mit den richtigen Abmessungen festgelegt haben, da ein Hoch- oder Herunterschieben der Komponenten auf der Seite Ihre CLS-Punktzahl definitiv senkt. Behalten Sie also auch die Anzeigen im Auge!
  3. Bilder mit der richtigen Auflösung verzögern, basierend auf dem Gerätetyp (verbessert LCP)
    Dies ist wirklich ein schneller Gewinn für Sie! Es gibt viele Lazy Loading-Pakete auf der Welt, die Sie auf Ihrer Webseite verwenden können, um alle Bilder auf Ihrer Seite faul zu laden.Dadurch werden das Gesamtseitengewicht und die Ladezeit für das Rendern Ihrer Seite im Browser verringert. Ein weiteres wichtiges Element ist, dass Sie die Auflösung des zu ladenden Bilds basierend auf dem Gerätetyp vordefinieren. Sie sollten nicht Bilder mit derselben Auflösung in verschiedenen Gerätetypen laden.
  4. Verwenden Sie SSR und CSR effektiv auf Ihrer Webseite (verbessern Sie die FID & LCP)
    Sie sollten wissen, dass Google Server Side Rendered (SSR) -Seiten fördert und fördert, um gute SEO-Werte zu erhalten Ein Kompromiss zwischen SEO und Seitenladeleistung. Wenn Ihre Seite inhaltlich zu groß ist und Sie sich entscheiden, die gesamte Seite auf dem Server zu rendern, wird das Laden der gesamten Seite sowie der Seite definitiv mehr Zeit in Anspruch nehmen Das Gewicht wird ebenfalls hoch sein. Lange Rede, kurzer Sinn – meine Empfehlung ist, dass es besser ist, das SSR-Rendering für Ihre Seitenkomponenten durchzuführen, die über der Falte erscheinen, und den Rest der Komponenten von der Client-Seite zu rendern, die unter der Falte erscheint. Auf diese Weise erhält der Benutzer die Seite, die über dem Falz geladen wird, und der Rest der Seite wird asynchron gerendert, ohne die Benutzererfahrung zu beeinträchtigen.
  5. Code verwenden Durch Aufteilen von & wird Ihr Vermögen in Blöcke aufgeteilt (verbessert die FID & LCP)
    Es ist immer keine gute Idee, große (alles über 100 KB große) Assets (insbesondere JS-Dateien) in Ihrer Anwendung zu haben. Verwenden Sie daher besser Pakete wie „Webpack“, um schwere Assets in kleine Blöcke aufzuteilen, die Ihre Assets asynchron laden in Ihren Browser (wenn Sie das h2-Protokoll aktivieren). Sie können auch die Funktionen zur Codeaufteilung nutzen, um Ihre Seitenkomponenten in separate Dateien aufzuteilen, anstatt sie in eine einzelne HTML-Datei zu packen.
  6. Komprimieren Sie alle Ihre statischen Assets mit Brotli-Komprimierung (verbessert LCP)
    Ich empfehle die Verwendung von Brotli, um Ihre statischen Assets zu komprimieren, was eine viel bessere Zusammenarbeit ergibt Druckverhältnisse im Vergleich zu anderen Bibliotheken auf dem Markt. Denken Sie gleichzeitig daran, dass bei Verwendung von Brotli mit einem höheren Komprimierungsverhältnis die Build- und Paketzeit in der DevOps-Pipeline-Reise definitiv verlängert wird. Für mich war es in Ordnung, die Anwendungserstellungszeit zu opfern, da ich einen besseren Wert hinsichtlich der Leistung beim Laden von Seiten erhalte.
  7. Optimieren Sie die API-Anforderung und Antwortinhalt (verbessert FID & LCP)
    Dies ist sehr wichtig, da jedes Byte hier wichtig ist, wenn wir darüber sprechen Seitenleistung. Ich vertraue darauf, dass Sie es nicht bereuen werden, Ihre API-Anfragen & für das Auffüllen Ihrer Seite überprüft zu haben. Stellen Sie sicher, dass Sie nur die Daten zurückerhalten, die Sie für Ihre Seite benötigen Eine andere dumme Sache, die Sie möglicherweise als Fehler machen könnten, ist, dass Ihre API-Aufrufe intern selbst aufgerufen werden, anstatt öffentliche Endpunkte oder über das Internet zu verwenden – weil es in Bezug auf die Zeit immer teuer ist, wenn Sie Rufen Sie Ihre APIs über das Internet auf, wenn Ihre APIs im selben Subnetz oder zumindest im selben Netzwerk gehostet sind!
  8. Reduzieren Sie die Gesamtseite / das Dokument Größe (verbessert LCP)
    Wenn Ihre Zielseite schwer ist (ich würde jede Seite mit> 80 KB als schwer einstufen), trägt dies definitiv schlecht zum LCP-Score bei Dies erhöht proportional die Abruf- und Downloadgeschwindigkeit Ihrer Seite. Stellen Sie also sicher, dass Sie keinen unbenutzten großen Datenblock vom Server erhalten, und laden Sie nur die Daten, die zum Rendern Ihrer Seite erforderlich sind.
  9. Verwenden Sie NEXT-GEN-Bildformate (verbessert LCP).
    JPEG 2000, JPEG XR und WebP sind Bildformate, die im Vergleich zu ihren älteren JPEG- und Bildformaten überlegene Komprimierungs- und Qualitätsmerkmale aufweisen PNG-Gegenstücke. Wenn Sie Ihre Bilder in diesen Formaten anstatt in JPEG oder PNG codieren, werden sie schneller geladen und verbrauchen weniger Mobilfunkdaten. Sie können jede Art von Tool auf dem Markt verwenden, um die Bilder in NEXT-GEN-formatierte Bilder zu konvertieren, oder Sie können sogar einen Laufzeit-Bilddienst erstellen, der eine Echtzeit-Bildkonvertierung von JPEG nach WebP durchführen und im Browser bereitstellen kann.
  10. Fallback auf die vom nativen Browser unterstützten Schriftarten aktivieren (verbessert die FID)
    Es ist erwiesen, dass Schriftarten kann Ihre Leistungswerte erheblich senken, wenn der Browser das Laden Ihrer benutzerdefinierten Schriftart, die in Ihrer Anwendung verwendet wird, verzögert, es sei denn, es handelt sich um eine vom Browser unterstützte Standardschriftart. In diesem Fall ist ein schneller Gewinn für Sie ein Fallback-Ansatz beim Laden Ihre Schriftart mit den vom Browser standardmäßig unterstützten Schriftarten. Nachfolgend finden Sie ein Beispielcode-Snippet für einen Fallback-Ansatz mit anderen Schriftarten.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Alle oben angegebenen Tipps können schrittweise in Ihrer Anwendung implementiert werden, und wie bereits erwähnt, werden die Core Web Vitals-Scores vom echten Benutzer entwickelt Daten und nicht mehr aus Labordaten. Daher braucht es Zeit, um die Verbesserungen in Ihrer Punktzahl zu reflektieren. Die Reflexion dauert meistens 28 Tage. Sie können weiterhin das PageSpeed-Tool von Google verwenden – https://developers.google.com/speed/pagespeed/insights/ , um Ihre CWV-Ergebnisse zu erhalten.

Hoffe das hilft und wünsche Ihnen viel Erfolg bei Ihren Arbeiten! Prost!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.