# wp_resource_hints : preconnect et dns-prefetch sans en abuser

> Ajoutez les bonnes indications de ressources pour vos polices, votre CDN et vos API tierces avec le filtre wp_resource_hints, et mesurez vraiment l'effet.

- Auteur : Clément Hadrot
- Publié le : 2020-07-20
- Mis à jour le : 2020-07-20
- Catégorie : Performance
- URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/wp-resource-hints-preconnect-dns-prefetch/

## L’essentiel

- preconnect établit la connexion, dns-prefetch résout juste le DNS
- Chaque preconnect superflu consomme des ressources réseau
- Trois à quatre origines externes est déjà beaucoup

Un problème classique : une page WordPress charge une police depuis Google Fonts, ses images depuis un CDN, et envoie des événements à un outil d'analytics. Trois domaines externes, chacun nécessitant une résolution DNS, une négociation TLS et l'ouverture d'une connexion avant le premier octet utile. WordPress propose depuis la version 4.6 le filtre `wp_resource_hints` pour anticiper une partie de ce travail. Bien utilisé, il fait gagner plusieurs centaines de millisecondes ; mal utilisé, il ne sert à rien, voire ralentit légèrement la page.

## Le problème : préconnexion à un domaine externe

Chaque origine externe impose une séquence avant de pouvoir transférer la première donnée : résolution DNS, poignée de main TCP, puis négociation TLS si le site est en HTTPS. Sur une connexion mobile, cette séquence peut coûter plusieurs centaines de millisecondes, répétées pour chaque domaine externe utilisé par la page. Anticiper cette séquence, avant même que le navigateur ne découvre qu'il en a besoin, permet de la faire en parallèle du reste du chargement.

## Snippet commenté : le filtre wp_resource_hints

```
function wpm_resource_hints( $urls, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $urls[] = array(
            'href' => 'https://fonts.gstatic.com',
            'crossorigin',
        );
        $urls[] = 'https://cdn.exemple-client.test';
    }

    if ( 'dns-prefetch' === $relation_type ) {
        $urls[] = '//www.google-analytics.com';
    }

    return $urls;
}
add_filter( 'wp_resource_hints', 'wpm_resource_hints', 10, 2 );
```

La distinction entre les deux types d'indications est importante. `dns-prefetch` ne fait que résoudre le nom de domaine à l'avance, une opération légère. `preconnect` va plus loin : il établit la connexion TCP et, en HTTPS, effectue aussi la négociation TLS. C'est plus coûteux à déclencher, donc à réserver aux origines dont vous êtes certain qu'elles seront utilisées immédiatement, comme la police principale ou le CDN d'images.

> L'essentiel à retenir : preconnect établit la connexion, dns-prefetch résout juste le DNS ; Chaque preconnect superflu consomme des ressources réseau ; Trois à quatre origines externes est déjà beaucoup

## Pourquoi l'attribut crossorigin compte pour les polices

Pour les ressources de police, le `preconnect` doit systématiquement inclure l'attribut `crossorigin`, même si le domaine ne nécessite pas d'authentification. Sans cet attribut, le navigateur ouvre une connexion distincte pour la requête de police elle-même, ce qui annule le bénéfice du preconnect. C'est une source d'erreur fréquente, invisible sans un examen attentif de l'onglet réseau des outils de développement.

## Variante : limiter les hints à certaines pages

Un preconnect vers l'API d'un outil de chat n'a aucun intérêt sur les pages où ce chat ne s'affiche pas. Conditionnez l'ajout des hints au contexte réel de la page :

```
function wpm_resource_hints_conditionnel( $urls, $relation_type ) {
    if ( 'preconnect' === $relation_type && is_page( 'contact' ) ) {
        $urls[] = 'https://widget.chat-fictif.test';
    }
    return $urls;
}
add_filter( 'wp_resource_hints', 'wpm_resource_hints_conditionnel', 10, 2 );
```

## Ne pas en abuser : le piège du preconnect généralisé

Chaque connexion préétablie consomme des ressources réseau et de la mémoire côté navigateur, en particulier sur les appareils mobiles peu puissants. Au-delà de trois ou quatre origines en `preconnect`, le navigateur commence à retarder certaines connexions plutôt qu'à les traiter toutes en parallèle, ce qui peut ralentir légèrement le chargement des ressources réellement critiques.

- Réservez `preconnect` aux origines utilisées dès le premier rendu (police principale, CDN d'images du haut de page).
- Utilisez `dns-prefetch`, plus léger, pour les origines utilisées plus tard dans la page ou de façon conditionnelle.
- Retirez les hints vers des services que le site n'utilise plus : ils traînent souvent après le remplacement d'un plugin.

## Mesurer l'effet réel

Ouvrez l'onglet réseau des outils de développement, activez le throttling « Fast 3G », et comparez le temps avant la première requête vers le domaine externe avec et sans le hint. Sur un projet client récent, l'ajout d'un preconnect ciblé vers Google Fonts a fait gagner environ 180 millisecondes sur le rendu du texte, un gain net et mesurable pour une modification de quelques lignes.

> Un preconnect est une promesse faite au navigateur : s'il n'est pas tenu, la promesse coûte plus cher qu'elle ne rapporte.

## Variantes selon le contexte

Sur un site multilingue avec un CDN différent par région, préférez générer les hints dynamiquement à partir de la configuration du CDN actif plutôt que de coder les URL en dur. Sur un site avec peu d'origines externes, il est parfois plus simple de ne conserver qu'un seul preconnect vers la police principale et de laisser le reste au comportement par défaut du navigateur.