Une chaîne de requêtes critiques est une série de requêtes interdépendantes essentielles au chargement de la page. Elle suit le Critical Rendering Path, qui détermine l’ordre dans lequel les requêtes sont traitées et exécutées.
Les longues chaînes de requêtes critiques, en particulier celles qui incluent des ressources volumineuses, peuvent ralentir considérablement le chargement de votre page car elles bloquent le rendu. Réduire le nombre de ces chaînes diminue la latence et accélère le temps de chargement.
- Le chaînage des requêtes critiques peut entraîner un chargement plus lent et de moins bons temps de réponse sur votre site.
- Toutes les ressources vitales sont rendues dans l’ordre indiqué dans votre code HTML, ce qui peut retarder l’affichage initial du contenu sur l’écran des visiteurs en fonction de la taille des ressources et de la longueur de la chaîne.
Ce guide explore différentes méthodes pour éviter le chaînage des requêtes critiques sur votre site. Commençons par les bases.
Comment les chaînes de requêtes critiques affectent la vitesse du site
Au début du processus de chargement, le navigateur lit le HTML et gère les requêtes critiques selon leur priorité. Habituellement, le HTML est traité en premier, suivi du CSS, des images et du JavaScript.
De longues chaînes de ces requêtes critiques peuvent ralentir votre site en augmentant la latence et en prolongeant les temps de chargement. Le délai total correspond à la somme du temps nécessaire pour télécharger toutes les ressources de la plus longue chaîne de requêtes critiques.
- Vous pouvez améliorer les performances et l’expérience utilisateur en réduisant le nombre de ces ressources critiques.
- Cela peut se faire en retardant leur téléchargement, en les supprimant complètement ou en raccourcissant la longueur des chemins critiques.
Comprendre les requêtes critiques : la perspective Lighthouse
Une requête critique concerne toute ressource nécessaire au rendu de la page. Lighthouse définit une requête critique comme :
- Non préchargée
- Bloquante pour le rendu
- Déclarée avec une priorité moyenne, haute ou très haute.
Ces requêtes incluent souvent des éléments tels que le titre d’un article ou les images d’une bannière hero, censés apparaître immédiatement à l’écran du visiteur.
Analyse des requêtes critiques avec GTmetrix
GTmetrix décrit une requête critique comme :
- Bloquante pour le rendu
- Non préchargée
- Déclarée avec une priorité moyenne, haute ou très haute.
Lorsqu’au moins une telle chaîne existe, GTmetrix lance un audit. Il affiche ensuite la plus longue chaîne de requêtes critiques, en détaillant chaque requête et en indiquant la latence maximale du chemin critique.
Comment éviter le chaînage des requêtes critiques
Pour améliorer les performances de votre site en évitant le chaînage des requêtes, vous pouvez adopter la méthode du préchargement des requêtes vitales. Cette technique précise quels fichiers doivent être chargés tôt dans le processus de chargement, car ils sont essentiels au rendu de la partie visible de la page.
Voici comment la mettre en œuvre efficacement :
Note : Il est conseillé de sauvegarder votre site avant d’apporter des modifications. En cas de problème, vous pourrez rapidement restaurer votre site à son état précédent*. Vous pouvez utiliser WP Staging pour des sauvegardes automatiques simples. Consultez le guide de sauvegarde et restauration pour plus d’aide.*
Précharger les requêtes clés
Identifiez les ressources les plus critiques qui affectent le chargement de votre page. Il s’agit souvent des fichiers CSS, JavaScript, des polices et des images "above the fold".
Utilisez l’attribut rel= "preload" dans la section <head> du HTML pour indiquer au navigateur de charger ces ressources tôt. C’est essentiel pour des ressources comme le CSS et le JavaScript qui bloquent le rendu.
Spécifiez correctement le type de contenu préchargé via l’attribut as (par exemple as= "script" pour le JavaScript). Cela aide le navigateur à prioriser efficacement ces ressources.
Plan B : utiliser WP Rocket pour le préchargement
Si vous préférez une approche plus simple basée sur une extension, WP Rocket est un outil fortement recommandé pour automatiser le préchargement des requêtes vitales.
WP Rocket facilite le préchargement des polices et d’autres ressources critiques directement depuis votre domaine, garantissant que ces ressources soient chargées rapidement afin de réduire le blocage du rendu.
De plus, WP Rocket propose des fonctionnalités telles que l’optimisation de la livraison CSS, avec des options pour supprimer le CSS inutilisé et charger le CSS de façon asynchrone. Cela améliore encore les performances de votre site en réduisant l’impact du CSS bloquant le rendu.
Réduire le nombre de ressources critiques
Accélérez votre site en minimisant le CSS et le JavaScript essentiels nécessaires au contenu "above the fold". Optimisez le chargement en retardant le CSS et le JavaScript non critiques ou en les supprimant. Cette stratégie aide le navigateur à charger plus rapidement le contenu important en évitant les ressources inutiles comme le CSS et le JS non utilisés.
Pour réduire le nombre de ressources critiques sur votre site avec l’extension WP Rocket, suivez ces étapes afin d’activer des options d’optimisation spécifiques dans l’onglet "File Optimization" :
- Minify CSS Files : Cochez cette option pour compresser vos fichiers CSS en supprimant les espaces et les commentaires inutiles. Cela réduit la taille des fichiers et accélère le chargement.
- Optimize CSS Delivery : Sélectionnez cette option pour éliminer le CSS bloquant le rendu sur votre site, ce qui accélère le rendu des pages. Notez qu’une seule méthode peut être sélectionnée dans les réglages d’optimisation CSS.
- Minify JavaScript Files : Activez cette option pour compresser vos fichiers JavaScript en supprimant les espaces et les commentaires.
- Combine JavaScript Files : Si votre site n’utilise pas HTTP/2, envisagez de combiner les fichiers JavaScript internes et tiers pour réduire les requêtes HTTP.
- Load JavaScript Deferred : Cochez cette option pour différer le chargement des fichiers JavaScript après l’analyse du HTML, ce qui peut considérablement améliorer les temps de chargement.
Éviter le chaînage des requêtes avec ‘font-display‘
Pour éviter le chaînage des requêtes et améliorer les performances de votre site, vous pouvez utiliser la propriété font-display pour contrôler la façon dont les polices web s’affichent pendant le chargement. Voici les étapes et les valeurs à utiliser :
Définir les valeurs de font-display :
- Auto : Utilise la stratégie par défaut du navigateur.
- Block : Affiche un espace réservé invisible jusqu’à ce que la police soit chargée.
- Swap : Utilise une police de secours jusqu’à ce que la police web soit chargée, puis la remplace.
- Fallback : Masque brièvement le texte, puis utilise une police de secours jusqu’à ce que la police web soit chargée.
- Optional : Similaire à fallback, mais le navigateur peut décider de ne pas utiliser la police web.
Pour la plupart des navigateurs modernes, il est recommandé d’utiliser font-display: swap; car cela évite le Flash of Invisible Text (FOIT).
- Implémenter font-display : Ajoutez la propriété font-display à vos règles @font-face dans votre CSS :
@font-face {
font-family: 'Your Font';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}- Précharger les polices : Utilisez la balise
<link rel="preload">dans le<head>du HTML afin que les polices soient chargées tôt dans le processus de rendu :
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Précharger les polices avec WP Rocket
Charger les polices rapidement est important pour éviter les décalages de mise en page sur votre site. WP Rocket, une extension WordPress populaire, vous y aide. Voici comment précharger les polices :
Cliquez sur l’onglet « Preload » pour accéder aux réglages liés au préchargement des polices.
Faites défiler jusqu’à la section « Preload Fonts ». Collez les URL des polices que vous avez identifiées précédemment dans le champ prévu, en veillant à ce que chaque URL soit sur une nouvelle ligne. Cliquez ensuite sur le bouton « Save Changes ».
Précharger les polices avec WP Rocket aide votre site à se charger plus en douceur, réduit le CLS et améliore l’expérience utilisateur.
Résumé
- Comprendre et réduire l’impact du chaînage des requêtes critiques est essentiel pour améliorer les performances de votre site.
- Traiter ces problèmes peut augmenter considérablement les vitesses de chargement et offrir une expérience utilisateur plus fluide et plus réactive.
- Cela améliore non seulement la satisfaction des utilisateurs, mais influence aussi positivement le référencement SEO, rendant votre site plus favorable aux moteurs de recherche.
Articles connexes
- Comment corriger l’erreur WordPress « Sidebar Not Appearing »
- Pourquoi WordPress est lent + Comment y remédier
- Pourquoi la sauvegarde et la reprise après sinistre sont-elles nécessaires pour WordPress ?
- Comment réparer et optimiser la base de données WordPress
- Comment annuler des modifications dans WordPress (révisions, enregistrements automatiques, snapshots)
