Sommaire
Que sont les ressources bloquant le rendu ?
Les ressources bloquant le rendu sont des portions de code dans les fichiers de sites Web, généralement CSS et JavaScript, qui empêchent le chargement rapide d’une page Web. Ces ressources bloquant le rendu prennent un temps relativement long à être traitées par le navigateur, mais peuvent ne pas être nécessaires pour l’expérience immédiate de l’utilisateur. Les ressources bloquant le rendu peuvent être supprimées ou retardées jusqu’à ce que le navigateur ait besoin de les traiter.
Ne vous méprenez pas : CSS et JavaScript sont excellents. Sans CSS, les sites Web seraient des murs de texte brut. Sans JavaScript, nous ne serions pas en mesure d’ajouter des éléments dynamiques, interactifs et attrayants à nos sites Web. Mais, s’ils sont utilisés au mauvais moment, CSS et JavaScript peuvent nuire aux performances de votre site Web.
Voici pourquoi : Lorsqu’un navigateur Web charge une page Web pour la première fois, il analyse tout le code HTML de la page avant de l’afficher à l’écran pour le visiteur. Lorsque le navigateur rencontre un lien vers un fichier CSS, un fichier JavaScript ou un script en ligne (c’est-à-dire du code JavaScript dans le document HTML lui-même), il interrompt l’analyse HTML pour récupérer et exécuter le code, ce qui ralentit tout.
Si vous avez optimisé les performances de votre page dans WordPress et que vous rencontrez encore des problèmes, les ressources bloquant le rendu peuvent être en cause. Il est parfois important d’exécuter ce code au premier chargement, mais la plupart du temps, il peut être supprimé ou repoussé à la toute fin de la file d’attente.
Retour aux ressources bloquant le rendu
L’objectif principal de l’optimisation du chemin de rendu critique est de donner la priorité aux ressources nécessaires au rendu d’un contenu significatif, au-dessus du pli.
Pour ce faire, nous devons également identifier et supprimer les ressources qui bloquent le rendu, c’est-à-dire les ressources qui ne sont pas nécessaires au chargement du contenu visible et qui empêchent la page de s’afficher aussi rapidement qu’elle le pourrait.
CSS bloquant le rendu
Les feuilles de style en cascade (CSS) font partie des ressources bloquant le rendu et ce, intrinsèquement.
Le navigateur ne commencera pas à rendre le contenu de la page tant qu’il ne sera pas en mesure de demander, de recevoir et de traiter tous les styles CSS.
Cela permet d’éviter l’expérience utilisateur négative qui se produirait si un navigateur tentait de rendre un contenu non stylisé.
Une page rendue sans CSS serait pratiquement inutilisable, et la majorité (sinon la totalité) du contenu devrait être repeint.
JavaScript bloquant le rendu
Contrairement à CSS, le navigateur n’a pas besoin de télécharger et d’analyser toutes les ressources JavaScript pour rendre la page, il ne s’agit donc pas techniquement* d’une étape « obligatoire » (*la plupart des sites Web modernes requièrent JavaScript pour leur expérience au-dessus du pli).
Pourtant, lorsque le navigateur rencontre du JavaScript avant le rendu initial de la page, le processus de rendu de la page est mis en pause jusqu’à ce que le JavaScript soit exécuté (sauf indication contraire à l’aide des attributs defer ou async – nous y reviendrons plus tard).
En effet, JavaScript a le pouvoir de manipuler les éléments de la page (HTML) et leurs styles associés (CSS).
Étant donné que le code JavaScript pourrait théoriquement modifier l’ensemble du contenu de la page, le navigateur interrompt l’analyse du code HTML pour télécharger et exécuter le code JavaScript, au cas où.
Ne négligez pas les CCS et JavaScripts, ils sont excellents et nécessaires pour le bon fonctionnement de votre site. Sans eux, votre site ne serait qu’un affichage de texte brut. Le JavaScript permet le dynamisme de votre site web, mais exécuté au mauvais moment cela peut détériorer les performances de votre site.
