Les objectifs de l’optimisation des ressources bloquant le rendu 2/2

L’un des principaux objectifs de l’optimisation du chemin critique du rendu de la page est de s’assurer que les ressources nécessaires pour rendre ce contenu important et au-dessus de la ligne de flottaison sont chargées aussi rapidement que possible humainement.

Les objectifs de l’optimisation des ressources bloquant le rendu 2/2

 

Toutes les ressources bloquant le rendu doivent être dépriorisées ainsi que toutes les ressources qui empêchent la page de s’afficher rapidement. Chaque point d’optimisation contribuera à l’amélioration globale de la vitesse de votre page, de Page Experience et des scores Core Web Vitals.

 

Pourquoi améliorer le CSS du blocage du rendu ?

Google a dit à plusieurs reprises que le codage n’est pas nécessairement important pour le classement. Mais, de la même manière, obtenir un avantage de classement grâce aux améliorations de l’optimisation de la vitesse de chargement de la page peut potentiellement aider, en fonction de la requête.

En ce qui concerne les fichiers CSS, ils sont considérés comme des ressources bloquant le rendu. Pourquoi ?

Même si cela se produit au milieu d’une milliseconde ou moins (dans la plupart des cas), le navigateur ne commencera pas à afficher le contenu de la page tant qu’il n’est pas capable de demander, de recevoir et de gérer tous les styles CSS.

Si un navigateur affiche un contenu qui n’est pas stylisé correctement, tout ce que vous obtiendrez est un tas de texte ordinaire et de liens qui ne sont même pas stylisés. Cela signifie que votre page sera essentiellement « nue », faute d’un meilleur terme.

La suppression des styles CSS entraînera une page littéralement inutilisable. La majorité du contenu devra être repeinte afin d’avoir l’air le moins désagréable pour un utilisateur.

Si nous examinons le processus du rendu de la page, on se rend compte qu’il y a un temps de navigation nécessaire pour obtenir toutes les ressources CSS. De cette façon, le processus peut commencer à construire le DOM de CSS (ou l’arborescence CCSOM). Cela peut prendre entre une milliseconde et plusieurs secondes, selon ce que votre serveur doit faire pour charger ces ressources. Cela peut également varier, ce qui peut dépendre de la taille, ainsi que de la quantité, de ces fichiers CSS.

En outre, dans la séquence du rendu d’une page, dans laquelle tous les fichiers se chargent dans un processus, de la construction du DOM à la peinture finale et à la composition de la page, connu sous le nom de chemin critique du rendu.

Étant donné que CSS est une ressource bloquant le rendu par défaut, il est logique d’améliorer CSS au point où il n’a aucun impact négatif sur le processus du rendu de la page.

La recommandation officielle de Google stipule ce qui suit :

Avant que le navigateur puisse afficher la page, les arborescences DOM et CSSOM doivent être créées. Nous devons donc nous assurer que le code HTML et CSS est transmis au navigateur le plus rapidement possible.

… CSS est une ressource bloquant le rendu. Transmettez-le au client dès que possible pour optimiser le temps de premier rendu.

Le code HTML doit être converti en quelque chose avec laquelle le navigateur peut fonctionner: les fichiers DOM.CSS sont de la même manière. Ceux-ci doivent être convertis en CSSOM. En optimisant les fichiers CSS dans le DOM et le CSSOM, vous pouvez aider à réduire le temps nécessaire à un navigateur pour tout rendre, ce qui contribue grandement à une expérience de page améliorée.

Pourquoi améliorer le blocage du rendu JavaScript ?

Saviez-vous que le chargement de JavaScript n’est pas toujours nécessaire ?

Avec JavaScript, le téléchargement et l’analyse de toutes les ressources JavaScript ne sont pas une étape nécessaire pour le rendu complet d’une page. Donc, ce n’est pas vraiment une partie techniquement requise du rendu de la page.

Mais, la mise en garde à ceci est: La plupart des sites modernes sont codés de telle sorte que JavaScript (par exemple le framework Bootstrap JS) est nécessaire pour rendre l’expérience au-dessus de la ligne de flottaison (partie visible d’un contenu sur tout écran).

Mais, si un navigateur trouve des fichiers JavaScript avant le premier rendu d’une page, le processus de rendu peut être arrêté jusqu’à plus tard et après que les fichiers JavaScript soient entièrement exécutés. Cela peut être spécifié autrement en reportant les fichiers JavaScript pour une utilisation ultérieure.

Un exemple de ceci est s’il existe des fonctions JS comme une alerte intégrée au code HTML. Cela pourrait arrêter le rendu de la page jusqu’à l’exécution de ce code JavaScript. JavaScript a le seul pouvoir de modifier les styles HTML et CSS, donc cela a du sens.

L’analyse et l’exécution de JavaScript pourraient être retardées en raison du fait que JavaScript peut potentiellement modifier le contenu entier de la page. Ce délai est intégré au navigateur par défaut – pour un tel scénario « au cas où ».

Recommandation officielle de Google :

JavaScript peut également bloquer la construction DOM et retarder le rendu de la page. Pour offrir des performances optimales… éliminez tout JavaScript inutile du chemin critique du rendu.

 

Comment faire pour identifier les ressources bloquant le rendu

Pour identifier le chemin critique du rendu et analyser les ressources critiques :

  • Exécutez un test à l’aide de webpagetest.org et cliquez sur l’image « cascade ».
  • Concentrez-vous sur toutes les ressources demandées et téléchargées avant la ligne verte « Démarrer le rendu ».

Analysez votre vue en cascade; recherchez les fichiers CSS ou JavaScript qui sont demandés avant la ligne verte « Démarrer le rendu » mais qui ne sont pas critiques pour le chargement du contenu au-dessus du pli ou ligne de flottaison.

Après avoir identifié une ressource (potentiellement) bloquant le rendu, testez sa suppression pour voir si le contenu au-dessus du pli est affecté. Dans mon exemple, j’ai remarqué certaines requêtes JavaScript qui peuvent être critiques.

Même s’ils sont critiques, c’est parfois une bonne idée de tester la suppression de ces scripts pour tester comment les éléments changeants sur le site affectent l’expérience. Il existe également d’autres moyens d’améliorer ces ressources.

Pour les fichiers JavaScript non critiques, vous pouvez envisager de combiner les fichiers et de les différer en incluant ces fichiers au bas de votre page. Pour les fichiers CSS non critiques, vous pouvez également réduire le nombre de fichiers CSS que vous avez en les combinant en un seul fichier et en les compressant.

L’amélioration de vos techniques de codage peut également entraîner un fichier plus rapide à télécharger et avoir moins d’impact sur la vitesse du rendu de votre page.

Façons de réduire les éléments bloquant le rendu sur la page

Une fois que vous avez déterminé qu’une ressource bloquant le rendu n’est pas essentielle pour le rendu du contenu au-dessus de la ligne de flottaison, vous voudrez explorer une myriade de méthodes disponibles afin d’améliorer le rendu de votre page et de différer les ressources non critiques.

Il existe de nombreuses solutions à ce problème, allant du report des fichiers JavaScript et CSS à la réduction de l’impact que CSS peut avoir. Une solution possible est de ne pas ajouter de CSS à l’aide de la règle @import.

1. Assurez-vous de ne pas ajouter de CSS à l’aide de la règle @import

Du point de vue des performances, même si @import semble garder votre fichier HTML plus propre, il peut en fait créer des problèmes de performances. La déclaration @import entraînera en fait le navigateur à traiter un fichier CSS plus lentement. Pourquoi ?

Parce qu’il télécharge également tous les fichiers importés. Le rendu sera entièrement bloqué jusqu’à la fin du processus.

En effet, la meilleure solution est d’utiliser la méthode standard d’inclusion d’une feuille de style CSS en utilisant la déclaration <link rel= »stylesheet »> dans le HTML.

2. Minimisez vos fichiers CSS et JavaScript

Si vous êtes sur WordPress, l’utilisation d’un plugin pour minimiser vos fichiers CSS et JavaScript peut avoir un impact énorme.

Le processus de minification prend tous les espaces inutiles dans un fichier et le compresse encore plus, de sorte que vous pouvez vous retrouver avec une belle amélioration des performances. De plus, même si vous n’êtes pas sur WordPress, vous pouvez utiliser les services d’un développeur qualifié afin de terminer le processus manuellement. Cela prendra plus de temps mais peut en valoir la peine.

Les fichiers minifiés sont généralement beaucoup plus légers que leurs anciens homologues, ce qui signifie que le rendu initial se terminera beaucoup plus rapidement.

En plus de cela, après le processus de minification, vous pouvez également vous attendre à ce que le processus de téléchargement soit plus rapide, car moins de temps est nécessaire pour télécharger des ressources bloquant le non-rendu.

3. Utiliser des polices système au lieu de polices tierces

Bien que les polices tierces puissent sembler rendre un site « plus joli », ce n’est pas exactement le cas.

Bien que cela puisse sembler étonnant en surface, ces fichiers de polices tiers prennent souvent plus de temps à charger et peuvent contribuer à votre problème de ressources bloquant le rendu. En raison des fichiers externes, le navigateur doit faire des demandes externes afin de télécharger ces fichiers pour afficher votre page, ce qui peut entraîner des temps de téléchargement considérablement plus élevés.

Si vous faites partie d’une équipe qui n’a pas les meilleures pratiques de développement idéales, il pourrait aller de soi que vous avez de nombreux fichiers de police tiers qui ne sont pas nécessaires pour rendre votre site. Dans ce cas, la suppression de tous ces fichiers inutiles peut améliorer considérablement vos ressources de blocage du rendu et contribuer à votre amélioration globale de Core Web Vitals.

L’utilisation de polices système, en revanche, ne conserve que le traitement dans le navigateur, sans requêtes externes. En outre, il existe probablement des polices système qui peuvent être très similaires aux polices tierces que vous utilisez.

4. Améliorez vos techniques de codage et la combinaison de fichiers

Si vous travaillez avec du code vous-même, vous pouvez (ou pas) trouver que les techniques sont moins optimales.

Un exemple: vous utilisez du CSS en ligne partout, ce qui provoque des problèmes de traitement et de rendu dans le navigateur. La solution simple consiste à vous assurer que vous prenez tous les CSS en ligne et que vous les codez correctement dans le fichier de feuille de style CSS. Si le code d’un autre développeur n’est pas à la hauteur, cela peut créer des problèmes majeurs avec le rendu de la page.

Par exemple : Supposons que vous ayez une page codée à l’aide de techniques plus anciennes plutôt que de techniques modernes et plus légères. Les techniques plus anciennes peuvent inclure un gonflement important du code et entraîner un rendu plus lent de la page.

Pour éliminer cela, vous pouvez améliorer vos techniques de codage en créant un code plus léger et moins gonflé, ce qui se traduit par une bien meilleure expérience de rendu de page.

5. La combinaison de fichiers peut également améliorer la situation

Par exemple : si vous avez 8 ou 10 fichiers JavaScript qui contribuent tous à la même tâche, vous pouvez faire appel aux services d’un développeur qui peut ensuite combiner tous ces fichiers pour vous.

Et, s’il s’agit de fichiers JavaScript moins critiques, ces fichiers peuvent également être différés en les ajoutant à la fin du code HTML de la page.

En combinant des fichiers et en améliorant vos techniques de codage, vous pouvez contribuer de manière significative à de meilleures expériences de rendu de page.

Principaux points à retenir

Trouver des solutions pour réduire les ressources de blocage du rendu est un élément de base de l’audit SEO depuis un certain temps déjà. C’est important pour plusieurs raisons :

  • En réduisant les ressources bloquant le rendu, vous accélérez votre site. Vous pouvez également procéder à une ingénierie inverse de votre site pour tirer parti des éléments qui joueront un rôle dans la mise à jour globale de Google Page Experience.
  • Vous vous mettez également en position de profiter d’un coup de pouce que vous obtiendrez des métriques Core Web Vitals de Google.
  • Core Web Vitals ne va pas disparaître. Ils sont devenus un point d’optimisation critique afin de faciliter les temps de rendu potentiels les plus rapides possibles dans votre cadre actuel.
  • Avec l’introduction de nouvelles métriques Core Web Vitals à l’avenir, s’assurer que vous êtes à jour sur les métriques existantes est toujours une excellente idée.
  • Trouver et réparer les ressources bloquant le rendu garantit également que vous continuez à satisfaire les visiteurs de votre site Web et qu’il est toujours en pleine forme pour les heures de grande écoute.

Source : SEJ