Si vous exécutez votre site Web via Lighthouse, vous avez peut-être remarqué une suggestion visant à supprimer les ressources bloquant le rendu.
En retardant JavaScript et en mettant en ligne des styles CSS importants, vous pouvez vous débarrasser des ressources de WordPress qui ralentissent le rendu. Ceci est pris en charge par la majorité des plugins de cache, Autoptimize et Async JavaScript. Elementor et Divi ont tous deux des moyens intégrés de se débarrasser des ressources qui empêchent le rendu de la page, en utilisant des CSS différés et en ligne. La suppression des codes CSS, JavaScript et tiers inutiles peut également faciliter la résolution.
Dans cet article, nous définirons les ressources bloquant le rendu et passerons en revue les avantages de les supprimer de votre site Web. Ensuite, nous vous montrerons cinq façons alternatives de vous en débarrasser.
Quelles sont les ressources bloquant le rendu?
Comprendre le processus typique de chargement d'un site Web est crucial avant d'examiner de plus près les ressources bloquant le rendu. L'intégralité du contenu de votre site Web doit être rendu (ou téléchargé) par le navigateur du visiteur après avoir cliqué sur un lien vers celui-ci. Il lit tout le code HTML, CSS et JavaScript de votre site Web de haut en bas. Votre site Web ne sera pas visible pour les visiteurs tant que le navigateur n'aura pas fini de lire cette file d'attente de scripts. Ils devront peut-être attendre longtemps s'il existe des ressources bloquant le rendu. Fondamentalement, un fichier CSS ou JavaScript qui empêche le navigateur de charger d'autres contenus pendant son traitement est une ressource bloquant le rendu. Cela pourrait arrêter le processus de rendu et donner à la page un aspect inachevé ou vide.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer MaintenantLorsqu'il existe des ressources bloquant le rendu sur votre site Web, des fichiers supplémentaires sont chargés en haut du code. Avant de consulter le site Web, les utilisateurs doivent attendre que ces fichiers soient traités. Les ressources bloquant le rendu ont le potentiel d'influencer plusieurs indicateurs de performance du site Web. Par exemple, la plus grande peinture de contenu mesure le temps nécessaire au chargement du contenu principal d'une page. La première fois que le matériel du modèle d'objet de document (DOM) de votre site est rendu par le navigateur est connu comme la première peinture de contenu. Le temps de blocage total est le temps entre la première peinture de contenu et le temps d'interaction (combien de temps il faut à une page pour devenir entièrement interactive).
Bien qu'elles ne soient pas nécessaires au chargement, les ressources bloquant le rendu peuvent entraver le rendu. L'expérience utilisateur de votre site Web peut en souffrir (UX). Il est donc crucial que vous vous en débarrassiez pour empêcher les visiteurs de quitter vos pages.
Avantages de l'élimination des ressources bloquant le rendu
Les internautes n'aiment généralement pas attendre que les sites Web se chargent. Un site Web rapide peut inciter les utilisateurs à explorer votre matériel et les empêcher de visiter un concurrent. En supprimant les éléments qui bloquent l'affichage, vous rendez efficacement le code de votre site Web aussi léger que possible, ce qui peut être ce secret pour améliorer la vitesse de la page. Étant donné que les performances du site et l'engagement des utilisateurs sont deux facteurs pris en compte par les géants des moteurs de recherche tels que Google lors de l'évaluation des sites Web, la suppression des fichiers bloquant le rendu peut aider à améliorer le classement de votre site dans les moteurs de recherche.
Comment éliminer les ressources bloquant le rendu dans WordPress
Vous vous demandez peut-être comment supprimer les éléments bloquant le rendu de votre site Web maintenant que vous comprenez comment les repérer dans WordPress. Heureusement, nous avons dressé une liste de nombreuses approches que vous pouvez adopter pour y parvenir, en commençant par les plus simples.
Optimiser le chargement CSS
Augmenter la vitesse à laquelle le CSS se charge sur votre site Web est une technique pour se débarrasser des ressources bloquant le rendu. Un navigateur charge votre page Web de haut en bas, comme cela a été dit précédemment. Cela peut allonger le processus de chargement lorsque certains fichiers doivent être traités. Il est crucial de se rappeler que seuls certains fichiers CSS doivent être chargés pour que la page s'affiche. Par conséquent, vous pouvez afficher les fichiers les plus cruciaux en premier lorsque vous optimisez le chargement CSS. Le CSS bloquant le rendu peut être supprimé manuellement, mais vous pouvez également installer un plugin pour faciliter les choses. Vous pouvez optimiser votre site Web directement depuis votre tableau de bord WordPress en utilisant Jetpack Boost. Ce plugin simplifie la mise en œuvre du chargement paresseux, diffère le JavaScript non essentiel et améliore le chargement CSS. L'un des moyens les plus simples de se débarrasser des ressources bloquant le rendu dans WordPress est de le faire.
Commencez par rechercher Jetpack Boost sous Plugins Add New dans votre tableau de bord WordPress. Installez puis activez le plugin sur votre site Web.
Vous pouvez accéder à Jetpack My Jetpack si vous avez déjà chargé Jetpack. Recherchez Boost et sélectionnez Activer dans la liste des produits Jetpack.
Une fois le plugin activé, cliquez sur l'onglet Jetpack Boost et choisissez Commencer.
Votre site Web recevra instantanément une évaluation des performances de Jetpack. Vous verrez une note alphabétique ainsi que des informations sur vos scores sur ordinateur et sur mobile.
Ensuite, activez cette fonctionnalité en faisant défiler vers le bas pour optimiser le chargement CSS. Lorsqu'il est activé, Jetpack Boost augmentera le CSS crucial pour votre site Web afin qu'il se charge plus rapidement.
Différer le JavaScript non essentiel
Vous pouvez prendre plus de mesures pour vous débarrasser des ressources bloquant le rendu dans WordPress en dehors de l'optimisation du chargement CSS. Le JavaScript non essentiel peut également être reporté pour accélérer encore plus le chargement de votre site Web. JavaScript non essentiel peut être retardé afin de retarder certains processus jusqu'à ce que votre contenu soit chargé. Vous pouvez empêcher le navigateur d'exécuter des fichiers JavaScript s'ils ne sont pas nécessaires au chargement d'une page. Heureusement, l'utilisation du plugin Jetpack Boost rend cela simple à faire. Vous pouvez facilement reporter le JavaScript non essentiel après avoir optimisé le processus de chargement CSS. Activez l'interrupteur à bascule de la zone Différer le JavaScript non essentiel. Cette section se trouve sous la section Optimiser le chargement CSS.
Le plug-in mettra à jour son évaluation des performances globales de votre page une fois que vous aurez activé ce paramètre. Votre score avant et après l'utilisation de Jetpack Boost sera affiché.
Jetez un œil aux scores des captures d'écran prises avant et après la fin de ce processus. Vous remarquerez que l'augmentation de la vitesse de la page a été obtenue en retardant le JavaScript non essentiel et en chargeant le CSS plus efficacement. Les navigateurs peuvent charger votre contenu plus rapidement car ils n'ont pas à exécuter de scripts volumineux.
Différer les images hors champ
Bien que les images ne soient pas une ressource qui empêche le rendu des pages, vous pouvez envisager d'accélérer leur temps de chargement. Les sites Web ont souvent des images hors écran qui ne s'affichent pas tant qu'un utilisateur n'interagit pas avec la page, comme le défilement. Vous pouvez les reporter avec un chargement paresseux car ils ne sont pas nécessaires au chargement de la page Web. Seules les images que les visiteurs peuvent voir sont chargées de manière paresseuse. Ces photos se chargeront juste avant de s'afficher sur la page une fois que l'utilisateur défilera. Un navigateur tentera de charger toutes les images d'une page à la fois si le chargement différé n'est pas activé. Plus le temps de chargement de votre matériel est long, plus il est probable que les visiteurs quittent votre site.
Le chargement régulier peut ne pas être un problème si un visiteur utilise un ordinateur de bureau. Les smartphones et les tablettes, en revanche, ont des écrans plus petits et moins de bande passante. Votre site Web peut consommer plus de bande passante et prendre plus de temps à charger pour les utilisateurs de téléphones mobiles s'il charge entièrement toutes ses photos en même temps. Ce problème est résolu via le chargement différé.
Pour activer le chargement différé sur votre site, utilisez Jetpack Boost. Recherchez simplement l'option Lazy Image Loading et activez-la.
Le spectateur ne verra que les images se charger sur votre site Web lorsqu'il fera défiler la page si vous le faites. Même si les photos ne sont pas une ressource qui rend les blocs, l'activation du chargement différé peut accélérer votre page.
Éliminer les ressources bloquant le rendu avec Elementor/Divi
Elementor et Divi incluent tous deux des options pour supprimer les ressources qui obstruent le rendu.
Activez le chargement CSS amélioré et Font-Awesome Inline dans vos paramètres Elementor Experiments pour charger le CSS et les polices en ligne, ce qui les rend non bloquants. Le chargement amélioré des actifs élimine les CSS/JavaScript inutiles, ce qui améliore les éléments vitaux fondamentaux du Web de diverses manières.
En appliquant un CSS crucial, en reportant CSS/JavaScript et en chargeant vos polices en ligne, les options de performances de Divi peuvent également réduire les ressources bloquant le rendu.
Supprimer manuellement le JavaScript bloquant le rendu
Vous pouvez également supprimer manuellement les ressources bloquant le rendu, bien que l'installation d'un plug-in d'optimisation soit une option beaucoup plus simple. Idéalement, vous ne devriez penser à ce choix que si vous êtes un codeur expérimenté. Si vous souhaitez réduire le nombre de plugins sur votre site Web, cette procédure peut également être utile. Vous pouvez attribuer à vos fichiers une propriété asynchrone ou différée pour permettre à JavaScript de s'exécuter plus efficacement. Le navigateur sera chargé de rendre les scripts non critiques séparément en les marquant comme tels. Ces deux caractéristiques peuvent être utilisées pour accélérer le chargement des informations HTML.
Le fichier HTML est analysé de manière typique jusqu'à ce qu'il rencontre le fichier de script. L'analyse s'arrêtera alors pendant qu'elle localise le script. Après l'avoir téléchargé et exécuté, l'analyse se poursuit.
Lors du traitement du code HTML restant, le navigateur peut télécharger du JavaScript grâce à la fonctionnalité asynchrone. Après le téléchargement, il peut arrêter le traitement HTML et exécuter le script.
L'attribut defer fonctionne de manière similaire, permettant au navigateur de télécharger le script pendant qu'il analyse le code HTML. La différence est qu'il retarde également l'exécution du script jusqu'à ce que l'analyse HTML soit terminée.
Vous devez inclure un morceau de code dans votre fichier functions.php afin d'implémenter l'une ou l'autre de ces propriétés. Vous devez d'abord localiser la balise script> de la ressource bloquant le rendu. les éléments suivants en tant qu'attribut asynchrone:
<script src="resource.js" async></script>Comme alternative, considérez à quoi un script peut ressembler lorsque la propriété defer est utilisée:
http://resource.jsBien qu'un plugin puisse s'occuper de ces attributs pour vous, le faire vous-même pourrait mieux répondre à vos préférences. Si tel est le cas, il est crucial de comprendre quand appliquer chaque attribut. Vous devez utiliser une propriété defer pour les scripts non essentiels qui dépendent d'un autre script. L'option async convient à tous les autres scripts.
Appliquer des attributs asynchrones ou différés avec un plugin
Utilisez un plugin comme Async JavaScript si vous avez des problèmes pour éditer manuellement les scripts. Vous avez un contrôle total sur les scripts qui ont la propriété async ou defer grâce à cet outil.
Une fois le plug-in installé, sélectionnez Activer JavaScript asynchrone sous Paramètres JavaScript asynchrone.
Ensuite, allez à la section intitulée Async JavaScript Method. Vous pouvez choisir d'activer les attributs asynchrones ou différés ici.
C'est une bonne idée d'exclure ces scripts car de nombreux plugins dépendent de jQuery. L'application de propriétés asynchrones à jQuery peut entraîner la rupture de votre site Web.
En cas de doute, vous pouvez utiliser l'attribut de report, mais exclure entièrement jQuery est la meilleure solution.
Vous pouvez maintenant spécifier les scripts que vous souhaitez exécuter en mode asynchrone ou différé. Vous devez veiller à placer chaque script dans la section appropriée.
Vous pouvez répertorier tous les scripts que vous souhaitez exclure de cette procédure dans la section Exclusion de script.
Il existe également des options pour exclure les plugins et les thèmes en bas de la page. Les scripts des thèmes ou plugins que vous mentionnez ici ne seront pas applicables aux caractéristiques asynchrones ou différées.
Après avoir effectué les ajustements nécessaires, vous pouvez cliquer sur Enregistrer les paramètres. Cette approche peut être un compromis utile entre la modification manuelle des scripts et l'utilisation d'un plugin pour gérer la tâche à votre place. Comme alternative, vous pouvez éliminer ces étapes supplémentaires en utilisant une application tout-en-un comme Jetpack Boost.
Emballer
En obligeant les navigateurs des visiteurs à reporter le rendu du contenu au-dessus de la ligne de flottaison tout en téléchargeant des actifs qui ne sont pas immédiatement nécessaires, les ressources de blocage du rendu augmentent les temps de chargement de page perçus de votre site WordPress. Vous devez retarder le chargement des ressources qui ne sont pas immédiatement nécessaires afin d'aider les visiteurs à charger plus rapidement la zone visible de votre page. Utilisez des plugins prédéfinis pour vous débarrasser des ressources bloquant le rendu sur WordPress. Vous pouvez combiner Autoptimize et Async JavaScript, deux plugins créés par le même développeur, pour une solution gratuite. Vous pouvez utiliser WP Rocket, qui offre une interaction particulière avec Kinsta et peut vous aider avec de nombreux ajustements supplémentaires des performances de WordPress, si vous êtes prêt à payer pour cela.
