Implémentation de Preload, Prefetch, Preconnect dans WordPress

En tant que propriétaire d'un site web, l'idée d'un chargement rapide des pages est une priorité absolue. Qui ne voudrait pas que son site soit le plus réactif possible ?

Garantir un chargement rapide et constant à l'échelle mondiale est un défi constant. Plusieurs approches permettent d'optimiser la vitesse de chargement, notamment l'utilisation de "conseils de navigateur", aussi appelés techniques de pré-navigation.

Il est important de noter que ces techniques ont un impact limité lors de la première visite, mais les requêtes subséquentes bénéficient d'une accélération significative.

Préchargement

La balise de préchargement permet d'indiquer au navigateur qu'il doit anticiper la récupération de ressources statiques spécifiques, qu'il s'agisse d'images, de polices, de scripts JavaScript ou CSS, de vidéos, etc. En priorisant le chargement de ces éléments, on optimise les performances globales du site.

Le préchargement se révèle particulièrement utile lorsque vous anticipez que les utilisateurs visiteront plusieurs pages au sein de votre site, comme dans une boutique en ligne où l'utilisateur explore les produits, compare les options et procède à l'achat.

Plusieurs extensions (plugins) permettent de configurer cette fonctionnalité :

Better Resource Hints : un plugin gratuit pour gérer le préchargement de fichiers CSS et JS.

WP Rocket : un plugin premium pour l'optimisation complète des performances, avec de nombreuses fonctionnalités clés, comme la mise en cache et le préchargement du sitemap.

Comment vérifier si le préchargement est activé ?

Le moyen le plus rapide est d'inspecter le code source de la page. Voici un exemple de ce que vous devriez observer :

<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

Il est important de vérifier la matrice de compatibilité car le préchargement n'est pas supporté par tous les navigateurs.

Préconnexion

Votre site charge-t-il des ressources depuis des domaines externes, comme un CDN ? Si toutes vos ressources sont hébergées sur votre propre domaine, cette technique aura moins d'impact.

La préconnexion donne pour instruction au navigateur d'établir une connexion avec des domaines tiers en arrière-plan. Cela permet de gagner du temps lors de la recherche DNS, de la redirection, des négociations TCP et TLS, réduisant ainsi la latence lors du chargement de ressources externes.

Pour configurer la préconnexion, vous pouvez recourir au plugin Better Resource Hints ou à un outil premium comme Perfmatters.

Après la configuration, vous devriez voir ce type de ligne dans le code source :

<link rel="preconnect" href="https://ANOTHERSITE.com">

Notez que si des ressources sont chargées depuis un domaine nécessitant CORS, vous devez spécifier l'origine croisée de cette manière :

<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

La préconnexion est compatible avec les versions récentes de Chrome, Edge, Firefox et Safari.

Prélecture

La prélecture permet au navigateur de récupérer en amont des ressources pour la page que l'utilisateur est susceptible de visiter ensuite. Ces ressources sont mises en cache localement pour un chargement rapide en cas de besoin. On distingue deux types de prélecture.

Prélecture DNS, décrite ci-dessous.

Prélecture de liens : configurée avec la balise ``. Elle est employée pour précharger des ressources HTML ou statiques en utilisant l'attribut `as`. Voici un exemple :

Cet attribut accepte différents types de ressources comme audio, vidéo, script, style, police, document, etc. La prélecture de liens peut être configurée avec le plugin Pre Party Resource Hints.

Prélecture DNS

Si votre site charge des ressources depuis de multiples domaines, la prélecture DNS permet de résoudre ces noms de domaine en arrière-plan. Les demandes de ressources ultérieures se feront plus rapidement, diminuant la latence globale.

Supposons que la résolution DNS d'un domaine prend 100 ms et que vous utilisez 3 domaines : vous économiserez alors 300 ms de temps de latence.

Vous pouvez mettre en place cette fonctionnalité avec Perfmatters ou en ajoutant le code suivant au fichier `functions.php` de votre thème :

function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

Pour plus d'informations, consultez la documentation Mozilla.

Prérendu

Anticipez-vous le parcours de navigation de vos utilisateurs ? Le prérendu peut charger une page en arrière-plan afin que celle-ci soit instantanément disponible lorsqu'un utilisateur clique dessus. Cela peut être configuré avec le plugin Pre Party Resource Hints.

Le prérendu est adapté aux pages légères et spécifiques. Son utilisation sur un site entier ou pour des ressources lourdes peut engendrer une surcharge de processeur et une consommation de bande passante plus élevée. Commencez avec de petites ressources et surveillez les performances.

En résumé, quatre plugins permettent d'implémenter ces techniques de navigation dans WordPress. Choisissez ceux qui répondent le mieux à vos besoins.

Plugin Pre Party Resource Hints : un plugin gratuit qui offre les fonctionnalités DNS-prefetch, link prefetch, prerender, preconnect et preload.

Better Resource Hints : une alternative au plugin précédent.

Les plugins gratuits fonctionnent bien tant qu'ils sont maintenus et mis à jour. Or, ce n'est pas toujours le cas. C'est pourquoi les versions premium, avec un support professionnel et des mises à jour régulières, sont parfois un meilleur choix. Si vous êtes prêt à investir dans l'optimisation de votre site, envisagez les options suivantes :

WP Rocket : un outil de référence, utilisé par plus de 800 000 sites. Son prix est de 49 $ pour un site web.

Perfmatters : un plugin léger et facile à utiliser, au prix de 24,95 $ par site. Au moment de la rédaction de cet article, il offre les fonctionnalités suivantes :

C'est un investissement important pour l'optimisation de votre site.

En Conclusion

Le noyau de WordPress est léger, mais son poids peut augmenter avec le thème et les extensions. Optimiser les performances de votre site est crucial pour un bon référencement et une meilleure conversion. Les techniques présentées ici sont simples à mettre en place. Cependant, cela ne devrait pas être votre seule approche.

Un CDN (Content Delivery Network) est également à considérer pour mettre en cache et servir le contenu plus rapidement à vos utilisateurs, où qu'ils soient dans le monde. Parmi les nombreuses options, SUCURI est une solution intéressante car elle offre à la fois un CDN et des fonctionnalités de sécurité.