Hamburger menu icon

Optimierung der Seitenerfahrung

Core-Web-Vitals Mai 2022

Core web vitals

Kernwerte des Webs

ist ein neuer Google-Rankingfaktor

Wesentliche Metriken für eine gesunde Website

Web Vitals

Die Optimierung der Qualität der Benutzererfahrung ist der Schlüssel zum langfristigen Erfolg jeder Website im Internet. Egal, ob Sie Unternehmer, Vermarkter oder Entwickler sind, Web Vitals kann Ihnen helfen, die Qualität Ihrer Website zu messen und Verbesserungsmöglichkeiten zu identifizieren.

Überblick

Web Vitals ist eine Initiative von Google, um eine einheitliche Anleitung für Qualitätssignale bereitzustellen, die für ein großartiges Nutzererlebnis im Web wichtig sind.

Google hat im Laufe der Jahre eine Reihe von Tools zur Verfügung gestellt, um die Leistung zu messen und Berichte zu erstellen. Einige Entwickler sind Experten im Umgang mit diesen Tools, während andere die Fülle an Tools und Metriken als Herausforderung empfinden.

 

Was ist neu in den Google Core Web Vitals?

Das "Was" und "Warum"

Astronaut background
Web Vitals sind Metriken mit Schwerpunkt auf der Benutzerfreundlichkeit.

Websitebesitzer müssen keine Performance-Gurus sein , um die Qualität der Erfahrung zu verstehen, die sie ihren Benutzern bieten. Die Web Vitals-Initiative zielt darauf, die Google vorgaben zu vereinfachen und Websites dabei zu helfen, sich auf die Metriken zu konzentrieren, die am wichtigsten sind, die Core Web Vitals.

Core Web Vitals

Die Core Web Vitals sind die Untergruppe der Web Vitals, die für alle Webseiten gelten, von allen Website-Betreibern gemessen werden sollten und in allen Google-Tools auftauchen werden. Jeder der Core Web Vitals repräsentiert eine bestimmte Facette des Nutzererlebnisses, ist in der Praxis messbar und spiegelt die realen Erfahrungen mit einem wichtigen nutzerzentrierten Ergebnis wider.

MUSS AUF ALLEN PAGES ANGEWANDT WERDEN

In allen Google-Tools verfügbar. 

Measurable in the field

Ground truth of what real users see.

KRITISCHES BENUTZERORIENTIERTES ERGEBNIS

Kleine Anzahl wichtiger Kennzahlen.

Google logo Comparision of web vitals
Core web vitals comparision

Weshalb?

  • Um es Entwicklern zu erleichtern, sich auf die Benutzerfreundlichkeit zu konzentrieren, die extrem wichtig ist.
  • Um das Web zu einem besseren Ort für Benutzer zu machen.

Aktualisierung von Metriken und Werkzeugen

Die Metriken, aus denen sich Core Web Vitals zusammensetzt, werden sich im Laufe der Zeit weiterentwickeln. Das aktuelle Set für 2020 konzentriert sich auf drei Aspekte der Benutzererfahrung - Laden, Interaktivität und visuelle Stabilität - und umfasst die folgenden Metriken (und ihre jeweiligen Schwellenwerte):

Largest Contentful Paint [LCP]

WANN WIRD DER HAUPTINHALT GELADEN?

 LCP ist die Zeit, die eine Website benötigt, um die grössten Inhaltselemente im Viewport zu laden. Ein solches Element kann eine Grafik, ein Video oder ein Textblock sein.

Loading icon

(Loading)

LCP

Largest Contentful Paint

Largest contentful paint spread
Phones
  • Langsame Serverantwortzeiten
  • Reduzieren Sie die Antwortzeiten des Servers (TTFB)
  • Rendering-blockierendes JavaScript und CSS
  • Beseitigen Sie Ressourcen, die das Rendern blockieren
  • Vermeiden Sie die Verkettung kritischer Anfragen
  • Ressourcenladezeiten
  • Bilder effizient codieren
  • Stellen Sie Bilder in Next-Gen-Formaten bereit
  • Aktivieren Sie die Textkomprimierung
  • Verbinden Sie sich vorab mit den erforderlichen Ursprüngen
  • Ket-Request vorab laden
  • Minimieren Sie CSS und JavaScript
  • Entfernen Sie unbenutztes CSS
  • Verwenden Sie Videoformate für animierte Inhalte

