Implémentation du Preload, Prefetch, Preconnect dans WordPress

Profitez des fonctionnalités de navigateur modernes telles que le préchargement (Preload), la prélecture (Prefetch), la préconnexion (Preconnect) pour accélérer le site Web WordPress. En tant que propriétaire de site, qui n’aime pas faire tout son possible pour charger la page Web plus rapidement?

Il est difficile de garantir un chargement plus rapide du site dans le monde entier. Il y a plusieurs choses que vous pouvez faire pour charger rapidement les ressources du site, y compris l’activation des conseils de navigateur suivants. Ils sont également appelés techniques de pré-navigation .

Remarque : les techniques d’indices de navigation ne sont pas très utiles lorsque vous accédez au site Web pour la première fois, mais les demandes suivantes sont plus rapides.

Techniques d’indication du navigateur

• Preload
• Preconnect
• Prefetch
• DNS Prefetch
• Prerender

Preload (Précharge)

Vous pouvez utiliser la balise de preload pour indiquer au navigateur de récupérer rapidement certaines des ressources statiques. Ils peuvent être une image, une police, JavaScript, CSS, des scripts, une vidéo, etc. Cela permet de hiérarchiser le chargement des ressources; par conséquent, les performances sont améliorées.

Le Preload serait une bonne idée à mettre en œuvre si vous vous attendez à ce que vos utilisateurs visitent plusieurs pages par la suite. Comme la boutique de commerce électronique où l’utilisateur visite la page du produit, puis vérifie les informations, compare avec d’autres produits, ajoute au panier, paie, etc.

Vous pouvez utiliser les plugins suivants pour configurer la fonction de préchargement.

Meilleures astuces de ressources – un plugin gratuit pour configurer les fichiers CSS et JS.

Better resource hints un plugin gratuit pour configurer les fichiers CSS et JS.

Comment savoir si le préchargement est activé?

Le moyen le plus rapide de le découvrir est de consulter la source de la page. Vous devriez voir quelque chose comme ci-dessous.

<link rel="preload" as="style" href="IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

Vérifiez les navigateur qui prennent on charge le Preload via ce lien avant la mise en œuvre.

Preconnect

Chargez-vous des ressources d’un autre domaine? Peut-être CDN?

Si ce n’est pas le cas, et que chaque ressource est chargée à partir de votre domaine unique, cela peut ne pas être utile.

Preconnect indique au navigateur d’établir une connexion à un autre domaine en arrière-plan pour gagner du temps pour la recherche DNS , la redirection, la négociation TCP, la négociation TLS, etc. L’idée est de réduire la latence pour fournir un chargement rapide des ressources à partir d’un autre domaine.

Vous pouvez indiquer au navigateur les liens à mettre en Preconnect, par exemple on va mettre google analytics et fonts. gstatics et onesignal en Preconnect  :

<link rel='preconnect' href='//fonts.gstatic.com' >
<link rel='preconnect' href='//onesignal.com' >
<link rel='preconnect' href='//www.google-analytics.com' >

Ajouter ce code dans le Header de votre site.

Preconnect est compatible avec la dernière version de Chrome, Edge, Firefox, Safari.

Prefetch

Laissez le navigateur récupérer la page suivante qui, selon vous, sera nécessaire lorsque l’utilisateur naviguera.

Prefetch téléchargera les ressources nécessaires et les stockera dans le cache local et les servira rapidement en cas de besoin. Il existe deux types de Prefetch (prélecture).

Prefetch DNS – expliqué ci-dessous

Lien Prefetch – configuré à l’aide de. Utilisé pour pré-extraire les ressources HTML ou statiques. Vous pouvez extraire des ressources en utilisant « as » attribut.

<link rel="prefetch" href="https://wpcours.com/seo/page/2/" as="document">

« as » attribut prend en charge diverses ressources comme l’audio, la vidéo, le script, la piste, le style, la police, l’objet, le document, etc. Lien Prefetch peut être configurée à l’aide du plugin Pre Party Resource Hints .

Prefetch DNS

Vous chargez des ressources de nombreux domaines et souhaitez les résoudre en arrière-plan?

Cette configuration rapide peut aider à résoudre tous les domaines potentiels plus tôt, donc lorsque des ressources sont demandées, elle se charge plus rapidement. Cela permet de réduire la latence globale.

Supposons que vous chargez des ressources à partir de 3 domaines et que chaque domaine prenne environ 100 ms pour effectuer une recherche DNS, vous économiserez alors une latence de 300 ms.

Vous pouvez implémenter ce qui suit dans le fichier functions.php de votre thème .

//* DNS Prefetching
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);

Voici quelques domaine à mettre en Prefetch :

//pagead2.googlesyndication.com
//fonts.gstatic.com
//googleads.g.doubleclick.net
//tpc.googlesyndication.com
//ad.doubleclick.net
//stats.g.doubleclick.net
//cm.g.doubleclick.net
//www.googleadservices.com 

Vous pouvez en savoir plus sur Mozilla web docs.

Prerender

Vous attendez-vous à ce que les utilisateurs de votre site naviguent sur la page potentielle?

Prerender peut aider à charger ces actifs en arrière-plan, et lorsque l’utilisateur clique dessus, ils l’obtiennent très rapidement. Vous pouvez y parvenir avec le plugin Pre Party Resource Hints.

La préconfiguration convient à une page ou un élément léger, mais soyez prudent avec l’ensemble du site ou des ressources importantes, car cela peut augmenter l’utilisation du processeur et la bande passante et ralentir le site. Donc, essayez avec la plus petite ressource et testez-la pour vous assurer qu’elle n’a pas d’effets secondaires.

Comme vous pouvez le voir, quatre plugins principaux sont impliqués pour implémenter les conseils de navigateur dans WordPress. Choisissez celui que vous aimez et répondez à l’exigence.

Plugin Pre Party Resource Hints – un plugin gratuit propose la DNS-prefetch, link prefetch, prerender, preconnect, et preload..

Better resource hints – une alternative à celle ci-dessus.

Conclusion

WordPress est léger, mais il devient volumineux selon le thème et les plugins que vous utilisez. Et, il est essentiel d’optimiser les performances de votre site . Les techniques ci-dessus sont faciles à suivre, mais vous ne devriez pas vous arrêter là.

Vous devez également envisager d’utiliser un CDN pour mettre en cache et fournir du contenu plus rapidement à vos utilisateurs, dans le monde entier.