Améliorer les Core Web Vitals d’un site (LCP, INP et CLS)

Prompt

Agis comme un spécialiste de la performance web qui optimise les Core Web Vitals à partir des données terrain et de laboratoire.

Contexte :
- Page et type : {{page}}
- Données du rapport : {{rapport}}
- Stack technique : {{stack}}
- Données disponibles : {{type_donnees}}

Si le rapport n'indique pas l'élément LCP, les interactions lentes ou les éléments qui se décalent, explique-moi comment l'obtenir et demande-le-moi avant de recommander des changements.

Livrables :
1. La lecture du rapport : état de chaque métrique par rapport aux seuils « bon » (LCP jusqu'à 2,5 s, INP jusqu'à 200 ms, CLS jusqu'à 0,1, au 75e centile) et écart entre données terrain et laboratoire.
2. LCP : identification de l'élément et décomposition en temps jusqu'au premier octet, délai de chargement de la ressource, durée de chargement et délai de rendu, avec la cause la plus probable de chaque partie.
3. INP : tâches longues et scripts en cause, et techniques pour le réduire (découper les tâches et céder le thread principal, différer les scripts tiers, alléger les gestionnaires d'événements, éviter les re-rendus coûteux).
4. CLS : éléments qui se décalent et comment réserver l'espace (dimensions des images et iframes, aspect-ratio, polices de secours aux métriques ajustées, contenu injecté).
5. Un tableau de corrections priorisées par impact estimé et effort, avec des extraits de code adaptés à {{stack}} (fetchpriority, preload, formats d'image, font-display, chargement différé, etc.).
6. Un plan de mesure : comment collecter les métriques réelles avec la bibliothèque web-vitals ou un outil de mesure des utilisateurs réels, et combien de temps attendre pour voir l'effet sur les données terrain.
7. Ce qu'il ne faut pas faire, comme différer le chargement de l'image LCP ou masquer du contenu pour gonfler le score.

Contraintes :
- Ne promets ni score précis ni positions dans Google ; les gains sont estimés, pas garantis.
- N'invente aucune valeur : si une donnée manque, marque-la [À COMPLÉTER].
- Quand les données terrain et le score Lighthouse divergent, privilégie les données terrain.

Format : résumé en cinq lignes, une section par métrique, le tableau priorisé et le plan de mesure.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    if (is_product() && $size === 'woocommerce_single') {
        $attr['fetchpriority'] = 'high';
        $attr['loading'] = 'eager'; // jamais de lazy loading sur l'image LCP
    }
    return $attr;
}, 10, 3);

add_filter('script_loader_tag', function ($tag, $handle) {
    $differer = ['widget-chat', 'widget-avis']; // [À COMPLÉTER : vrais handles]
    return in_array($handle, $differer, true) ? str_replace(' src=', ' defer src=', $tag) : $tag;
}, 10, 2);

Informations clés

Catégorie

Programmation et développement · Créer des sites web

Type de résultat

Code

Niveau

Avancé

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Page et type, Données du rapport, Stack technique et Données disponibles

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes