Les ressources bloquant le rendu de la page Web ralentissent-elles la vitesse de chargement de votre page et ont-elles un impact sur l’expérience utilisateur ? Découvrez comment identifier et résoudre ces problèmes SEO.
Identifier et réduire les ressources responsables du blocage du rendu de votre page Web est un point d’optimisation critique qui peut faire ou défaire la vitesse de votre page.
Il peut être si essentiel qu’il peut rapporter des dividendes aux mesures de Page Experience de votre site (et à la satisfaction de vos utilisateurs).
En 2021, le temps moyen nécessaire pour effectuer le rendu complet d’une page Web mobile était de 22 secondes. En 2018, c’était 15 secondes.
De toute évidence, il s’agit d’un nombre nettement plus élevé que le temps recommandé par Google de 2 à 3 secondes. Il est également nettement plus élevé qu’il ne l’était auparavant.
Qu’est-ce qui pourrait être à l’origine de ces problèmes avec les ressources bloquant le rendu ? Qu’est-ce qui motive cette augmentation de la vitesse de rendu globale de la page ?
Une tendance intéressante à noter est qu’il y a eu une dépendance croissante aux polices tierces par rapport aux polices système. L’utilisation de polices tierces comme ressource a tendance à interférer avec le traitement et le rendu d’une page.
Avec les polices système, le navigateur n’a pas besoin de charger quoi que ce soit de plus, il n’a donc pas cette étape de traitement supplémentaire.
Cette dépendance entre les industries est susceptible d’avoir un impact sur ce temps de rendu. Bien sûr, ce n’est pas la seule cause de ce problème avec les ressources bloquant le rendu. En outre, les propres services de Google ont tendance à avoir un impact significatif sur le temps de rendu, tels que Google Analytics ou l’utilisation d’un pixel Facebook tiers à des fins de suivi (tracking).
Le désir de s’appuyer sur de telles technologies n’est pas nécessairement terrible d’un point de vue marketing. Mais, du point de vue des ressources qui bloquent le rendu, cela peut entraîner une augmentation significative du temps de chargement des pages et de la façon dont Google (et les utilisateurs) perçoit votre page.
La solution idéale est de s’assurer que votre page se charge pour l’interaction de l’utilisateur le plus rapidement possible. Il est également possible que les mauvaises pratiques de développement Web utilisées par les développeurs Web aujourd’hui soient à blâmer.
Quoi qu’il en soit, c’est quelque chose dans chaque projet de site Web qui devrait être abordé dans le cadre de vos audits Core Web Vitals. L’expérience de page, cependant, ne concerne pas seulement la vitesse de chargement de la page entière. Au lieu de cela, il s’agit davantage de l’expérience globale de la page telle que mesurée par le framework Google Page Experience, ou Core Web Vitals.
C’est pourquoi vous souhaitez travailler sur l’amélioration et l’optimisation de la vitesse de chargement de votre page pour le chemin critique du rendu dans l’ensemble du DOM ou document object model.
Qu’est-ce que le rendu de la page Web ?
Le rendu est le processus par lequel Googlebot récupère vos pages, exécute votre code et évalue votre contenu pour comprendre la mise en page ou la structure de votre site.
Toutes les informations collectées par Google au cours du processus de rendu sont ensuite utilisées pour classer la qualité et la valeur du contenu de votre site par rapport à d’autres sites et ce que les gens recherchent avec Google Search.
Chaque page Web a 2 états – le rendu se produit entre eux.
Chaque page Web a deux états :
- Le code HTML initial : Il se produit en premier.C’est la réponse du serveur. Il contient du HTML et des liens vers des ressources telles que JavaScript, CSS et des images nécessaires à la création de la page Web. Pour voir le code HTML initial par vous-même, affichez le code source de la page.
- Le rendu HTML est plus largement connu sous le nom de DOM.C’est une abréviation de Document Object Model. Chaque page Web dispose d’un DOM. Il représente le code HTML initial ainsi que toutes les modifications apportées par JavaScript que HTML a appelées.Pour afficher le DOM, ouvrez les outils de développement du navigateur dans votre navigateur et cliquez sur l’onglet « Console ».
Un site Web peut être très différent entre les deux états.
Si vous cherchez à repérer facilement la différence entre les deux, des outils tels que l’extension Chrome View Rendered Source mettront en évidence les lignes qui changent d’un état à l’autre.
Qu’est-ce que le chemin critique du rendu ?
Le chemin critique du rendu fait référence à toutes les étapes qu’il prend pour restituer la page entière, depuis le moment où le navigateur commence à recevoir des données jusqu’au moment où il compile finalement la page au rendu final.
C’est un processus qui ne peut prendre que quelques millisecondes si vous l’optimisez correctement. Optimiser le chemin critique du rendu signifie s’assurer que vous optimisez les performances du rendu sur de nombreux périphériques différents. Ceci est accompli en optimisant le chemin critique du rendu pour accéder à votre première peinture le plus rapidement possible.
L’optimisation du chemin critique du rendu est essentielle pour améliorer les performances de nos pages : notre objectif est de donner la priorité et d’afficher le contenu associé à la première action que l’utilisateur souhaite effectuer sur une page.
Pour offrir une expérience rapide sur Internet, le navigateur doit fournir un travail important. La majeure partie de ce travail nous est cachée, à nous les développeurs Web : nous écrivons le balisage, et une jolie page s’affiche à l’écran. Mais comment le navigateur fait-il exactement pour afficher des pixels à l’écran à partir de notre code HTML, CSS et JavaScript ?
Pour optimiser les performances, il est essentiel de comprendre ce qui se passe au cours de ces étapes intermédiaires entre la réception des octets HTML, CSS et JavaScript et le traitement nécessaire pour les transformer en pixels affichés. C’est ce que l’on appelle le chemin critique du rendu.
Fondamentalement, vous réduisez le temps que les utilisateurs passent à regarder un écran blanc vide pour afficher le contenu visuel dès que possible (voir 0.0s ci-dessous).
Comment fonctionne le chemin critique du rendu ?
Le chemin critique du rendu fait référence à la série d’étapes qu’un navigateur réalise pour effectuer le rendu d’une page, en convertissant le code HTML, CSS et JavaScript en pixels réels à l’écran.
Essentiellement, le navigateur doit demander, recevoir et analyser tous les fichiers HTML et CSS (plus un travail supplémentaire) avant de commencer à afficher tout contenu visuel. Ce processus se produit en une fraction de seconde (dans la plupart des cas). Jusqu’à ce que le navigateur termine ces étapes, les utilisateurs verront une page blanche vierge.
L’amélioration du chemin critique du rendu peut donc améliorer l’expérience globale de la page, ce qui peut contribuer à améliorer les performances des métriques Core Web Vitals.
Comment optimiser le chemin critique du rendu ?
Afin d’améliorer le chemin critique du rendu, vous devez analyser vos ressources qui bloquent le rendu.
Toutes les ressources bloquant le rendu peuvent finir par bloquer le rendu initial de la page et avoir un impact négatif sur vos scores Core Web Vitals. Cela implique un processus d’optimisation de :
- Réduction de la quantité de ressources essentielles au chemin du rendu.Cela peut être fait en utilisant une méthode de différé pour toutes les ressources de blocage du rendu possibles.
- Prioriser le contenu qui est au-dessus de la ligne de flottaison et télécharger des ressources multimédias importantes dès que possible.
- Compressez la taille du fichier de toutes les ressources critiques restantes.
En faisant cela, il est possible d’améliorer à la fois les Core Web Vitals et la façon dont votre page s’affiche physiquement pour l’utilisateur.
Pourquoi devrais-je m’en soucier ?
Les données sur le comportement des utilisateurs de Google indiquent que la plupart des utilisateurs abandonnent un site lent après environ 3 secondes.
En plus des études qui montrent que la réduction du temps de chargement des pages et l’amélioration de l’expérience de page conduisent à une plus grande satisfaction des utilisateurs, il existe également plusieurs mises à jour majeures de Google à l’horizon auxquelles vous voudrez vous préparer.
L’identification et l’optimisation des ressources bloquant le rendu seront essentielles pour rester au top du jeu lorsque ces mises à jour arriveront.
Google mettra en œuvre Page Experience sur ordinateur en 2022, commençant son déploiement de l’expérience de page de desktop en février et se terminant en mars 2022.
Selon Google, les 3 mêmes métriques Core Web Vitals (LCP, FID et CLS) ainsi que leurs seuils associés seront désormais liés au classement sur les ordinateurs de bureau.
En outre, Google travaille sur une toute nouvelle métrique Core Web Vitals potentiellement expérimentale, prenant en compte la durée maximale de l’événement et la durée totale de l’événement.
Leurs explications de ces facteurs qu’ils considèrent sont :
- Durée maximale de l’événement : la latence de l’interaction est égale à la plus grande durée d’événement unique de n’importe quel événement du groupe d’interaction.
- Durée totale de l’événement : la latence d’interaction est la somme de toutes les durées d’événement, en ignorant tout chevauchement.
Avec de nombreuses études liant la réduction des temps de chargement des pages à l’amélioration des KPI précieux (conversions, taux de rebond, temps passé sur site), l’amélioration de la latence du site est devenue un objectif commercial prioritaire pour de nombreuses organisations.
Les professionnels du référencement sont dans une position unique pour guider cet effort, car notre rôle est souvent de combler le fossé entre les objectifs commerciaux et les priorités des développeurs Web.
Avoir la capacité d’auditer un site, d’analyser les résultats et d’identifier les domaines à améliorer nous aide à travailler avec les développeurs pour améliorer les performances et traduire les résultats aux principales parties prenantes. Lisez la suite de cet article ici.
Source : SEJ
