La vitesse de chargement des pages est l’un des principaux critères pris en compte par l’algorithme de Google pour positionner les pages dans les SERPs. Google utilise les données de son propre outil, PageSpeed Insights, pour vérifier les performances en termes de vitesse d’un site web donné. Lors de l’audit de notre page web avec l’outil, Google montre certaines possibilités de travail qui peuvent améliorer la vitesse de la page jusqu’à un certain point.
L’un des problèmes les plus courants est celui du preload key request. Il s’agit de l’utilisation de la fonction preload pour les requêtes principales. Ce problème retarde le rendu de la page et fait attendre le visiteur. Nous allons voir de quelle manière nous pouvons résoudre cela afin de réduire le temps précieux qu’un visiteur doit attendre.
Qu’est-ce que le Preload ?
Le Preload est un moyen de dire au navigateur de demander une ressource avant que le navigateur n’en ressente le besoin. Par exemple, nous savons que notre site web va demander une certaine police à la fin du chargement de tous les fichiers HTML et JS, donc, au lieu d’attendre que cet instant arrive et de devoir patienter, nous commandons au navigateur de charger la police spéciale au début. De cette façon, lorsque les autres fichiers de la page web sont chargés, notre police préchargée est prête à être utilisée.
Cette demande de préchargement est utile car le système que vous utilisez ne contient que quelques polices et la page web peut contenir des polices d’écriture fantaisies. Par conséquent, le navigateur doit télécharger la police spéciale chaque fois que la page web est ouverte.
Quel est le problème du preload key request?
Le problème du preload key request est le résultat d’une utilisation excessive de cette méthode.
En vérifiant votre site avec PageSpeed Insights, vous pourriez rencontrer des problèmes comme celui de la capture d’écran ci-dessous.
Dans cet audit du site web, nous pouvons constater que notre page web se charge avec 0,52 seconde de retard en raison de ce problème. Pour certaines autres pages web, le retard peut facilement atteindre 7-8 secondes selon le type de police.
[Étude de cas] Gérer le crawl du robot de Google
Comment résoudre le problème du “Preload key request” dans WordPress
Modifier le fichier header.php de votre thème
Nous pouvons supprimer les erreurs et les convertir en opportunités en spécifiant l’URL affichée dans le rapport d’audit comme préchargée dans la section header de chaque page web. Une structure générale pour faire cela serait :
link rel=”preload” href=”Error Font URL” as=”font” crossorigin=”anonymous”
Cela doit être fait pour chaque lien qui apparaît dans le rapport sur la vitesse de page. Dans mon cas, il y en a 4. Après avoir préparé les liens, il est temps de les mettre à l’endroit où ils doivent se trouver, c’est-à-dire dans le fichier « header.php » du thème. Cela peut se faire de deux façons : manuellement ou à l’aide d’un plugin.
La méthode recommandée est celle du plugin. Sinon, vous devrez mettre à jour le fichier header manuellement chaque fois que le thème est mis à jour.
Installez le plugin nommé « Insert Headers and Footers » et collez ensuite les lignes de code dans la section header. Enregistrez le résultat. Il devrait ressembler à la capture d’écran ci-dessous :
Pour le faire manuellement, connectez-vous à votre FTP ou allez dans le gestionnaire de fichiers de votre fournisseur d’hébergement et naviguez jusqu’à « /wp-content/themes/themename/ » et localisez le fichier header.php. Éditez le fichier et collez les mêmes lignes de code avant la fonction wp_head() ;.
Les deux méthodes ci-dessus accompliront le même travail.
Après avoir enregistré les fichiers dans les deux cas, veillez à vider tout votre cache.
Retournez maintenant à PageSpeed Insights et vérifiez à nouveau votre score et vos opportunités. Magique !!! Plus de problèmes de ‘Preload key request’:
Utilisation de plugins de mise en cache
Une autre façon de le faire serait d’utiliser directement des plugins de mise en cache. Mais il convient de noter que tous les plugins de mise en cache ne prennent pas en charge les fonctionnalités de préchargement des requêtes. D’après mon expérience, seuls WP Rocket et Autoptimize le font.
Si vous utilisez WP Rocket, allez dans Paramètres -> WP Rocket -> Précharger et collez les mêmes URL que ci-dessus dans la section des polices de préchargement :
Si vous utilisez Autoptimize, ouvrez l’onglet Extra du panneau Autoptimize et allez à l’onglet Précharger les requêtes spécifiques et ajoutez-y les URLs ci-dessus :
Foire aux questions et suggestions
1. Dois-je vider mon cache après avoir modifié le fichier header.php dans WordPress ?
Oui. Assurez-vous que vous avez vidé votre cache du site web et du CDN en cas de problème.
2. Quelle est l’erreur la plus courante lors de l’ajout de code dans le header ?
Mettez le code dans le bon format. Vous pouvez vous référer à l’exemple fourni plus haut dans cet article.
3. Où doivent être placées les informations relatives à mon lien prerender ?
Veillez à copier et à coller le lien de preload dans la sectionde votre code pour chaque page. Dans la plupart des thèmes WordPress, il se trouve dans le fichier header.php.
Vérifiez également que les URL de vos polices sont collées dans les bons attributs et qu’il ne manque aucun guillemet.
4. Quelle est la différence entre preload, preconnect et prefetch ?
Il ne faut pas confondre preload et preconnect ou prefetch. Ces dernières techniques sont facultatives pour le navigateur et ne sont exécutées que si le navigateur en ressent le besoin, alors que le préchargement est obligatoire pour l’exécution du navigateur.
5. PageSpeed Insights est-il suffisant pour valider ma mise en œuvre ?
Non. Vérifiez toujours d’abord l’expérience de l’utilisateur plutôt que de vous contenter des résultats d’un audit de PageSpeed Insights. Si quelque chose dégrade les performances existantes, soyez prêt à revenir au point de contrôle précédent.
En conclusion
Ne chargez pas trop de ressources en utilisant la balise preload. Imaginez que nous accordions un traitement spécial à tout le monde, plus personne ne serait spécial. Si nous passons en accéléré chaque ressource mineure en utilisant le preload, alors les ressources majeures qui doivent être chargées dès que le navigateur le demande seraient chargées lentement. Par conséquent, l’impact sur nos performances serait beaucoup plus négatif. Pour cette raison, il suffit d’utiliser la preload request que Google pagespeed Insights vous suggère.
Enjoy the High Page Speed 🙂
