Utiliser preload et preconnect pour les polices et ressources dans WordPress

Les resource hints sont de petites instructions <link> dans le <head> d'une page, par lesquelles vous indiquez au navigateur quelles ressources il doit traiter tôt. Les trois plus importantes sont rel="preconnect" (établit à l'avance la connexion – DNS, TCP, TLS – vers un domaine tiers), rel="dns-prefetch" (résout seulement le nom DNS à l'avance, un fallback économique pour les anciens navigateurs) et rel="preload" (télécharge un fichier précis en priorité élevée avant que le navigateur ne le découvre dans le document). Utilisés correctement, ils raccourcissent le Largest Contentful Paint (LCP) souvent de 100 à 400 ms, car l'image la plus importante et les polices ne se retrouvent plus en fin de chaîne de chargement. Utilisés de façon incorrecte ou trop généreuse, ils nuisent toutefois : chaque preload est en concurrence pour la bande passante, et trop de hints retardent justement les ressources qui devraient être rapides. Ce guide montre quand et comment poser les hints de façon ciblée dans WordPress.

Les trois hints en un coup d'œil

Hint	Ce qu'il fait	Pour quoi
`preconnect`	établir à l'avance DNS + TCP + TLS vers le domaine tiers	hôte de polices, CDN, analytics – domaines chargés tôt
`dns-prefetch`	seulement la résolution DNS à l'avance	fallback économique et pour les domaines nécessaires un peu plus tard
`preload`	charger immédiatement un fichier précis en priorité élevée	image LCP, web fonts critiques, CSS critique

Étape 1 : Identifier les ressources critiques

Ouvrez les Chrome DevTools, onglet Network, rechargez la page et regardez le diagramme en cascade. Déterminez :

L'élément LCP : le plus souvent la grande image hero en haut. Dans l'onglet Performance ou dans Lighthouse, il est marqué comme "Largest Contentful Paint element".
Les polices nécessaires au texte visible (les polices chargées tard provoquent le "Flash of Unstyled Text").
Les domaines tiers chargés tôt (Google Fonts, un CDN d'images, un hôte d'icônes).

Seules ces quelques ressources reçoivent un hint, pas chaque fichier.

Étape 2 : Preconnect pour les domaines tiers

Si votre page intègre des ressources d'un autre domaine, preconnect vous épargne l'établissement de la connexion. Exemple pour un hôte de polices ou un CDN :

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

L'attribut crossorigin est obligatoire pour les polices et autres ressources chargées de manière anonyme, sinon la connexion établie à l'avance n'est pas réutilisée. Le dns-prefetch en dessous sert de fallback pour les navigateurs sans support de preconnect.

Remarque sur Google Fonts : Le plus rapide est d'héberger Google Fonts localement et de renoncer entièrement au domaine tiers. Si ce n'est pas possible, un preconnect vers fonts.gstatic.com aide.

Étape 3 : Preload pour l'image LCP et les polices

Précharger l'image LCP

<link rel="preload" as="image"
      href="/wp-content/uploads/2026/07/hero.avif"
      type="image/avif"
      fetchpriority="high">

En alternative – et souvent plus élégant – placez fetchpriority="high" directement sur la balise <img> de l'image hero et retirez le lazy loading de cette image, au lieu d'utiliser un preload séparé.

Précharger une police

<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/themes/mein-theme/fonts/inter.woff2"
      crossorigin>

Pour les polices, crossorigin est nécessaire même sur le même domaine, car les polices sont toujours chargées de manière anonyme.

Mise en œuvre dans WordPress

Variante A : via functions.php

Ajoutez les hints via le hook wp_head (dans le functions.php du child theme) :

add_action( 'wp_head', function () {
    ?>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" type="font/woff2"
          href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
          crossorigin>
    <?php
}, 1 ); // Priorite 1 = le plus tot possible dans le head

Variante B : via le filtre resource_hints

Pour preconnect et dns-prefetch, WordPress propose le filtre officiel wp_resource_hints :

add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = array(
            'href'        => 'https://fonts.gstatic.com',
            'crossorigin' => 'anonymous',
        );
    }
    return $hints;
}, 10, 2 );

Variante C : via un plugin

Des plugins d'optimisation comme WP Rocket, Perfmatters ou FlyingPress offrent des champs où vous pouvez saisir des URL de preload et de preconnect, sans code.

Comment mesurer l'effet ?

Lancez Lighthouse (Chrome DevTools, onglet Lighthouse) avant et après la modification et comparez la valeur de LCP.
Dans l'onglet Network, vérifiez que l'image LCP et les polices démarrent maintenant plus tôt dans la chaîne (priorité "High").
PageSpeed Insights ne devrait plus afficher les diagnostics "Largest Contentful Paint image was lazily loaded" ou "Preconnect to required origins".

Erreurs fréquentes

Trop de preloads : Si tout est préchargé, plus rien n'est priorisé. Limitez-vous à 1–2 images et 1–2 polices.
Preload sans utilisation : Un asset chargé via preload mais non utilisé en quelques secondes génère dans la console l'avertissement "was preloaded but not used" et gaspille de la bande passante.
Oublier crossorigin : S'il manque sur les polices, le navigateur télécharge le fichier deux fois (une fois anonymement via preload, une fois normalement).
Preconnect vers trop de domaines : Chaque connexion ouverte coûte des ressources. Plus de 4–6 preconnects ont rarement du sens.
Valeur as incorrecte : as="image", as="font", as="style" doivent correspondre au type de ressource, sinon le preload est ignoré.

Questions fréquentes (FAQ)

Quelle est la différence entre preload et preconnect ?

preconnect établit à l'avance la connexion (DNS, TCP, TLS) vers un domaine tiers, mais ne charge pas encore de fichier. preload télécharge un fichier précis en priorité élevée avant que le navigateur ne le découvre dans le document. On utilise preconnect pour les hôtes de polices ou les CDN, et preload pour l'image LCP et les polices critiques.

Pourquoi les polices ont-elles besoin de l'attribut crossorigin lors du preload ?

Les polices sont toujours chargées de manière anonyme (en mode CORS) par le navigateur, même depuis votre propre domaine. Si l'attribut crossorigin manque sur le preload, la requête préchargée ne correspond pas à la requête de police ultérieure et le navigateur télécharge le fichier deux fois. C'est pourquoi crossorigin est toujours nécessaire avec preload as="font".

Combien de ressources dois-je précharger ?

Le moins possible. Si tout est préchargé, plus rien n'est priorisé et les hints ralentissent justement les ressources qui devraient être rapides. Limitez-vous à 1 ou 2 images et 1 ou 2 polices, ainsi qu'à 4 à 6 preconnects au maximum.

Que signifie l'avertissement de console "preloaded but not used" ?

Cet avertissement apparaît lorsqu'une ressource chargée via preload n'est pas utilisée sur la page en quelques secondes. Le preload gaspille alors de la bande passante. Vérifiez si la valeur as (image, font, style) est correcte et si l'URL préchargée correspond exactement à l'URL utilisée ensuite.

Comment InspectWP aide-t-il avec les resource hints ?

InspectWP recense les ressources <link> présentes dans le <head> ainsi que les domaines tiers et les polices intégrés. Le rapport montre quels hôtes externes sont contactés tôt et où des polices tierces sont chargées, de bons points de départ pour utiliser de façon ciblée preconnect ou un hébergement local.