ERFOLGSGESCHICHTE

NDTV reduzierte die Zeit für Largest Contentful Paint um 55%, was zu einer Reduzierung der Absprungraten um 50% führte.

55% reduction
LCP

50% reduction in bounce rates

Cumulative Layout Shift [CLS]

VERMEIDEN SIE UNERWARTETE INHALTSVERÄNDERUNGEN

CLS ist ein Indikator, der alle content / layout shifts Inhaltsverschiebungen misst, die plötzlich auftreten, während Ihre Website geladen wird (oder später).

Visual stability icon

(Visual Stability)

CLS

Cumulative Layout Shift

Cumulative Layout Shift spread
Phones
  • Vermeiden Sie Shift-auslösende Anti-Patterns
  • Vermeiden Sie nicht zusammengesetzte Animationen
  • Bildelemente haben eine explizite Breite und Höhe
  • Injizierte Frames haben möglicherweise das Layout verschoben
  • Schriftarten mit Font-Anzeige: optional sind vorinstalliert

ERFOLGSGESCHICHTE

Yahoo! JAPAN reduzierte seinen CLS-Score, was zu mehr Seitenaufrufen pro Sitzung, längerer Sitzungsdauer und verringerter Absprungrate führte.

15.1% more page view per session

13.3% longer session duration

First Input Delay [FID]

WIE LANGE DAUERT DIE INTERAKTION?

Die FID ist die Zeit, die Sie benötigen, um mit der Website zu interagieren. Mit anderen Worten, es ist die Zeit zwischen dem Beginn des Ladevorgangs und dem Moment, in dem der Browser auf die Interaktion reagieren kann (z. B. das Klicken auf einen Link, eine Schaltfläche oder das Ausführen einer benutzerdefinierten Javascript-Aktion).

Interactivity icon

(Interactivity)

FID

First Input Delay

First input delay spread
Phones
  • Heavy main-thread Ausführung
  • Reduzieren Sie die Ausführungszeit von JavaScript
  • Minimieren Sie die Haupt-Thread-Arbeit
  • Reduzieren Sie die Auswirkungen von Code von Drittanbietern
  • Aufschiebbarer / entfernbarer Code
  • Einige Ressourcen von Drittanbietern können verzögert geladen werden
  • Entfernen Sie unbenutztes JavaScript
  • Entfernen Sie doppelte Module in JavaScript-Bundles
  • Vermeiden Sie die Bereitstellung von Legacy-JavaScript für moderne Browser

ERFOLGSGESCHICHTE

Zalando nutzte Lighthouse als Knotenmodul und Lighthouse CI, um Lade- und Interaktivitäts-Timings zu verbessern und Regressionen zu verhindern.

Die Ladezeiten für ihre Homepage in ihrer neuen Version verbesserten sich um 65% (Desktop) und 32% (mobile), und die Interaktivitätszeiten verbesserten sich um 140% (Desktop) und (66% mobile).

65%
load timings improved

140% interactivity timings improved

SCHLUSSFOLGERUNG UND RESSOURCEN

Optimieren Sie CWV für Ihre Users und Ihr Unternehmen

Largest Contentful paint

Beheben Sie langsame Antwortzeiten des Servers, Render-Blocking von JS und CSS und Ladezeiten von Ressourcen.

First input delay & total Blocking time

Behandeln Sie schwere Haupt-Thread-Ausführungen und aufschiebbaren oder entfernbaren Code.

Cumulative layout shift

Vermeiden Sie Shift-auslösende Anti-Patterns.

Core web vitals vs others example Core web vitals vs others example
Contact form background

Ihr nächster Schritt

Houston, we have a contact

Wir generieren mehr Umsatz und Erfolg für Ihr Geschäft

Project process

Legen Sie Ihre eigene Zeit fest und wir rufen Sie zurück.

Bitte füllen Sie das Formular kurz aus, das uns bei der Vorbereitung hilf. Wir melden uns innerhalb von 24h bei Ihnen.