|

Core Web Vitals Guide 🧑‍⚕️ - LCP ⚡ (Largest Contentful Paint)

Dieser Beitrag ist Teil der Serie Core Web Vitals Guide.

Core Web Vitals Guide 🧑‍⚕️ - die wichtigsten Metriken im Web
Die Core Web Vitals: Einheitliche KPIs unabhängig vom Tool. Diese Werte sind zukünftig die Werte, nach denen man Performance bewerten wird; und damit die Werte, die wir mit Kund:innen kommunizieren werden.
LCP (Loading) visualisiert
Bildquelle: web.dev/LCP

LCP, oder auch "Largest Contentful Paint" gibt an, wie lange das größte Content-Element auf der Seite benötigt, um geladen zu werden.
Hiermit wird also die wahrgenommene Ladedauer ermittelt.

Einstufung der Ergebnisse

Einstufung Ladezeit
🟢 gut < 2,5 sec
🟡 verbesserungswürdig 2,5 bis 4 sec
🔴 schlecht, Handlungsbedarf > 4 Sekunden

Was wird beurteilt

Als Content-Element zählen Bilder (inline oder als Hintergrundbild), Videos oder Text-Blöcke.

Meistens wird das größte Element zum Schluss geladen.

Bilder werden entweder nach ihrer Original (intrinsic size) oder der sichtbaren Größe (visible size) gewertet, je nachdem welcher Wert kleiner ist.

Für Text wird der größte Textblock gewertet, wobei nur die text-node Größe zählt. (entspricht: kleines Rechteck mit Text)

Nicht berücksichtigt werden:

  • Elemente außerhalb des Viewports (zu diesem Anteil)
  • Elemente die nicht-sichtbaren overflow/clipping haben
  • Das Box Model (sprich margin, padding oder border)

Optimierungsmöglichkeiten

Langsame Serverantworten

  • Effizientes Caching
  • Third-Party-Connections möglichst früh aufbauen um die User Experience nicht während der Nutzung durch Nachladen zu verzögern.
  • CDN Einsatz

siehe auch:

Render blocking JS/CSS

  • Critical JS/CSS reduzieren (Critical Rendering Path)
  • JS minifizieren
  • nicht kritisches CSS/JS verschieben
  • (kritisches CSS inlinen)

Ressourcen optimieren

  • Content-Elemente (vorallem Bilder und Videos) in passender Größe und den besten Formaten ausliefern.
  • Gzip Komprimierung verwenden
  • Adapting Serving (Inhalte abhängig von Netzwerkverbindung wie 3G oder 4G ausliefern)

Client-Side Rendering

  • JS-Framework wie React oder Angular verwneden um im Browser den Content schneller darzustellen

Weitere Tipps

Google selbst listet noch weitere Tipps zur Optimerung von LCP auf:
siehe web.dev/optimize-LCP

Weitere Infos / Quellen

siehe web.dev/LCP