Comment éliminer les ressources bloquant le rendu dans WordPress (très facile)
Les ressources de blocage de rendu peuvent être très pénibles pour les blogueurs. Google continue d'avertir de les éliminer. Il existe de nombreuses façons de les supprimer, mais voici un moyen très simple qui ne nécessite pas de codage.
Avoir un blog ou un site Web rapide est très important. C'est important si vous voulez être bien classé dans les moteurs de recherche. Si votre site Web est très lent, cela nuira certainement à votre référencement.
De plus, un site Web lent peut augmenter le taux de rebond, ce qui nuira techniquement à votre marque à bien des égards. Un site Web lent peut affecter les revenus et la conversion.
La plupart des utilisateurs sont impatients, si votre site met trop de temps à se charger, ils l'abandonneront et passeront à une alternative plus rapide. C'est un client potentiel ou un booster de revenus qui a disparu.
Si vous avez essayé d'accélérer votre site web et que vous utilisez un outil de test tel que Google PageSpeed Insights , l'un des avertissements que vous pourriez recevoir est d'éliminer les ressources bloquant le rendu.
Dans cet article, vous apprendrez comment éliminer facilement les ressources bloquant le rendu.
Que sont les ressources bloquant le rendu ?
Les ressources bloquant le rendu sont CSS et JavaScript qui ralentissent le temps de chargement d'un site Web car il doit être téléchargé par le navigateur Web avant que le contenu de la page puisse s'afficher.
Lorsqu'un visiteur essaie d'accéder à un site Web, le navigateur commence immédiatement à lire le site Web de haut en bas. S'il y a du CSS ou du JavaScript, le navigateur arrêtera de lire jusqu'à ce qu'il télécharge et traite les fichiers. Avant que le navigateur puisse afficher le contenu au-dessus de la ligne de flottaison, il doit télécharger les fichiers CSS ou JavaScript.
Les plugins ou thèmes que vous installez peuvent ajouter certains de ces CSS et JS. Certains n'ont pas besoin de se charger en premier, ils peuvent se charger plus tard. Mais parce qu'ils sont là en haut, ils ralentissent votre site Web.
Donc, ce que Google entend par "éliminer les ressources bloquant le rendu", c'est que vous supprimez les ressources inutiles du haut de votre site Web, car cela ralentit le chargement du contenu du site Web.
Comment trouver des ressources bloquant le rendu
Avant de pouvoir résoudre un problème de blocage du rendu, il est nécessaire d'en identifier la cause. Pour ce faire, vous pouvez effectuer un test sur Google PageSpeed Insights ou Web.Measure.
Vous pouvez suivre les étapes ci-dessous pour trouver des ressources de blocage de rendu :
1. Consultez Google PageSpeed Insights
2. Entrez l'adresse de votre site Web et cliquez sur analyser
3. Faites défiler vers le bas et recherchez l'avertissement d'élimination des ressources bloquant le rendu.
Vérifiez-le dans le robinet mobile et de bureau.
BloggingTools ne rencontre aucun problème de blocage d'affichage sur ordinateur, contrairement à la version mobile. Par conséquent, nous utiliserons la version mobile, comme indiqué ci-dessous.
Pour le mobile, comme vous pouvez le voir ci-dessus, nous avons 2 problèmes de blocage de rendu. Avec un score de 93. Le score était plus élevé, mais pour les besoins de cet article, j'ai dû désactiver le plugin Autoptimize.
BloggingTools.org a obtenu ce score sans aucune optimisation car nous utilisons un thème très rapide et léger appelé GeneratePress . De plus, notre site est hébergé par un service d'hébergement web très performant : Cloudways.
Remarque : Il n’est pas nécessaire de viser 100 au test PageSpeed Insights. Ce n’est qu’une indication. En général, un score moyen entre 65 et 80 est satisfaisant. Ne supprimez pas les fichiers essentiels à votre activité.
La bonne chose à propos de WordPress est que vous n'avez pas besoin de tout faire manuellement. Il existe des plugins bien codés pour vous aider.
Comment résoudre le problème d'élimination des ressources bloquant le rendu dans WordPress
Suivez ces étapes pour résoudre le problème d'élimination des ressources bloquant le rendu :
1. Installez et activez Autooptimize
De nombreux plugins WordPress permettent de gérer cela, comme W3 Total Cache, WP Rocket , etc. Cependant, d'après mon expérience avec de nombreux sites web, Autoptimize s'en sort toujours bien mieux. L'avantage principal est qu'Autoptimize est compatible avec la quasi-totalité des plugins de mise en cache WordPress et qu'il est gratuit.
Rendez-vous dans le répertoire des plugins WordPress pour installer et activer Autoptimize.
2. Visitez les paramètres d'optimisation automatique
Si jamais vous avez besoin de savoir où trouver les paramètres Autoptimize, sur votre tableau de bord WordPress, cliquez sur paramètres puis cliquez sur Autoptimize.
3. Optimisez JavaScript
Sous les options JavaScript, sélectionnez Optimiser le code de script et sélectionnez également les fichiers JS agrégés. Vous pouvez trouver les paramètres que j'utilise pour BloggingTools ci-dessous.
4. Optimiser le CSS
Sous les options Optimiser CSS, sélectionnez Optimiser le code CSS. Sélectionnez également les fichiers CSS agrégés et "Agréger également les CSS inline". Voir les options que j'utilise pour BloggingTools ci-dessous.
5. Optimisez le HTML
Si vous souhaitez de meilleures performances, vous pouvez également utiliser Autooptimize pour optimiser le HTML. Sous Options HTML, sélectionnez optimiser le code HTML. Vous pouvez voir les paramètres que j'utilise pour BloggingTools ci-dessous.
6. Vérifiez les options diverses
Vous pouvez vérifier les options diverses et modifier certains paramètres selon vos besoins. Vous pouvez trouver les paramètres de BloggingTools ci-dessous.
7. Enregistrez et videz le cache.
Ensuite, cliquez simplement sur Enregistrer et vider le cache. C'est tout!
Après tout cela, vous pouvez à nouveau vérifier votre site sur Google PageSpeed Insight. Pour BloggingTools, immédiatement après cela, notre score est passé à 95 et tous les avertissements d'élimination des ressources bloquant le rendu ont complètement disparu. Voir ci-dessous.
Veuillez noter qu'en fonction du nombre de ressources bloquant le rendu dont vous disposez et de leur importance pour votre site, certaines d'entre elles peuvent rester. N'essayez pas de les supprimer.
Si vous souhaitez aller plus loin dans l'élimination des erreurs, vous pouvez utiliser Async JavaScript , un plugin du même auteur qu'Autoptimize. Ils fonctionnent ensemble. Je ne le recommande pas car cela pourrait endommager votre site. Autoptimize seul est tout à fait acceptable !
Conclusion
La vitesse est importante et l'élimination des ressources bloquant le rendu peut aider votre site Web à se charger plus rapidement et donner à votre site un meilleur score sur les outils de test de vitesse. Mais il ne faut jamais être obsédé par ces partitions car elles ne sont là que pour guider.
Si votre site web reste très lent après cela, les trois problèmes les plus probables sont un thème ou un hébergeur web de mauvaise qualité, ou encore des plugins défectueux. Je recommande Cloudways comme hébergeur et GeneratePress comme thème. Si vous débutez, Bluehost peut convenir, mais si votre budget le permet, Cloudways est la meilleure option. Vous pouvez commencer gratuitement. J'utilise GeneratePress et Cloudways pour TargetTrend.
A lire également:
Comment rendre WordPress très rapide
Comment générer du trafic vers votre blog
Articles Relatifs
