Core Web Vitals einer Website verbessern (LCP, INP und CLS)

Prompt

Arbeite als Web-Performance-Spezialist, der Core Web Vitals anhand von Feld- und Labordaten optimiert.

Kontext:
- Seite und Seitentyp: {{seite}}
- Berichtsdaten: {{bericht}}
- Tech-Stack: {{stack}}
- Verfügbare Daten: {{datenart}}

Wenn der Bericht das LCP-Element, langsame Interaktionen oder verschobene Elemente nicht zeigt, erkläre, wie ich das herausfinde, und frag danach, bevor du Änderungen empfiehlst.

Liefere:
1. Auswertung des Berichts: Status jeder Metrik gegenüber den Schwellen für „gut“ (LCP bis 2,5 s, INP bis 200 ms, CLS bis 0,1, jeweils am 75. Perzentil) und Abweichungen zwischen Feld- und Labordaten.
2. LCP: das Element bestimmen und aufschlüsseln in Time to First Byte, Ladeverzögerung der Ressource, Ladedauer und Renderverzögerung, mit der wahrscheinlichsten Ursache je Teil.
3. INP: lange Tasks und beteiligte Skripte sowie Techniken zur Reduzierung (Tasks aufteilen und den Main Thread freigeben, Drittanbieter-Skripte verzögern, weniger Arbeit in Event-Handlern, teure Re-Renders vermeiden).
4. CLS: verschobene Elemente und wie man Platz reserviert (Abmessungen von Bildern und iframes, aspect-ratio, Fallback-Schriften mit angepassten Metriken, nachträglich eingefügte Inhalte).
5. Eine Tabelle mit Fixes, priorisiert nach geschätzter Wirkung und Aufwand, mit Code-Ausschnitten für {{stack}} (fetchpriority, preload, Bildformate, font-display, Lazy Loading usw.).
6. Einen Messplan: wie man echte Werte mit der web-vitals-Bibliothek oder Real-User-Monitoring erfasst und wie lange es dauert, bis die Wirkung in den Felddaten sichtbar wird.
7. Was man lassen sollte, etwa das LCP-Bild per Lazy Loading laden oder Inhalte verstecken, um den Score zu schönen.

Vorgaben:
- Versprich keinen bestimmten Score und keine Google-Rankings; Verbesserungen sind Schätzungen, keine Garantien.
- Erfinde keine Werte: Fehlende Daten markierst du mit [AUSFÜLLEN].
- Widersprechen sich Felddaten und Lighthouse-Score, haben die Felddaten Vorrang.

Format: Kurzfassung in fünf Zeilen, ein Abschnitt pro Metrik, die priorisierte Tabelle und der Messplan.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    if (is_product() && $size === 'woocommerce_single') {
        $attr['fetchpriority'] = 'high';
        $attr['loading'] = 'eager'; // das LCP-Bild nie lazy laden
    }
    return $attr;
}, 10, 3);

add_filter('script_loader_tag', function ($tag, $handle) {
    $verzoegern = ['chat-widget', 'bewertungs-widget']; // [AUSFÜLLEN: echte Handles]
    return in_array($handle, $verzoegern, true) ? str_replace(' src=', ' defer src=', $tag) : $tag;
}, 10, 2);

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · Websites erstellen

Ausgabetyp

Code

Niveau

Experte

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Seite und Seitentyp, Berichtsdaten, Tech-Stack und Verfügbare Daten

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen