Comment précharger les demandes de clé dans WordPress

L'utilisation de polices Web, CSS et JavaScript peut rendre votre site Web plus unique et interactif. Mais attendre que ces types de fichiers se chargent peut être frustrant pour les visiteurs de votre site.

C'est là que le préchargement des demandes de clé dans WordPress peut s'avérer utile. En indiquant aux navigateurs de télécharger ces types de fichiers plus tôt dans la chaîne de requête, ils seront disponibles lorsque le navigateur sera prêt à afficher le contenu. À son tour, cela peut accélérer le temps de chargement de votre page et offrir une meilleure expérience Web globale.

Dans le guide d'aujourd'hui, nous discuterons de ce que signifie le préchargement des demandes de clé, ainsi que des avantages potentiels en termes de performances pour votre site Web. Ensuite, nous vous expliquerons comment procéder sur votre site WordPress avec Google Fonts, Font Awesome, CSS et JavaScript.

Que signifie « précharger les demandes de clé » dans WordPress ?

Lorsqu'une personne visite votre site Web, son navigateur envoie plusieurs requêtes HTTP au serveur de votre site, lui demandant les fichiers qui composent votre contenu. Le serveur prendra un certain temps pour commencer à répondre à ces demandes et à envoyer des informations au navigateur, ce qui est appelé le Time to First Byte (TTFB).

Ensuite, le navigateur commencera à télécharger du contenu (PHP, JavaScript et CSS) à partir des fichiers de votre site et à le rendre pour afficher des pages visibles (HTML) sur le front-end. Une fois ce processus terminé, le visiteur peut voir votre page Web entièrement chargée.

Un navigateur utilisera une "chaîne de requêtes" pour demander et restituer le contenu dans une séquence. Cela signifie qu'il y a plusieurs étapes de demandes plus petites dans les plus grandes, le résultat final étant qu'un visiteur peut voir le contenu de votre site.

Essentiellement, le "préchargement" signifie dire au navigateur d'un utilisateur de télécharger d'abord les fichiers essentiels au lieu d'attendre la fin du processus de chargement. Il s'agit généralement de polices (en particulier de polices Web), de CSS, de JavaScript et parfois d'images.

Les demandes de clé sont uniques, car votre navigateur ne demande généralement ces fichiers que plus tard dans le processus de chargement. Ainsi, il y aura un délai lorsque le navigateur arrivera à ce point et découvrira qu'il doit demander les fichiers. En disant au navigateur de charger ces fichiers en premier, il les aura à portée de main lorsqu'il aura besoin de les afficher.

Quels sont les avantages du préchargement des demandes de clé ?

Le principal avantage du préchargement des requêtes clés est l'amélioration des performances perçues de votre site. Cela signifie que le navigateur d'un utilisateur peut afficher votre contenu plus rapidement et que les visiteurs auront l'impression que votre site est plus rapide. Mais, votre site ne fait que précharger le contenu essentiel pour le faire apparaître de cette façon.

De plus, le préchargement des requêtes est essentiel pour vos scores Core Web Vitals. Ces métriques Google mesurent les performances de chargement, l'interactivité et la stabilité visuelle de votre site, vous donnant un score qui signifie la convivialité globale de votre site Web.

Ce sont les trois Core Web Vitals :

• Largest Contentful Paint (LCP) : temps nécessaire au chargement du plus grand élément de votre page.
• Premier délai d'entrée (FID) : temps nécessaire au navigateur pour répondre à l'interaction de l'utilisateur avec votre contenu.
• Cumulative Layout Shift (CLS) : De combien les éléments se déplacent pendant le chargement de la page.

En particulier, le préchargement des demandes de clé peut avoir un impact significatif sur votre score LCP. En préchargeant des images, des polices et d'autres fichiers volumineux, vous pourrez réduire le temps nécessaire à leur rendu.

De plus, le préchargement peut affecter votre score First Contentful Paint (FCP). Cette métrique mesure le temps qu'il faut pour que le premier élément HTML de votre page s'affiche. Si vous pouvez précharger cet élément, le navigateur pourra afficher plus rapidement les parties initiales de votre contenu.

De plus, les moteurs de recherche, comme Google, privilégient les contenus à chargement rapide et interactifs. Par conséquent, au-delà de fournir une meilleure expérience utilisateur, l'amélioration de ces mesures de performance peut stimuler l'optimisation de votre site Web pour les moteurs de recherche (SEO).

Essentiellement, les améliorations de performances peuvent aider à faire monter les pages de votre site dans le classement et à présenter votre contenu à davantage d'utilisateurs. De plus, le préchargement des demandes de clé est relativement facile. Plus loin dans cet article, nous vous montrerons exactement comment le faire !

Y a-t-il des inconvénients à précharger les demandes de clé ?

Le préchargement des requêtes peut sembler une excellente idée du point de vue des performances. Cela étant dit, essayer de précharger trop d'éléments peut jouer contre vous.

Un navigateur ne peut traiter qu'un nombre limité de requêtes à la fois. Ainsi, si vous lui dites de précharger plusieurs éléments, cela pourrait créer un « goulot d'étranglement » qui fonctionne contre le temps de chargement des pages de votre site.

Par conséquent, il vaut la peine de choisir avec soin les éléments à précharger pour le plus grand impact. Dans la plupart des cas, il s'agira de polices Web, CSS et JavaScript, car ce sont généralement les fichiers les plus lourds.

Comment vérifier si votre site précharge les demandes de clé

Quelques outils différents peuvent identifier si votre site précharge des requêtes et suggérer des éléments qui pourraient bénéficier de cette technique d'optimisation. Par exemple, PageSpeed ​​Insights est l'une des options les plus populaires pour identifier les problèmes de performances sur votre site Web.

Pour utiliser cet outil gratuit, entrez simplement l'URL de votre site et cliquez sur Analyser . Cela générera un rapport de performance détaillé.

Faites défiler vers le bas pour voir les opportunités de performances, les diagnostics et les audits réussis. Vous devriez pouvoir trouver la suggestion de demande de clé de préchargement dans l'une de ces sections.

Si vous préférez ne pas naviguer entre votre site et PageSpeed ​​Insights, envisagez d'installer l'extension Google Lighthouse Chrome. Il vous permet de générer des rapports à partir du navigateur et d'afficher les mesures de performance d'une page.

De même, GTMetrix peut générer des rapports de performances détaillés pour n'importe quel site. Il vous permet d'analyser des pages à partir de plusieurs emplacements et de suivre leurs performances au fil du temps.

Sous l'onglet Structure de GTMetrix, vous pourrez voir si le préchargement des demandes de clé peut améliorer les performances de votre site.

Comment précharger les demandes de clé dans WordPress

Avant d'apporter des modifications importantes à votre site WordPress, comme l'ajout de code personnalisé, il vaut toujours la peine de faire une sauvegarde complète. Cette précaution de sécurité signifie que vous aurez une version fonctionnelle de votre site Web à portée de main si vous faites des erreurs.

C'est là que Jetpack VaultPress Backup est utile. Ce plugin convivial crée automatiquement des sauvegardes complètes de toutes vos données, y compris ses fichiers, tables de base de données et informations sur les produits WooCommerce. Ces sauvegardes sont enregistrées en temps réel et stockées en toute sécurité dans le cloud. Vous pouvez les restaurer en quelques clics, même si vous êtes en déplacement ou si vous ne pouvez pas du tout accéder à votre site.

1. Polices

Parfois, les polices peuvent être enterrées dans d'autres fichiers sur votre site Web, y compris les fichiers CSS et JavaScript. Malheureusement, cela peut ralentir le processus de rendu de la page.

Pour précharger les requêtes avec des polices dans WordPress, copiez et collez ce code dans la section <head> de votre page :

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

N'oubliez pas de remplacer "Font-Name" par le nom de votre police. De plus, inclure "crossorigin" est essentiel si votre police provient d'une source tierce car elle indique au navigateur qu'il doit charger le fichier à partir d'un serveur externe.

2. Polices Google

Google Fonts comprend une bibliothèque open source de près de 1500 familles de polices. Si vous recherchez des polices Web personnalisées à utiliser sur votre site, vous pouvez probablement en trouver une ici.

L'utilisation de Google Fonts peut aider à apporter un design unique à votre site, mais le navigateur doit également télécharger les fichiers de police lors du rendu du contenu. Selon votre police, cela peut augmenter le temps de chargement de votre page.

Lors du préchargement des polices Google, il est également judicieux de les "préconnecter" en premier. Cette étape indique à l'avance au navigateur qu'il devra se connecter à un site tiers (par exemple, Google Fonts) pour récupérer une ressource.

De plus, après avoir ajouté votre code de préchargement, il vaut la peine d'inclure un lien vers sa feuille de style. De cette façon, si le navigateur de votre utilisateur n'est pas en mesure de précharger la police en question, il pourra toujours la restituer.

Ajoutez simplement le code suivant dans la section <head> de votre page :

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

Dans votre code, vous devrez remplacer "$ fontURL" par un lien vers votre police Google. Par exemple, cela pourrait ressembler à ceci :

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Ensuite, assurez-vous simplement de sauvegarder vos modifications !

3. Police géniale

Font Awesome est une excellente ressource pour les icônes et les polices personnalisées, avec des options gratuites et premium dans sa bibliothèque. Vous pouvez utiliser certaines de ces icônes pour optimiser la conception de vos menus, en-têtes, pieds de page et zones de contenu.

Comme Google Fonts, le préchargement des icônes Font Awesome peut être une bonne idée pour accélérer le temps de chargement perçu de la page. Ajoutez simplement ce code à la section <head> de la page :

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Vous devrez échanger le chemin du fichier pour la police ou l'icône que vous utilisez sur votre site Web. Ensuite, enregistrez vos modifications !

4. CSS

Les feuilles de style en cascade (CSS) sont un langage de conception qui fonctionne avec HTML pour déterminer le style et la présentation d'une page Web. Avec le CSS personnalisé, vous pouvez rapidement modifier l'apparence de différents éléments.

Chaque page HTML stylisée de votre site Web aura une feuille de style correspondante avec tous vos CSS. Un navigateur doit charger ce fichier lors du rendu d'une page Web, il est donc utile de dire au navigateur qu'il doit précharger cette ressource.

Heureusement, il existe un moyen simple de précharger CSS. Ajoutez simplement ce code à la section <head> de votre page :

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

Assurez-vous de remplacer « styles.css » par le nom de la feuille de style. De plus, gardez à l'esprit que même si ce code fonctionnera dans Google Chrome, il n'est pas pris en charge par tous les navigateurs.

5. JavaScript

JavaScript est un autre des langages de script couramment utilisés dans WordPress. Il vous permet de créer du contenu dynamique comme des animations, des carrousels d'images en mouvement et des flux de mise à jour automatique.

Le rendu de JavaScript est généralement plus complexe car ses fichiers sont relativement lourds, nécessitant un processus plus long pour afficher le contenu. C'est pourquoi dire à un navigateur de précharger du JavaScript lourd peut être bénéfique pour accélérer le temps de chargement de la page.

Comme avec CSS, il vous suffira d'ajouter cette simple ligne de code à la section <head> de la page :

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Comme précédemment, remplacez « ui.js » par le nom du fichier JavaScript et enregistrez vos modifications.

Bonus : installez un plugin gratuit pour améliorer Core Web Vitals

Le préchargement des demandes n'est qu'une technique que vous pouvez utiliser pour améliorer les scores Core Web Vitals de votre site WordPress.

Si vous recherchez une solution plus complète (et gratuite !), pensez à installer Jetpack Boost. Cet outil est développé par Automattic, la même société derrière WordPress.com.

Ce plugin convivial analyse l'intégralité de votre site Web et vous donne un score sur les ordinateurs de bureau et les appareils mobiles. De plus, Jetpack Boost n'est pas seulement utile pour les trois Core Web Vitals. Ses méthodes d'optimisation peuvent améliorer d'autres mesures, notamment le temps d'interaction (TTI) et le temps de blocage total (TBT).

Vous pourrez utiliser un système de basculement simple pour optimiser le chargement CSS, différer le JavaScript non essentiel et charger les images paresseusement. La version premium du plugin générera également automatiquement des CSS critiques chaque fois que vous apporterez des modifications à votre site Web.

Alternativement, Jetpack Complete peut amener votre site WordPress à un tout autre niveau. Ce plan contient plusieurs outils de performance, y compris l'accès au réseau de diffusion de contenu d'image (CDN) de Jetpack, qui peut à la fois économiser de la bande passante et améliorer le temps de chargement de votre page. De plus, vous obtiendrez des outils de sécurité et de croissance WordPress avancés.

