Core Web Vitals

• Web Vitals ist eine Initiative von Google
• Ziel: Einheitliche Leitlinien für Qualitätskriterien
• Webseiteninhaber müssen keine Leistungsexperten sein
• Konzentration auf die wichtigsten Messwerte: Core Web Vitals
• jedes CWV repräsentiert bestimmte Facette der User Experience
• gelten für alle Webseiten, sollten von allen gemessen werden können und sind in allen Google Tools vorhanden
• Beziehen sich alle auf Nutzerorientierte Leistungsmesswerte

→ Im Endeffekt soll gemessen werden wie der Nutzer die Seite wahrnimmt

LCP - Largest Contentful Paint

https://web.dev/articles/lcp?hl=de

• Ladeleistung/Geschwindigkeit
• Frage: Wird der wichtigste Inhalt schnell sichtbar?
• Zeitpunkt an dem der Hauptinhalt/größter Inhalt der Seite wahrscheinlich geladen wurde
  • z.B. ein großes Titelbild, Herobanner, großer Textblock, Videovorschaubild…
• Vorher:
  • Werte wie load + DOMContent Loaded (entsprechen nicht immer dem was der Nutzer sieht)
  • Neuere Werte wie FCP (First Contentful Paint) erfassen nur Beginn des Ladevorgangs (Ladebalken z.B. auch)
• umfasst nicht nur Zeit, die das Laden des Inhalts selbst benötigt sondern startet bereits beim Entladen der vorherigen Seite (inkl. Herstellen der Verbindung, Weiterleiten und anderer TTFB-Verzögerungen)
• Angestrebter Wert
  • LCP Wert < 2,5 Sek → Gute Ladegeschwindigkeit
  • 2,5 Sek < LCP Wert < 4 Sek → muss verbessert werden
  • 4 Sek < LCP Wert → Schlechte Ladegeschwindigkeit
• Elementtypen, die berücksichtigt werden:
  • <img>-Elemente
  • <image>-Elemente in einem <svg>-Element
  • <video>-Elemente
  • Element mit Hintergrundbild, das mit url() geladen wird (statt normalen CSS-Hintegrund)
  • Elemente auf Blockebene, die Textknoten oder andere untergeordnete Textelemente auf Inline-Ebene enthalten
• Elemente, die bewusst ausgeschlossen werden:
  • Elemente mit Deckkraft 0 → unsichtbar
  • Elemente die kompletten Darstellungsbereich abdecken → vmtl. Hintergrund
  • sehr simple Bilder (graue Fläche etc.) → meist Platzhalter

<aside> <img src="/icons/chart-area_purple.svg" alt="/icons/chart-area_purple.svg" width="40px" />

Grober Ablauf

1. Der Browser lädt HTML, CSS, JavaScript, Bilder und Fonts.
2. Der Browser baut daraus die sichtbare Seite.
3. Nach jedem Rendering-Schritt kann der Browser prüfen:Was ist aktuell das größte sichtbare Inhaltselement im Viewport?
4. Wenn sich dieses größte Element ändert, erzeugt der Browser einen neuen PerformanceEntry vom Typ largest-contentful-paint </aside>