Préconnexion aux domaines externes

Disponible depuis WP Rocket 3.19, la fonctionnalité Préconnexion aux domaines externes améliore les temps de chargement en établissant une préconnexion avec les domaines externes utilisés sur une page.

WP Rocket active automatiquement cette optimisation dès l’activation du plugin. Vous n’avez donc pas besoin de sélectionner d’options ni de spécifier de domaines pour en bénéficier.

Attention ! Le processus de préconnexion aux domaines externes est automatique, mais pas instantané : il est asynchrone.

Pour que le processus soit aussi automatique et rapide que possible, utilisez également l’option Supprimer les ressources CSS inutilisées.

Vous trouverez une explication plus détaillée du fonctionnement de la fonctionnalité Préconnexion aux domaines externes dans cet article.

Aperçu de la fonctionnalité

La fonctionnalité Préconnexion aux domaines externes analyse la page et détecte les ressources hébergées à l’extérieur du site. Elle ajoute ensuite l’indication preconnect pour ces domaines externes.

Ainsi, le navigateur établit une connexion avec ces sites externes dès le départ, ce qui accélère le téléchargement des ressources externes et permet un chargement plus rapide de la page.

Les domaines externes optimisés par cette fonctionnalité sont appelés domaines préconnectés et font partie des Éléments prioritaires de WP Rocket.

Cette optimisation s’applique uniquement aux éléments HTML suivants :

link
script
iframe

Domaines préconnectés différents pour mobile et ordinateur

WP Rocket traite séparément les versions mobile et ordinateur d’une page afin de rendre la préconnexion des domaines aussi précise que possible. Ce processus est basé sur l’option Cache mobile, qui est responsable de la création d’un ensemble spécifique de fichiers de cache pour les mobiles.

Approche asynchrone

Préconnecter aux domaines externes fait partie des optimisations asynchrones de WP Rocket. Cela signifie que la fonctionnalité n’est pas appliquée immédiatement, mais suit les étapes suivantes :

Un script est injecté dans la page à optimiser.
Lorsqu’un visiteur charge la page, le script s’exécute, détecte les domaines des ressources externes, puis les envoie à WP Rocket.
WP Rocket ajoute ensuite l’indication preconnect pour ces domaines lors de la prochaine génération du cache de la page.

Avantages de la fonctionnalité

Préconnecter aux domaines externes rend votre site plus rapide en établissant à l’avance les connexions, ce qui accélère le téléchargement des ressources externes présentes dans la mise en page.

Avantages pour PageSpeed/Lighthouse

Cette option peut également améliorer l’audit Largest Contentful Paint (LCP) si l’élément LCP utilise une police ou une ressource hébergée sur un domaine externe.

Comment vérifier si la préconnexion aux domaines externes fonctionne

Vous pouvez vérifier si les domaines externes d’une page sont optimisés grâce à la fonctionnalité Préconnecter aux domaines externes en consultant le code source de la page.

Présence du script de la fonctionnalité

Tout d’abord, un script nommé wpr-beacon.min.js sera ajouté à la page. Il peut être identifié dans le code source avec la balise suivante :

<script data-name="wpr-wpr-beacon" src="https://votresite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js" async></script>

Si une page contient ce script, cela signifie que l’optimisation a commencé.

Indication de préconnexion (Preconnect)

Une fois l’optimisation finalisée, le wpr-beacon.min.js sera supprimé, et une indication rel="preconnect" sera ajoutée pour les domaines externes.

Par exemple, pour des ressources comme celles-ci :

<script src="https://cloudflare.com/assets/script.js"></script>

<link rel="stylesheet" href="https://cdnjs.com/styles.css">

<iframe src="https://www.youtube.com/video-embed-1"></iframe>

WP Rocket ajoutera une balise link dans la balise head avec les attributs suivants :

rel="preconnect"
crossorigin
href (avec le domaine externe en valeur)
data-rocket-preconnect (pour identifier WP Rocket comme l’initiateur)

