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.
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
preconnectaux 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.
