Quelles sont les ressources bloquant le rendu et comment résoudre les problèmes de blocage du rendu

Publié: 2018-02-28

Les ressources bloquant le rendu sont l'une des raisons les plus courantes du chargement lent des sites Web. Et si votre site Web n'est pas assez rapide, non seulement vous nuisez à l'expérience utilisateur de vos visiteurs, mais également à votre classement dans les moteurs de recherche. La mauvaise nouvelle est que si votre site Web est lent, vous perdez des clients et des revenus.

Cependant, il y a aussi de bonnes nouvelles - vous pouvez améliorer la vitesse de votre site Web en éliminant les ressources qui bloquent le rendu. Dans cet article, nous expliquerons l'impact des ressources bloquant le rendu sur vos temps de chargement et vous montrerons comment les corriger.

Que sont les ressources bloquant le rendu ?

Les ressources de blocage de rendu les plus courantes sont les fichiers JavaScript et CSS situés dans l'en-tête de votre page Web. Ils se chargent au-dessus de la zone de pliage (ou la zone que vous voyez normalement sur un site Web avant de faire défiler vers le bas pour voir le reste du contenu) et font partie du chemin de rendu critique utilisé par un navigateur Web.

En termes simples, cela signifie que certains événements doivent se produire pour que votre navigateur affiche (rende) correctement la vue initiale de n'importe quelle page Web. Voici un exemple du fonctionnement d'un chemin de rendu de base :

  • Le navigateur télécharge une page Web composée d'un fichier HTML contenant la structure de la page Web.
  • Le navigateur lit alors le HTML et remarque 3 fichiers supplémentaires : un fichier css, un fichier javascript et une image
  • Le navigateur téléchargera d'abord l'image
  • Le navigateur se rend alors compte qu'il ne peut pas continuer à afficher la page sans saisir le CSS et le JavaScript
  • Le navigateur télécharge le fichier CSS et le lit pour s'assurer que rien d'autre n'est appelé
  • Le navigateur télécharge le fichier JavaScript et le lit pour s'assurer que rien d'autre n'est appelé
  • Le navigateur peut enfin afficher la page web

Pendant que le navigateur est occupé à charger et à lire chacun des fichiers CSS et JavaScript, vos visiteurs regardent un écran vide, attendant que votre site se charge. Si vous utilisez un CMS comme WordPress, votre navigateur peut être occupé pendant un certain temps car il devra charger non seulement les fichiers de style et de script de votre thème, mais aussi les fichiers de script et de style fournis avec WordPress lui-même ainsi que ceux qui viennent avec tous les plugins et widgets que vous utilisez.

Lorsqu'il s'agit d'optimiser la vitesse de votre site Web, la première tâche de votre liste devrait être de réduire le temps nécessaire à vos utilisateurs pour visualiser et interagir avec votre contenu. Le moyen le plus simple d'y parvenir est d'optimiser votre chemin de rendu critique.

Comment résoudre les problèmes de blocage de rendu

Maintenant que vous savez ce qui cause les problèmes de blocage du rendu et leur impact sur la vitesse de votre site, parlons de la façon de résoudre ces problèmes.

CSS bloquant le rendu

Il existe trois façons de résoudre les problèmes CSS bloquant le rendu :

  • Appelez correctement vos fichiers CSS - votre fichier CSS doit être lié dans votre fichier HTML comme ceci : <link rel="style.css" href=“style.css"> au lieu de compter sur l'utilisation de la méthode @import . La méthode @import sera généralement près du haut de votre feuille de style habituelle et obligera le navigateur à revenir en arrière et à trouver le fichier importé avant qu'il ne puisse lire le reste du fichier CSS et entraînera un retard encore plus important lorsqu'il s'agit de rendre votre page Web
  • Réduisez le nombre de fichiers CSS dans le chemin critique - si possible, combinez tous les différents fichiers CSS en un seul et supprimez l'appel à ces fichiers de votre HTML

JavaScript bloquant le rendu

Pour supprimer le JavaScript bloquant le rendu, vous devez savoir combien de fichiers JavaScript sont chargés et où sont-ils appelés dans votre code HTML. Un bon moyen de le savoir est d'utiliser l'outil Google PageSpeed ​​Insights. Lorsque la société de nettoyage basée en Australie, This Is Neat Cleaning, construisait son site Web, elle a utilisé PageSpeed ​​Insights de Google comme référence, testant divers scénarios pour savoir exactement ce dont elle avait besoin pour le mobile et le bureau.

Il est ressorti des tests que l'insertion de la majorité des scripts au bas des fichiers HTML produisait les meilleurs résultats. La raison principale étant que le déplacement des scripts vers le bas de la page a supprimé le blocage du rendu javascript de bloquer l'expérience utilisateur. Le CSS critique étant toujours chargé au-dessus du pli, l'utilisateur pouvait toujours utiliser fondamentalement le site, tandis que les interactions et les fonctionnalités étaient toujours chargées en arrière-plan.

Utiliser un plug-in

Bien sûr, comme pour tout ce qui concerne WordPress, vous pouvez utiliser un plugin pour résoudre les problèmes de blocage du rendu. Avec plus d'un million d'installations actives au total, il était évident que This is Neat Cleaning utiliserait W3 Total Cache pour la mise en cache, la minification et l'optimisation des performances.

Voici comment vous pouvez utiliser W3 Total Cache pour résoudre les problèmes de blocage du rendu.

Dans votre tableau de bord WordPress, accédez à Performances > Paramètres et faites défiler jusqu'à la section Minify . Cochez la case Activer , puis sélectionnez Manuel dans le menu déroulant à côté du mode minify. Enregistrer les paramètres . Vous devrez ensuite ajouter tous les scripts et styles que vous souhaitez minifier.

Pour savoir où se trouvent les scripts et les feuilles de style qui bloquent le rendu, accédez à l'outil Google Page Speed ​​Insights et analysez votre site Web. Ensuite, regardez l'onglet des suggestions et trouvez la section qui se lit comme suit : Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison . Cliquez sur Afficher comment réparer et sélectionnez et copiez l'URL du fichier.

Revenez à votre tableau de bord WordPress et accédez à W3 Total Cache > Performance > Minify . Faites défiler jusqu'à la section JavaScript et sous Opérations dans les zones, assurez-vous que le type d'intégration est défini sur Non bloquant avec report pour la section <head> . Ensuite, cliquez sur le bouton Ajouter un script et collez l'URL que vous avez copiée à partir de l'outil Google PageSpeed.

Une fois que vous avez ajouté tous les fichiers de script, faites défiler jusqu'à la section CSS , cliquez sur Ajouter une feuille de style et ajoutez les URL des fichiers de feuille de style copiés depuis Google PageSpeed ​​Insights.

Lorsque vous avez terminé, cliquez sur le bouton Enregistrer les paramètres et purger le cache .

Dernières pensées

Les ressources bloquant le rendu peuvent causer des ravages en ce qui concerne la vitesse du site Web. Heureusement, il existe plusieurs façons de résoudre ces problèmes. Utilisez donc les conseils fournis ici pour améliorer la vitesse de votre site Web et garantir à vos visiteurs la meilleure expérience utilisateur possible.