LCP optimieren

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

• FCP und TTBF sollten auch berücksichtigt werden
• schlechter TTFB kann z.B. auf schlechtes Netzwerk zurückzuführen sein

Ursachen für schlechten LCP:

• LCP-Element <img> wird dynamisch mit Java Script eingefügt
• Das LCP-Element wird verzögert mit einer JavaScript-Bibliothek geladen, die seine src- oder srcset-Attribute (oft als data-src oder data-srcset) ausblendet
• LCP braucht CSS Hintergrund

→ In jedem dieser Fälle muss der Browser das Script ausführen oder das Stylesheet anwenden (weil Attribute etc. nicht im Ursprungs HTML stehen)

Verbessern des LCP:

• komplexe Aufgaben in kleinere, übersichtlichere Aufgaben unterteilen

• zunächst anschauen: Ursprüngliches HTML Dokument + LCP Ressource

• Bei einer gut optimierten Seite, sollte LCP-Ressourcenanfrage so früh wie möglich geladen und das Element gerendert werden

• Verzögerung beim Laden der Ressourcen beseitigen

  • theoretisch kann LCP mit der ersten Ressource geladen werden (falls nicht → Verbesserungspotential)
  • Optimieren wann Ressource erkannt wird
    • LCP Ressource sollte im ersten HTML-Dokument, das der Browser empfängt erkannt werden
    • Wenn die Ressource nur in einer externen CSS- oder JavaScript-Datei referenziert wird, sollte die LCP-Ressource mit einer hohen Abrufpriorität vorab geladen werden

  **Beispiel:**
  <!-- Load the stylesheet that will reference the LCP image. -->
  <link rel="stylesheet" href="/path/to/styles.css">
  
  <!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
  <link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">
  

  • Optimieren welche Priorität der Ressource zugewiesen wird
    • LCP sollte niemals mit Lazy Loading geladen werden fetchpriority="high"
    • Wenn mehrere Bilder hohe Fetchpriority haben unsinnig → unwichtige Elemente senken fetchpriority="low"

• Verzögerung beim Rendern des LCP vermeiden

  • LCP Element sollte sofort gerendert werden können, wenn Ressource geladen wurde

INP verbessern