Foire aux questions sur le préchargement des demandes de clé

À ce stade, vous devriez avoir une bonne compréhension de la façon de précharger les demandes de clé dans WordPress. Néanmoins, nous passerons en revue certaines questions fréquemment posées juste pour être sûr!

Le préchargement des requêtes améliore-t-il l'expérience utilisateur ?

Les demandes de préchargement peuvent améliorer l'expérience utilisateur en réduisant les temps de chargement perçus de votre site. Étant donné que les visiteurs n'auront pas à attendre aussi longtemps que votre contenu s'affiche, ils seront moins susceptibles de se sentir frustrés et de quitter votre site Web pour un autre.

Le préchargement des requêtes améliore-t-il Core Web Vitals ?

Le préchargement des demandes de clé dans WordPress peut améliorer vos scores Core Web Vitals, en particulier en ce qui concerne le Largest Contentful Paint (LCP). En fait, lorsque vous décidez des éléments à précharger, il serait sage d'inclure votre contenu « le plus important » ou « principal », car c'est ce qui en bénéficierait probablement le plus.

Précharger les demandes de clé par rapport aux ressources critiques de préchargement

Il convient de noter que le préchargement des demandes de clé signifie la même chose que le préchargement des actifs critiques. Les deux termes font référence à dire à un navigateur de charger des ressources particulières à l'avance pour afficher le contenu d'une page plus rapidement.

Préchargement vs préconnexion vs prélecture

Le préchargement, la préconnexion et la prélecture peuvent sembler être des concepts similaires, mais ils signifient en fait des choses légèrement différentes. Ce sont toutes des balises qui indiquent à un navigateur dans quel ordre charger le contenu, mais elles remplissent des fonctions distinctes.

Premièrement, le préchargement implique le chargement du contenu nécessaire pour afficher la page dans le navigateur d'un utilisateur. Il s'agit d'une balise de haute priorité qui préparera une ressource en quelques secondes.

En revanche, la prélecture concerne les éléments ultérieurs qui pourraient devoir être chargés. Le navigateur recherchera des ressources à l'avance et les stockera dans son cache. Il s'agit d'une balise de très faible priorité, vous ne devez donc pas l'utiliser pour des ressources urgentes.

Enfin, la pré-connexion est utilisée lorsque vous souhaitez indiquer à un navigateur de se connecter à un domaine particulier. Si votre site utilise une ressource d'un site tiers spécifique (comme Google Fonts), la préconnexion indique au navigateur qu'il devra se connecter à ce domaine à un moment donné du processus de chargement.

Que puis-je faire d'autre pour améliorer les performances de mon site ?

Diverses tâches peuvent aider à améliorer les performances de votre site WordPress, notamment :

• Utiliser un CDN pour diffuser votre contenu aux visiteurs du monde entier
• Différer (ou supprimer) les CSS inutilisés
• Élimination des ressources bloquant le rendu
• Minification CSS et autres ressources
• Faire moins de requêtes HTTP

Il vaut également la peine de choisir un hébergeur WordPress de haute qualité qui vous fournira des fonctionnalités d'optimisation des performances telles que la mise en cache dédiée, une garantie de disponibilité et un vaste réseau de centres de données dans le monde entier.

Améliorez les performances de votre site WordPress en préchargeant les requêtes clés

Les temps de chargement des pages peuvent avoir un impact significatif sur l'expérience utilisateur de votre site Web et le classement des moteurs de recherche. Vous voudrez donc faire tout ce qui est en votre pouvoir pour accélérer le temps nécessaire à un navigateur pour afficher le contenu de votre site.

Lorsque vous préchargez des demandes de clé dans vos pages, le navigateur d'un visiteur dispose de ressources (comme les polices, CSS et JavaScript) à portée de main. Ensuite, il n'y aura pas de retard lors du chargement de votre contenu et de sa mise à disposition des utilisateurs.

Le préchargement des demandes de clé n'est qu'une étape vers l'amélioration des performances de votre site. À l'aide de Jetpack Boost, vous pouvez facilement configurer votre site Web pour charger paresseusement les images, différer le JavaScript non essentiel, etc. Mieux encore, le plugin est gratuit. Découvrez Jetpack Boost aujourd'hui !