Dans le paysage numérique concurrentiel d’aujourd’hui, la vitesse du site Web compte beaucoup pour le succès d’une entreprise en ligne. Les géants des moteurs de recherche comme Google donnent la priorité aux sites à chargement rapide, reconnaissant la nécessité de fournir une expérience utilisateur transparente.
Selon des études, des chargements de page plus rapides augmentent l’engagement des utilisateurs et les taux de conversion. En fait, un délai d’une seconde dans le temps nécessaire au chargement d’une page peut entraîner une baisse de 7 % des conversions des clients. Compte tenu de cela, il est évident que les propriétaires de sites Web doivent accorder une grande importance aux performances du site Web.
Google prend au sérieux les performances du site Web et en tient compte lors de la détermination des résultats de recherche. Par conséquent, les sites Web qui se chargent rapidement sont plus susceptibles d’apparaître en premier dans les résultats de recherche, attirant plus de visiteurs et, éventuellement, générant plus de revenus. Mais comment pouvez-vous répondre aux exigences de Google et charger votre site Web rapidement ?
Vous vous débarrassez des ressources susceptibles de bloquer le temps de chargement d’un site Web, telles que les fichiers CSS et JavaScript.
Cependant, la suppression de ces ressources peut être difficile et prendre du temps, en particulier pour les personnes manquant de compétences techniques.
Dans cet article, nous expliquerons les ressources bloquant le rendu et leur impact sur les performances du site Web et fournirons un guide étape par étape pour les éliminer de votre site WordPress. Alors, commençons à optimiser votre site Web pour plus de rapidité et de succès !
Table des matières
Ressources de blocage de rendu
Toute ressource qui doit être chargée avant qu’une page Web puisse être affichée est considérée comme une ressource bloquant le rendu. Ces ressources influencent les performances et l’efficacité d’un site Web et prolongent le temps nécessaire au chargement d’une page.
Un fichier CSS ou JavaScript peut être considéré comme une ressource bloquant le rendu si ce fichier bloque le rendu d’une page Web. Cependant, l’importance du chargement de la page peut varier en fonction de leur nécessité immédiate.
Lorsqu’un utilisateur accède à une page, le navigateur traite d’abord le code HTML pour afficher son contenu au-dessus de la ligne de flottaison. Lorsque le navigateur rencontre des fichiers CSS et JavaScript, il les télécharge et les traite également. Si les fichiers de ressources contiennent des codes supplémentaires ou des parties inutilisées, le chargement de la page Web prend plus de temps.
Types de ressources de blocage de rendu
Généralement, les fichiers de ressources tels que CSS et JavaScript sont considérés comme des ressources bloquant le rendu dans WordPress. Le navigateur considère ces ressources comme critiques et nécessite un chargement avant que la page puisse être affichée. Mais ce n’est pas ça; il y a plus de fichiers de ressources qui bloquent le rendu d’une page Web.
Voici une liste de ressources bloquant le rendu :
Feuilles de style CSS
La conception et la présentation d’une page Web sont déterminées par les feuilles de style CSS. Un fichier CSS sera considéré comme une ressource bloquant le rendu s’il est placé dans la section
d’une page HTML.Fichiers JavaScript dans la section
JavaScript est un langage de script qui peut être utilisé pour fournir à une page Web un comportement et une interaction dynamiques. Un fichier JavaScript sera considéré comme une ressource bloquant le rendu s’il est placé dans la section
d’une page HTML.Polices
Les textes d’une page Web sont affichés à l’aide de différentes polices. Les polices sont également considérées comme une ressource bloquant le rendu si elles sont incluses dans la section
d’une page HTML et chargées à partir d’un serveur local ou d’un CDN.Importations HTML
Il s’agit de l’ancienne fonctionnalité HTML qui permet aux pages Web d’inclure des éléments d’autres documents HTML. Même si les importations HTML ne sont plus utilisées aussi souvent, elles peuvent toujours être vues sur certains sites plus anciens. Les importations HTML sont également considérées comme des ressources bloquant le rendu.
Pourquoi les ressources bloquant le rendu sont-elles terribles pour les pages Web
Si votre site WordPress comprend des ressources bloquant le rendu, vous prendrez du retard dans les résultats de recherche. Même si vous êtes actuellement en première ligne, les sites les plus performants finiront par vous dominer.
Les sites avec des ressources bloquant le rendu chargeront des fichiers supplémentaires lors du rendu du site. Avant de voir le site Web, les utilisateurs doivent attendre que les fichiers soient traités. Les indicateurs de performance suivants pour les sites Web seront impactés par ces ressources :
- La plus grande peinture de contenu : cela détermine le temps qu’il faudrait pour charger le contenu principal de la page.
- First Contentful Paint : Le temps qu’il faut à un navigateur pour produire le premier contenu de modèle d’objet de document (DOM) sur votre site Web.
- Temps de blocage total : Cela évalue le temps qu’il faut entre le Frist Contentful Pianto et le temps qu’il faut pour qu’une page devienne entièrement interactive.
Bien que les ressources bloquant le rendu ne soient pas nécessaires pour le chargement, elles peuvent entraver le rendu d’un site Web ou d’une page Web. Par conséquent, il est essentiel de supprimer ces ressources pour éviter de compliquer la navigation des utilisateurs sur votre site Web.
Examinons de plus près pourquoi le blocage du rendu est un problème sérieux pour les pages Web :
Temps de chargement de page lent
Les ressources bloquant le rendu ralentiront le chargement du site Web, ce qui est l’un de ses principaux inconvénients. Une page Web se charge lentement lorsqu’elle contient des fichiers de ressources avec des éléments inutiles. Par conséquent, cela affectera l’apparence des résultats de recherche, réduira l’engagement des utilisateurs et augmentera le taux de rebond.
Rendu bloqué
Souvent, un navigateur arrête de rendre une page Web lorsqu’il rencontre des ressources bloquant le rendu, car il souhaite que les ressources bloquant le rendu soient récupérées et traitées.
En fin de compte, les utilisateurs seront agacés et quitteront votre site en raison de l’absence de réponse de la page ou d’un rendu lent.
De plus, si une ressource se charge lentement, le navigateur peut également abandonner et arrêter de tenter de la charger. Cela peut entraîner des pages cassées ou des informations manquantes.
Diminution de l’engagement des utilisateurs
Lorsque des retards de rendu se produisent, l’expérience utilisateur s’en ressent. Les utilisateurs s’attendent toujours à des temps de chargement rapides et quittent généralement un site à chargement lent. Ainsi, ils se retrouvent sur un site qui se charge plus rapidement.
Les sites à chargement lent ont un effet néfaste sur la satisfaction des consommateurs et la réputation de la marque. Avec cela, le trafic du site Web et le taux de conversion diminuent également considérablement.
Il existe différentes approches pour supprimer les ressources bloquant le rendu de WordPress. Cependant, nous vous présenterons des méthodes manuelles pour éliminer les ressources bloquant le rendu. Ensuite, nous montrerons comment vous pouvez le faire en utilisant certains des plugins renommés de WordPress.
Éliminer manuellement les ressources bloquant le rendu
Vous pouvez éviter de le faire manuellement, alors ne soyez pas frustré. Mais parcourir cette section vous aidera sûrement à apprendre certaines techniques d’optimisation des performances de WordPress. Mais d’abord, regardez cette vidéo pour vous familiariser avec les termes discutés.
#1. Identifier les ressources bloquant le rendu
Vous devez d’abord découvrir les ressources bloquant le rendu avant de les supprimer de votre site Web. Suivez simplement ces étapes pour découvrir les ressources bloquant le rendu sur votre site WordPress :
- Accédez à Google PageSpeed Insights.
- Entrez l’URL de votre site dans la barre de recherche.
- Cliquez sur le bouton « Analyser » pour obtenir des informations sur votre site Web.
- Faites défiler vers le bas et consultez la section Opportunités.
- Si votre page contient des ressources bloquant le rendu, elles seront répertoriées.
#2. Utilisation des attributs « Defer » et « Async » pour JS
Après avoir identifié les ressources bloquant le rendu, il est temps de les éliminer pour de meilleures performances du site Web. À partir de diverses méthodes, l’utilisation de la méthode « différer » ou « asynchrone » pour les fichiers JavaScript est une approche pour y parvenir.
En ce qui concerne l’attribut « différer », il permet au navigateur de télécharger le fichier JS, puis de l’exécuter. Mais cela se produit lorsque la page a fini de se charger et est prête à afficher son contenu.
Ainsi, le reste des éléments de la page peut se charger en parallèle avec le fichier JavaScript. En conséquence, le temps nécessaire pour charger la page diminue.
Une autre approche est l’attribut « async » qui permet au navigateur de télécharger le fichier JS chaque fois qu’il est disponible. Cela se produit sans bloquer aucun autre élément de la page. Par conséquent, le fichier JS peut se charger en parallèle avec d’autres éléments, ce qui accélère le processus de chargement.
Vous pouvez vous débarrasser des ressources bloquant le rendu et augmenter la vitesse de votre site Web en utilisant l’attribut « différer » ou « asynchrone ».
#3. Utilisation de l’attribut « Media » pour le CSS conditionnel
L’utilisation des attributs « media » pour le CSS conditionnel est une autre approche pour éliminer les ressources bloquant le rendu. Avec cet attribut, vous pouvez définir des fichiers CSS uniques pour les navigateurs de bureau et mobiles.
Par exemple, vous pouvez inclure un fichier CSS dédié aux appareils de bureau et un autre fichier CSS adapté aux appareils mobiles. Vous pouvez indiquer au navigateur que le fichier CSS du bureau sera chargé lors de l’accès via un périphérique de bureau.
De même, le CSS mobile ne doit être chargé que lorsqu’il est accessible via des appareils mobiles. En chargeant le CSS spécifique à l’appareil pour les appareils désignés, vous pouvez réduire les ressources bloquant le rendu et augmenter le temps de chargement de votre site.
#4. Différer les CSS non critiques
En plus d’utiliser l’attribut « media » pour le CSS conditionnel, essayez de différer le CSS non critique. Pour cette approche, vous devez charger principalement le CSS essentiel. Ensuite, vous chargez le reste du CSS au fur et à mesure que la page se charge.
Par exemple, vous pouvez avoir un énorme fichier CSS qui inclut tous les styles de votre site Web. Mais seule une petite partie de ce fichier CSS est nécessaire pour afficher le contenu dans la région au-dessus de la ligne de flottaison de votre site. Le contenu au-dessus de la ligne de flottaison peut être affiché rapidement en retardant le CSS non critique, et le CSS restant peut être chargé lors du chargement de la page.
#5. Suppression des CSS et JS inutilisés
La suppression des fichiers CSS et JavaScript inutiles est une autre technique pour supprimer les ressources bloquant le rendu. Ces fichiers peuvent alourdir votre page et augmenter le temps de chargement.
En supprimant tous les fichiers CSS et JS inutilisés, vous pouvez réduire le nombre de ressources bloquant le rendu. Vous pouvez facilement utiliser des outils tels que PurifyCSS ou UnusedCSS pour supprimer tout fichier CSS inutilisé de votre site Web.
#6. Chargement local de polices personnalisées
Les polices personnalisées peuvent également inclure des ressources qui limitent le rendu. Au lieu de dépendre de sources externes telles que Google Fonts, vous devez charger localement vos propres polices personnalisées pour éviter d’avoir besoin de ces ressources.
Vous pouvez garantir que vos polices personnalisées se chargent rapidement et efficacement sans ralentir les performances de votre site Web en les chargeant localement. Cela peut conduire à un site Web plus rapide et plus réactif et améliorer l’expérience utilisateur.
#7. Minification JS & CSS
Enfin, la minimisation de vos fichiers CSS et JavaScript peut aider votre site Web à mieux fonctionner. La minification supprime les caractères inutiles, tels que les espaces blancs et les commentaires, de votre code. Ainsi, la taille de vos fichiers est réduite, ce qui accélère le chargement.
Pour minifier vos fichiers, vous pouvez utiliser des outils tels que MinifyJS ou CSSNano. Conservez une copie de vos fichiers originaux au cas où vous auriez besoin d’y apporter des modifications.
Éliminer les ressources bloquant le rendu avec le plugin
Dans cette section, nous vous montrerons comment vous pouvez éliminer les ressources bloquant le rendu à l’aide des plugins WordPress. Ces plugins sont renommés dans WordPress et peuvent rapidement supprimer les ressources bloquant le rendu. La meilleure partie est que vous pouvez même améliorer les performances de votre site Web sans aucune expertise spécialisée.
#1. Cache total W3
W3 Total Cache (W3TC) améliore l’ensemble de l’expérience utilisateur d’un site Web WordPress. Il élimine les ressources bloquant le rendu et améliore le référencement, les éléments vitaux du Web de base, etc. Le plugin utilise des fonctionnalités telles que l’intégration du réseau de diffusion de contenu pour mettre en œuvre les meilleures pratiques.
Pour éliminer les ressources bloquant le rendu, installez et activez le plugin W3 Total Cache et suivez ces étapes :
- Accédez à la section Performances du tableau de bord WordPress et cliquez sur Paramètres généraux.
- Sous l’en-tête Minify, activez Minify et sélectionnez Manual comme mode minify.
- Cliquez maintenant sur Enregistrer tous les paramètres.
- Ensuite, collectez tous les fichiers Javascript et CSS bloquant le rendu via Google PageSpeed Insights.
- Suivi en revenant à Performance> Minify.
- Maintenant, dans la section js, cliquez d’abord sur Activer pour les paramètres JS Minify. Ensuite, dans la section Opérations dans les zones, sélectionnez Non bloquant en utilisant le type « différer » pour la balise Avant .
- Dirigez-vous maintenant vers la gestion des fichiers JS, sélectionnez le thème que vous avez activé et cliquez sur le bouton Ajouter un script. Collectez maintenant les URL Javascript qui ont des problèmes analysés par Google PageSpeed Insights. Collez les URL sur le champ désigné comme indiqué dans l’image.
- Faites maintenant défiler un peu vers la section CSS. Sélectionnez votre thème dans le menu déroulant de la section Gestion des fichiers CSS et cliquez sur Ajouter une feuille de style. Maintenant, il vous suffit de suivre l’étape précédente et de copier-coller les URL collectées à partir de PageSpeed Insight qui ont des problèmes.
- Puisque tous les paramètres sont configurés, cliquez sur le bouton Enregistrer les paramètres et purger pour exécuter.
#2. JCH Optimiser
JCH Optimize améliore les performances du site Web WordPress mesurées par Google PageSpeed Insight. Le plugin améliore la première peinture de contenu (FCP), la plus grande peinture de contenu (LCP), l’indice de vitesse (SI), le décalage de mise en page cumulé (CLS), le temps d’interaction (TTI), et plus encore.
Ainsi, l’expérience utilisateur globale et les performances du site Web s’améliorent considérablement.
Après avoir installé et activé JCH Optimize, suivez ces processus pour éliminer les ressources bloquant le rendu :
- Allez dans Paramètres> JCH Optimize, faites défiler un peu et accédez aux paramètres des fonctionnalités de base.
- Activez la livraison Optimiser CSS pour éliminer le blocage du rendu CSS. Cette fonctionnalité détermine automatiquement le CSS essentiel requis pour afficher le contenu au-dessus du pli sur chaque page Web. De plus, il l’intègre dans la section du contenu HTML de chaque page.
- Le lien de préchargement est ensuite utilisé pour charger les fichiers CSS concaténés de manière asynchrone.
- Pour supprimer les ressources bloquant le rendu Javascript, vous devez inclure les attributs async ou defer dans la balise