Le résultat sera donc un balisage comme celui-ci :

<link crossorigin data-rocket-preconnect href="https://cloudflare.com/" rel="preconnect">

<link crossorigin data-rocket-preconnect href="https://cdnjs.com/" rel="preconnect">

<link crossorigin data-rocket-preconnect href="https://www.youtube.com" rel="preconnect">

Suppression automatique des domaines préconnectés

Les scénarios suivants déclencheront la suppression automatique des domaines externes préconnectés :

Lors du changement des permaliens, les domaines préconnectés de toutes les pages seront purgés.
Lors du changement de thème, les domaines préconnectés de tout le site seront supprimés.
Lors de la mise à jour d’un article, les domaines spécifiques à cet article seront supprimés. Cela ne s’applique pas aux domaines dans les pages associées.
Tous les domaines préconnectés du site seront purgés lorsqu’une des fonctionnalités suivantes est activée, désactivée ou que leurs exclusions ou paramètres sont modifiés :

Suppression manuel des domaines préconnectés

Lorsque vous apportez des modifications manuelles à vos pages en dehors de l’éditeur WordPress, vous devez supprimer manuellement les domaines préconnectés via le menu de la barre d’outils WP Rocket.

Pour supprimer les domaines préconnectés de l’ensemble de votre site, cliquez sur le menu WP Rocket puis sur Vider les éléments prioritaires.

Vous pouvez également effacer les domaines préconnectés d’un article spécifique en cliquant sur le bouton Vider les éléments prioritaires pour cet URL, qui s’affiche lorsque vous visitez la page en étant connecté·e, comme ceci :

Remarque : Ces actions supprimeront les domaines préconnectés ainsi que tous les autres Éléments prioritaires.

Ajouter des éléments HTML à cette optimisation

Vous pouvez utiliser le code suivant pour ajouter des éléments HTML à traiter par l’optimisation Préconnecter aux domaines externes :

add_filter( 'rocket_preconnect_external_domain_elements', function( $elements ) {
   $elements[] = 'img';
   return $elements;
});

Exclure des éléments de cette optimisation

Vous pouvez utiliser ce code pour exclure des éléments HTML de cette optimisation. Vous pouvez cibler les éléments en utilisant n’importe quel attribut ou valeur de la balise HTML :

add_filter( 'preconnect_external_domain_exclusions', function( $exclusion_patterns ) {
   $exclusion_patterns[] = 'async';
   return $exclusion_patterns;
});

Remplacer preconnect par prefetch

L’option Préconnecter aux domaines externes utilise par défaut l’attribut preconnect, car il est destiné à accélérer la connexion elle-même.

Mais si nécessaire, vous pouvez le remplacer par prefetch en utilisant le code suivant :

add_filter( 'rocket_preconnect_external_domains_use_prefetch', '__return_true' );

Voici comment ajouter des extraits de code à votre site.

Comment désactiver cette fonctionnalité

Si cette option cause des problèmes, vous pouvez la désactiver en installant et activant le plugin helper suivant :

📥 Télécharger (.zip) : WP Rocket | Disable Preconnect to external domains
Développeurs : vous pouvez consulter le code source de ce plugin sur GitHub.

Alternativement, vous pouvez ajouter ce snippet à votre site :

add_filter( 'rocket_preconnect_external_domains_optimization', '__return_false' );

Préchargement des requêtes DNS

Depuis la version 3.19, la fonctionnalité Préconnecter aux domaines externes de WP Rocket offre une méthode automatique et précise pour instruire le navigateur de se connecter à des origines externes. Elle remplace donc la fonctionnalité Préchargement des requêtes DNS, qui n’est plus disponible.

Dépannage et conflits connus

Veuillez consulter l’article sur les Éléments prioritaires pour plus d’informations sur le dépannage et les conflits connus.

Notes techniques

Les données collectées par cette fonctionnalité sont stockées dans la table wp_wpr_preconnect_external_domais.

Vous trouverez plus de détails techniques ici.