Comment éliminer les ressources bloquant le rendu dans WordPress

Lorsqu'une personne essaie de visiter une page de votre site, elle entre l'URL dans son navigateur, qui se met immédiatement au travail. Pour charger la page, il doit "rendre" tous les éléments qui composent cette page.

Mais parfois, il existe des fichiers CSS ou JavaScript qui interrompent ce processus, empêchant votre contenu de s'afficher — on parle alors de ressources bloquant l'affichage . Cela signifie que les visiteurs peuvent subir de longs temps d'attente, ce qui peut avoir un impact négatif sur la façon dont les gens perçoivent votre organisation et s'ils prennent les mesures que vous souhaitez.

Dans cet article, nous expliquerons ce que sont les ressources bloquant le rendu et discuterons des avantages de les supprimer de votre site. Ensuite, nous vous montrerons comment les éliminer de cinq manières différentes.

Que sont les ressources bloquant le rendu ?

Avant d'examiner de près les ressources bloquant le rendu, il est important de comprendre le processus de chargement normal d'un site Web. Lorsqu'un visiteur clique sur un lien vers votre site, son navigateur doit afficher (ou télécharger) tout son contenu. Il lit le code de votre site de haut en bas, y compris tout son code HTML, CSS et JavaScript.

Les visiteurs ne pourront pas voir votre site Web tant que le navigateur n'aura pas lu entièrement cette file d'attente de scripts. S'il y a des ressources bloquant le rendu, elles pourraient finir par attendre longtemps.

Essentiellement, une ressource bloquant le rendu est un fichier CSS ou JavaScript qui oblige un navigateur à arrêter de charger d'autres contenus jusqu'à ce qu'ils soient traités. Cela peut interrompre le processus de rendu, ce qui fait apparaître la page vide ou incomplète.

Chaque fois que votre site a des ressources bloquant le rendu, il charge des fichiers inutiles en haut de son code. Les visiteurs devront attendre que ces fichiers soient traités avant de pouvoir voir la page.

Voici quelques mesures de performances du site Web qui peuvent être affectées par les ressources bloquant le rendu :

• Largest Contentful Paint : cela mesure le temps qu'il faut pour charger le contenu principal d'une page.
• First Contentful Paint : c'est le temps qu'il faut au navigateur pour restituer le premier élément de contenu DOM (Document Object Model) sur votre site.
• Total Blocking Time : cela mesure le délai entre First Contentful Paint et Time to Interactive (combien de temps il faut à une page pour devenir entièrement interactive).

Les ressources bloquant le rendu ne sont pas critiques pour le chargement, mais elles peuvent retarder le processus de rendu. Cela peut avoir un impact négatif sur l'expérience utilisateur (UX) de votre site. Ainsi, pour empêcher les visiteurs de quitter vos pages, il est important que vous les supprimiez.

Avantages de l'élimination des ressources bloquant le rendu

En général, les internautes n'aiment pas attendre que les pages se chargent. Un site rapide peut inciter les visiteurs à explorer votre contenu et les empêcher de se tourner vers un concurrent.

L'élimination des ressources bloquant le rendu peut être la clé pour améliorer la vitesse des pages, car vous rendez essentiellement le code de votre site Web aussi léger que possible.

La suppression des fichiers bloquant le rendu peut également améliorer votre classement dans les moteurs de recherche, car les performances du site et l'engagement des utilisateurs font partie des mesures que les entreprises comme Google utilisent lors de l'évaluation des sites.

Comment tester votre site Web pour les ressources bloquant le rendu

Avant de commencer à éliminer des fichiers de votre site, vous devez déterminer s'il dispose ou non de ressources bloquant le rendu. Les temps de chargement lents peuvent également être causés par d'autres facteurs, tels que des images non optimisées, un hébergement de mauvaise qualité ou un trop grand nombre de plugins.

Pour tester votre site Web pour les ressources bloquant le rendu, vous pouvez utiliser un outil tel que PageSpeed ​​Insights de Google. Cela peut vous fournir des rapports détaillés sur les performances de votre page et fournir des suggestions pour vous aider à améliorer vos scores.

Pour commencer, entrez simplement l'URL de votre site dans le champ de recherche et cliquez sur Analyser . L'outil testera ensuite les performances de votre site. Une fois qu'il est prêt, vous verrez une évaluation de vos Core Web Vitals, qui sont un ensemble de mesures sur la vitesse de votre page.

PageSpeed ​​Insights facilite également la vérification des ressources bloquant le rendu. Pour ce faire, vous pouvez faire défiler jusqu'à la section Opportunités . Ici, vous devrez rechercher une suggestion intitulée Éliminer les ressources bloquant le rendu .

Si vous cliquez dessus, PageSpeed ​​Insights vous donnera une liste des ressources bloquant le rendu qu'il a identifiées lors du test. Sur le côté droit de la page, vous verrez les économies estimées si vous supprimez ou reportez ces fichiers.

Une fois que vous avez identifié vos ressources bloquant le rendu, vous pouvez continuer et les supprimer de votre site. De cette façon, vous pouvez améliorer la vitesse de votre page et l'expérience utilisateur.

Comment éliminer les ressources bloquant le rendu dans WordPress

Maintenant que vous savez comment identifier les ressources bloquant le rendu dans WordPress, vous vous demandez peut-être comment les supprimer de votre site. Heureusement, nous avons compilé une liste des différentes façons de procéder, en commençant par les méthodes les plus simples.

1. Optimiser le chargement CSS

Une façon d'éliminer les ressources bloquant le rendu consiste à optimiser le chargement CSS de votre site Web. Comme indiqué précédemment, un navigateur charge votre site Web de haut en bas. Lorsqu'il doit traiter certains fichiers, cela peut retarder le processus de chargement.

Il est important de noter que seuls certains fichiers CSS sont requis pour le chargement. Par conséquent, lorsque vous optimisez le chargement CSS, vous pouvez afficher les fichiers les plus importants en premier.

Bien que vous puissiez supprimer manuellement le CSS bloquant le rendu, vous pouvez installer un plugin pour simplifier le processus. Jetpack Boost vous permet d'optimiser votre site depuis votre tableau de bord WordPress.

Avec ce plugin, vous pouvez optimiser le chargement CSS, différer le JavaScript non essentiel et implémenter le chargement paresseux en quelques étapes simples. C'est l'un des moyens les plus simples d'éliminer les ressources bloquant le rendu dans WordPress.

Pour commencer, accédez à Plugins → Ajouter un nouveau dans votre tableau de bord WordPress et recherchez Jetpack Boost. Ensuite, installez et activez le plugin sur votre site.

Si vous avez déjà installé Jetpack, vous pouvez accéder à Jetpack → Mon Jetpack . Dans la liste des produits Jetpack, recherchez Boost et cliquez sur Activer .

Après avoir activé le plugin, cliquez sur l'onglet Jetpack Boost et sélectionnez Get Started .

Jetpack vous donnera automatiquement un score de performance pour votre site Web. Vous verrez une note alphabétique, ainsi que des détails sur vos scores sur mobile et sur ordinateur.

Ensuite, faites défiler jusqu'à Optimiser le chargement CSS et activez cette fonctionnalité. Lorsqu'il est activé, Jetpack Boost déplacera le CSS critique de votre site Web en haut de vos pages, afin qu'elles se chargent plus rapidement.

2. Reportez le JavaScript non essentiel

L'optimisation du chargement CSS n'est pas la seule étape que vous pouvez prendre pour éliminer les ressources bloquant le rendu dans WordPress. Vous pouvez également différer le JavaScript non essentiel pour améliorer encore les temps de chargement de votre site.

En différant le JavaScript non essentiel, vous pouvez reporter certaines tâches après le chargement de votre contenu. Si certains fichiers JavaScript ne sont pas nécessaires pour charger une page, vous pouvez empêcher le navigateur de les traiter.

Heureusement, cela est simple à mettre en œuvre avec le plugin Jetpack Boost. Après avoir optimisé le chargement CSS, vous pouvez facilement différer le JavaScript non essentiel.

Pour ce faire, localisez la section Defer Non-Essential JavaScript , qui se trouve sous Optimize CSS Loading et activez l'interrupteur à bascule.

Une fois que vous avez activé ce paramètre, le plugin recalculera les performances globales de votre page. Vous pourrez voir votre score avant et après avoir utilisé Jetpack Boost.

Comparez les scores dans les captures d'écran avant et après avoir traversé ce processus. Vous verrez que l'optimisation du chargement CSS et le report du JavaScript non essentiel ont été efficaces pour améliorer la vitesse de la page. Sans avoir à traiter des scripts volumineux, les navigateurs sont capables de charger votre contenu plus rapidement.

3. Différer les images hors écran

Les images ne sont pas une ressource bloquant le rendu, mais vous pouvez envisager d'optimiser leur processus de chargement pour améliorer le rendu de votre page. Souvent, les sites Web contiennent des images hors écran qui n'apparaissent pas sur une page tant qu'un visiteur n'a pas effectué d'interaction, comme un défilement. Comme ceux-ci ne sont pas essentiels au chargement de la page Web, vous pouvez les différer avec un chargement différé.

Le chargement d'images paresseux implique de ne charger que les images que les visiteurs peuvent voir. Lorsque quelqu'un commence à défiler, ces images se chargent juste avant d'apparaître sur la page.

Sans chargement paresseux, un navigateur tentera de charger toutes les images d'une page à la fois. Cela signifie que le chargement de votre contenu prendra plus de temps, ce qui peut inciter les internautes à quitter votre site.

Si un visiteur utilise un ordinateur de bureau, le chargement régulier peut ne pas poser de problème. D'autre part, les smartphones et les tablettes ont des écrans plus petits et moins de bande passante. Si votre site Web charge entièrement toutes ses images en même temps, cela peut mettre plus de pression sur la bande passante et augmenter les temps de chargement pour les utilisateurs de téléphones mobiles. Le chargement paresseux résout ce problème.

Vous pouvez utiliser Jetpack Boost pour activer le chargement différé sur votre site. Trouvez simplement la fonction Lazy Image Loading et activez-la.

Ce faisant, votre site Web ne chargera les images que lorsque le visiteur fera défiler la page. Bien que les images ne soient pas une ressource bloquant le rendu, l'activation du chargement différé peut aider à améliorer la vitesse de votre page.

4. Supprimez manuellement le JavaScript bloquant le rendu

Bien que l'installation d'un plug-in d'optimisation soit une solution beaucoup plus simple, vous pouvez également supprimer manuellement les ressources bloquant le rendu. Idéalement, vous ne devriez envisager cette option que si vous êtes un codeur expérimenté. Ce processus peut également être utile si vous souhaitez réduire le nombre de plugins sur votre site Web.

Lors de l'optimisation de JavaScript, vous pouvez ajouter un attribut async ou defer à vos fichiers. Cela marquera les scripts non critiques et indiquera au navigateur de les afficher séparément. Les deux attributs peuvent être utilisés pour accélérer le chargement du contenu HTML.

Dans un script normal, le fichier HTML est analysé jusqu'à ce qu'il atteigne un fichier de script. Ensuite, l'analyse s'interrompra pendant qu'elle récupère le script. Une fois qu'il est téléchargé et exécuté, l'analyse reprend.

L'attribut async permet au navigateur de télécharger JavaScript pendant qu'il analyse le reste du code HTML. Une fois téléchargé, il peut arrêter l'analyse HTML pour exécuter le script.

De même, l'attribut defer permet au navigateur de télécharger le script lors de l'analyse du code HTML. La différence est qu'il attend également la fin de l'analyse HTML pour exécuter le script.

Pour implémenter l'un ou l'autre de ces attributs, vous devrez ajouter un extrait de code à votre fichier functions.php . Tout d'abord, vous devrez trouver la balise <script> pour la ressource bloquant le rendu. Ensuite, vous pouvez ajouter un attribut asynchrone comme celui-ci :

 <script src="resource.js" async></script>

Sinon, voici à quoi pourrait ressembler un script avec un attribut defer :

 http://resource.js

Bien qu'un plugin puisse gérer ces attributs pour vous, vous préférerez peut-être effectuer cette tâche vous-même. Si tel est le cas, il est important que vous sachiez quand utiliser chaque attribut. Pour les scripts non essentiels qui reposent sur un autre script, vous devrez utiliser un attribut defer. Pour tous les autres scripts, vous pouvez utiliser async.

5. Appliquer des attributs asynchrones ou différés avec un plugin

Si vous rencontrez des difficultés pour éditer les scripts manuellement, vous pouvez utiliser un plugin comme Async JavaScript. Cet outil vous permet de contrôler entièrement les scripts qui ont un attribut asynchrone ou différé.

Une fois que vous avez installé le plugin, allez dans Paramètres → JavaScript asynchrone et sélectionnez Activer JavaScript asynchrone .

Ensuite, accédez à la section Méthode JavaScript asynchrone . Ici, vous pouvez choisir si vous souhaitez activer les attributs asynchrones ou différés.

Étant donné que de nombreux plugins reposent sur jQuery, c'est une bonne idée d'exclure ces scripts. Si vous essayez d'appliquer des attributs asynchrones à jQuery, vous risquez de casser votre site Web.

En cas de doute, vous pouvez utiliser l'attribut defer, mais la meilleure solution consiste à exclure complètement jQuery.

Maintenant, vous pouvez répertorier les scripts spécifiques que vous souhaitez différer ou asynchroniser. Il est important de vous assurer que vous placez chaque script dans la bonne section.

Dans la section Exclusion de script , vous pouvez répertorier tous les scripts que vous souhaitez exclure de ce processus.

Au bas de la page, vous verrez également des options pour exclure les plugins et les thèmes. Lorsque vous répertoriez un thème ou un plugin ici, leurs scripts ne s'appliqueront pas aux attributs async ou defer.

Une fois que vous avez personnalisé ces options, vous pouvez continuer et cliquer sur Enregistrer les paramètres . Cette méthode peut être un compromis efficace entre l'édition manuelle des scripts et le fait de permettre à un plugin d'effectuer ce processus pour vous. Alternativement, vous pouvez utiliser un outil tout-en-un comme Jetpack Boost pour supprimer ces étapes supplémentaires.

Foire aux questions (FAQ)

Comme vous pouvez le voir, il existe plusieurs façons d'éliminer les ressources bloquant le rendu dans WordPress. Regardons quelques-unes des questions les plus courantes sur ce processus.

Comment puis-je tester mon site WordPress pour les ressources bloquant le rendu ?

Vous pouvez tester votre site Web WordPress en saisissant son URL sur PageSpeed ​​Insights. Dans vos résultats, recherchez les ressources bloquant le rendu dans la section Opportunités .

Les ressources bloquant le rendu sont-elles liées à Core Web Vitals ?

Oui, les ressources bloquant le rendu peuvent avoir un impact négatif sur les scores Core Web Vitals de votre site. Tout script non optimisé peut augmenter le Largest Contentful Paint (LCP), le Total Blocking Time (TBT) et le First Contentful Paint (FCP). Si vous testez votre site Web avec un logiciel Core Web Vitals, comme PageSpeed ​​Insights, il peut suggérer d'éliminer les ressources bloquant le rendu pour améliorer votre score.

HTML est-il une ressource bloquant le rendu ?

Oui, toute importation HTML, script ou feuille de style qui retarde le processus de rendu de la page peut être une ressource bloquant le rendu.

Les images bloquent-elles le rendu ?

Non, les images ne sont pas une ressource bloquant le rendu, mais vous pouvez toujours optimiser les images pour augmenter la vitesse de votre page. À l'aide de Jetpack Boost, vous pouvez différer les images hors écran pour ne charger que ce qui est visible à l'écran. Ensuite, les images se chargeront au fur et à mesure qu'un visiteur fait défiler la page.

Optimisez votre site pour des temps de chargement plus rapides

Lorsque vous supprimez les fichiers bloquant le rendu, vous pouvez améliorer les temps de chargement de votre site. Cela peut contribuer à une meilleure expérience utilisateur, ce qui peut garder les visiteurs sur votre site Web pendant de plus longues périodes. Par conséquent, l'élimination des ressources bloquant le rendu peut être un moyen efficace d'optimiser votre site pour mieux atteindre vos objectifs.

Pour passer en revue, voici cinq façons d'éliminer les ressources bloquant le rendu dans WordPress :

1. Optimisez le chargement CSS avec Jetpack Boost.
2. Reportez le JavaScript non essentiel.
3. Différer les images hors écran.
4. Supprimez manuellement les ressources bloquant le rendu.
5. Appliquez des attributs asynchrones ou différés avec le plug-in Async JavaScript.

Une fois que vous avez supprimé les ressources bloquant le rendu, vos visiteurs peuvent profiter de temps de chargement plus rapides !