Optimiser le LCP avec la balise preload sur WordPress : bonnes pratiques et pièges à éviter

Qu’est-ce que le LCP (Largest Contentful Paint) ?

Le Largest Contentful Paint (LCP) est l’un des trois Core Web Vitals définis par Google pour mesurer l’expérience utilisateur.
Concrètement, le LCP correspond au temps nécessaire pour afficher le contenu principal visible d’une page (souvent une grande image, une vidéo ou un bloc de texte important). Google nomme souvent ce contenu sous le terme de "Hero".

➡️ Un bon score LCP est atteint lorsque le contenu s’affiche en moins de 2,5 secondes. Au-delà, la page est considérée comme lente, ce qui peut impacter négativement :

• L’expérience utilisateur (taux de rebond plus élevé)
• Le référencement naturel (SEO) de tes pages et articles puisque Google intègre les Core Web Vitals dans ses critères de classement.

Quand utiliser <link rel="preload"> pour améliorer les performances web ?

La balise <link rel="preload"> permet d’indiquer au navigateur quels fichiers sont prioritaires pour le rendu visuel.

Exemple d’usage courant :

<link rel="preload" as="image" href="/images/hero.jpg" fetchpriority="high">

Elle est bénéfique lorsque :

• Le LCP est causé par une image hero ou une vidéo en haut de page.
• La police d’écriture principale (webfont) bloque le rendu du texte.
• Le CSS critique ou un script nécessaire au premier rendu est chargé trop tard.

Et l’attribut fetchpriority ?

Depuis peu, il est possible d’ajouter fetchpriority="high" pour indiquer au navigateur qu’une ressource préchargée est absolument critique.

• Avec preload seul, on dit au navigateur quoi charger tôt.
• Avec preload + fetchpriority, on lui dit aussi dans quel ordre de priorité le traiter par rapport aux autres fichiers.

➡️ Cela est particulièrement utile pour une image LCP (hero image) ou une police de caractères importante, car cela réduit encore le délai d’affichage.

Quand l’utilisation de preload est-elle néfaste pour les performances ?

Mal utilisé, preload peut avoir l’effet inverse et ralentir le site.

Cas problématiques :

• Précharger trop de ressources : le navigateur perd son temps à récupérer des fichiers non critiques.
• Précharger des fichiers utilisés plus tard dans la page (images de bas de page, scripts non essentiels).
• Oublier de préciser l’attribut as (image, font, script…), ce qui empêche le navigateur d’optimiser le cache.

➡️ En résumé : il faut limiter le preload aux ressources qui impactent directement le LCP.

Comment utiliser preload sur un site WordPress ?

Méthode 1 : insérer dans header.php

Tu peux ajouter manuellement la balise dans le fichier header.php de ton thème enfant :

<link rel="preload" as="image" href="<?php echo get_template_directory_uri(); ?>/images/hero.jpg" fetchpriority="high">

➡️ Dans ce cas, le preload s'appliquera à toutes les pages de ton site. Veille donc à ce que ce soit une image présente partout, comme par exemple le logo principal.

Méthode 2 : insérer dans functions.php avec wp_enqueue_style/script

WordPress permet aussi d’ajouter un preload via son système d’enqueue.

Exemple pour une police Google Fonts

function add_preload_resources() {
    echo '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" as="style" onload="this.rel=\'stylesheet\'">';
}
add_action('wp_head', 'add_preload_resources');

Exemple pour une image LCP (hero image) classique

function preload_hero_image() {
    echo '<link rel="preload" as="image" href="' . get_template_directory_uri() . '/images/hero.jpg" fetchpriority="high">';
}
add_action('wp_head', 'preload_hero_image');

Exemple : cibler un Custom Post Type en particulier

Si tu veux précharger une image uniquement sur les pages d’un CPT (exemple : portfolio) :

function preload_cpt_hero_image() {
    if ( is_singular('portfolio') ) {
        echo '<link rel="preload" as="image" href="' . get_template_directory_uri() . '/images/portfolio-hero.jpg" fetchpriority="high">';
    }
}
add_action('wp_head', 'preload_cpt_hero_image');

Exemple : précharger une image utilisée en CSS background-image

Si ton image Hero est appliquée via CSS (et donc pas détectée automatiquement par Lighthouse comme LCP), il est recommandé de la précharger manuellement :

function preload_css_background_image() {
    echo '<link rel="preload" as="image" href="' . get_template_directory_uri() . '/images/hero-bg.jpg" fetchpriority="high">';
}
add_action('wp_head', 'preload_css_background_image');

Exemple avancé : précharger l’image mise en avant (featured image) avec choix de la taille

Si ton Hero correspond à l’image mise en avant de la page ou de l’article courant (pratique pour un blog ou un custom post type dynamique) :

function preload_featured_image() {
    if ( is_singular() && has_post_thumbnail() ) {
        $image_id = get_post_thumbnail_id();

        // Choisir la taille selon tes besoins :
        // "full" = taille originale (parfois lourde)
        // "large" ou "medium_large" = souvent suffisant pour un Hero
        $image_url = wp_get_attachment_image_url( $image_id, 'large' );

        if ( $image_url ) {
            echo '<link rel="preload" as="image" href="' . esc_url( $image_url ) . '" fetchpriority="high">';
        }
    }
}
add_action('wp_head', 'preload_featured_image');

Ce qu'il faut retenir de l'usage de preload avec WordPress

La balise <link rel="preload"> est un levier puissant pour optimiser le LCP et améliorer les performances web, mais elle doit être utilisée avec discernement.

• ✅ Précharge uniquement les ressources critiques (image hero, police principale, CSS essentiel).
• ❌ Évite le preload excessif, qui surcharge le navigateur et peut nuire aux performances.
• 🚀 Combine preload avec fetchpriority pour donner un signal fort au navigateur et améliorer encore l’affichage initial.
• 🔧 Sur WordPress, utilise header.php ou functions.php pour l’intégrer proprement (y compris dans des cas dynamiques comme l’image mise en avant).

En suivant ces bonnes pratiques, ton site WordPress gagnera en rapidité, en expérience utilisateur et en visibilité SEO !