Les ressources de blocage du rendu sont un élément essentiel de l’optimisation de l’infrastructure de votre page Web.

Les réduire peut aider à accélérer le chargement de votre page et à améliorer considérablement les Core Web Vitals de votre page.

Ces ressources bloquant le rendu incluent des éléments tels que des polices externes qui prennent trop de temps à charger (qui n’ont pas besoin d’être utilisées), des fichiers multimédias inutiles, un gonflement du code qui ne disparaîtra tout simplement pas et des plug-ins supplémentaires qui ne le sont pas. nécessaire.

Il existe une myriade de ces types de ressources que vous pouvez compresser et combiner pour créer des fichiers uniques qui se téléchargent plus rapidement sur vos appareils, créant une vitesse de page beaucoup plus rapide.

En optimisant la structure de votre page à cet égard, vous pouvez réduire la quantité de travail que Google doit effectuer pour explorer votre site et vous pouvez ainsi améliorer votre expérience utilisateur.

En fait, tous les avantages de ce processus incluent :

  • Vitesse de page plus rapide.
  • Moins de ressources nécessaires à Google pour charger votre page.
  • Réduction des problèmes causés par le gonflement du code.
  • Taille de fichier globale plus petite de votre DOM (modèle d’objet de document).
  • Moins de fichiers JavaScript et CSS à télécharger.
  • Déploiement meilleur et plus rapide sur une gamme de plates-formes et d’appareils.
  • Amélioration de l’interaction utilisateur sur mobile.
  • Amélioration des performances globales.

De toute évidence, il existe d’énormes avantages à effectuer ce type de processus d’optimisation sur votre site.

Pourquoi devriez-vous identifier les ressources bloquant le rendu ?

L’identification et la réduction des 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.

Cela peut être si critique qu’il peut en résulter des dividendes pour les mesures d’expérience de la page de votre site (et la satisfaction de votre utilisateur).

En 2021, le temps moyen nécessaire pour rendre entièrement une page Web mobile était de 22 secondes. En 2018, c’était 15 secondes.

De toute évidence, il s’agit d’un nombre nettement supérieur au temps recommandé par Google de deux à trois secondes. C’est aussi beaucoup plus élevé qu’avant.

Qu’est-ce qui pourrait causer ces problèmes avec les ressources bloquant le rendu ?

Qu’est-ce qui est à l’origine de cette augmentation de la vitesse globale de rendu des pages ?

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 rien à charger de plus, il n’a donc pas cette étape de traitement supplémentaire en conséquence.

Il s'agit des statistiques de Web Archive pour l'utilisation de polices Web tierces.

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.

De plus, les propres services de Google ont tendance à avoir un impact significatif sur le temps de rendu, comme Google Analytics ou l’utilisation d’un pixel Facebook tiers à des fins de suivi.

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 bloquant le rendu, cela peut entraîner des augmentations significatives du temps de chargement de la page et de la façon dont Google (et les utilisateurs) perçoivent votre page.

La solution idéale consiste à garantir que votre page se charge le plus rapidement possible pour l’interaction de l’utilisateur.

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 la page, cependant, ne se limite pas à 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 cadre d’expérience de page de Google ou Core Web Vitals.

C’est pourquoi vous souhaitez travailler à l’amélioration et à l’optimisation de la vitesse de votre page pour le chemin de rendu critique dans le DOM ou le modèle d’objet de document.

Qu’est-ce que le chemin de rendu critique ?

Le chemin de rendu critique fait référence à toutes les étapes nécessaires pour rendre la page entière, depuis le moment où le navigateur commence à recevoir des données jusqu’au moment où il compile finalement la page lors du rendu final.

C’est un processus qui ne peut prendre que quelques millisecondes si vous l’optimisez correctement.

Optimiser pour le chemin de rendu critique signifie s’assurer que vous optimisez les performances de rendu sur de nombreux appareils différents.

Ceci est accompli en optimisant le chemin de rendu critique pour obtenir votre première peinture le plus rapidement possible.

Fondamentalement, vous réduisez le temps que les utilisateurs passent à regarder un écran blanc vierge pour afficher le contenu visuel dès que possible (voir 0.0s ci-dessous).

Graphique montrant les étapes du chemin de rendu critique d'une page Web typique.

Il existe tout un processus sur la façon de procéder, décrit dans la documentation du guide du développeur de Google, mais je me concentrerai sur un poids lourd en particulier : la réduction des ressources bloquant le rendu.

Comment fonctionne le chemin de rendu critique ?

Le chemin de rendu critique fait référence à la série d’étapes suivies par un navigateur pour rendre une page en convertissant le HTML, le CSS et le JavaScript en pixels réels à l’écran.

Un exemple de chemin de rendu critique.

Essentiellement, le navigateur doit demander, recevoir et analyser tous les fichiers HTML et CSS (plus quelques travaux supplémentaires) avant de commencer à restituer tout contenu visuel.

Ce processus se produit en une fraction de seconde (dans la plupart des cas). Les utilisateurs verront une page blanche vierge jusqu’à ce que le navigateur termine ces étapes.

Voici un exemple de la façon dont les utilisateurs peuvent ressentir le chargement d’une page en fonction des différentes étapes du processus de chargement de la page :

Comment les utilisateurs perçoivent le rendu des pages.

L’amélioration du chemin de rendu critique peut ainsi améliorer l’expérience globale de la page, ce qui peut aider à améliorer les performances sur les métriques Core Web Vitals.

Comment optimiser le chemin de rendu critique ?

Pour améliorer le chemin de rendu critique, vous devez analyser vos ressources de blocage de rendu.

Toute ressource bloquant le rendu peut 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éduire le nombre de ressources qui sont critiques pour le chemin de rendu. Cela peut être fait en utilisant une méthode différée pour toutes les ressources bloquant le rendu.
  • Prioriser le contenu c’est au-dessus du pli, et en téléchargeant des ressources multimédias importantes dès que possible.
  • Compresser la taille du fichier de toutes les ressources critiques restantes.

Ce faisant, il est possible d’améliorer à la fois Core Web Vitals et le rendu physique de votre page pour l’utilisateur.

Avant de discuter des techniques d’optimisation que vous pouvez utiliser pour optimiser le chemin de rendu critique, il est important de discuter du processus de chargement initial du navigateur et de la raison pour laquelle le chemin de rendu critique est si important.

Et ce processus implique :

  • Préchargement des éléments de page.
  • Inline des styles critiques.
  • Différer le chargement des fichiers JavaScript.
  • Premiers indices.

Préchargement des éléments de page

Tout d’abord, lorsque la page est récupérée par le navigateur à partir du serveur, le navigateur analyse initialement et trouve tous les éléments de la page à télécharger. Par défaut, cela se produit dans un processus où le navigateur télécharge tous les éléments simultanément.

Mais que se passe-t-il lorsque vous avez de nombreux éléments de page à télécharger (comme ce qui se passe fréquemment avec un site Web WordPress ?) Eh bien, cela peut enliser les ressources du serveur, ce qui augmente encore le temps de chargement de la page.

Comment contourner cela ? En utilisant le lien de préchargement pour télécharger de manière asynchrone les fichiers critiques qui bloquent le rendu de la page (discuté plus loin dans cet article).

Le préchargement des éléments est une technique qui permet d’éliminer les feuilles de style bloquant le rendu, car elle charge les fichiers critiques nécessaires à la première étape de peinture du processus avant de charger tous les autres fichiers.

Vous pouvez précharger CSS, JS, Fonts ou Images. Voici des exemples de la façon de les précharger :

Préchargement JavaScript

<link rel="preload" as="script" href="https://www.searchenginejournal.com/eliminate-render-blocking-resources/466367/critical.js">

Préchargement CSS

<link rel="preload" href="https://www.searchenginejournal.com/eliminate-render-blocking-resources/466367/style.css" as="style" />

Préchargement des polices

<link rel="preload" href="https://www.searchenginejournal.com/eliminate-render-blocking-resources/466367/fonts/webfont.woff2" as="font" type="font/woff2" crossorigin />

Préchargement des images

<link rel=preload href="https://www.searchenginejournal.com/eliminate-render-blocking-resources/466367/cat.png" as=image image>

Cela permet d’accélérer le processus de la page. Cependant, ce n’est pas une méthode idéale.

La méthode idéale consiste à optimiser le site pour n’utiliser que deux à trois plugins, peut-être deux à trois autres fichiers, et à garder les choses au strict minimum pour le rendu de la page entière.

Malheureusement, ce n’est pas une entreprise réaliste à poursuivre.

Parce que les sites WordPress ont tendance à avoir de nombreux plugins et ressources que les développeurs ne veulent pas (ou ne veulent pas) gérer, le chemin le plus simple vers le succès est de s’assurer que ces ressources sont correctement optimisées en utilisant certains plugins.

Intégration des styles critiques

Le CSS critique est une technique qui extrait le CSS pour le contenu au-dessus de la ligne de flottaison afin de rendre le contenu à l’utilisateur aussi rapidement que possible.

Au minimum, cela nécessite généralement :

  • Toutes les déclarations de police.
  • Tout CSS spécifique à la mise en page.
  • Toutes les règles de style CSS pour les éléments DOM (document object model) au-dessus de la ligne de flottaison.

En utilisant notre exemple précédent de page chargeant toutes les ressources simultanément, l’intégration de styles critiques implique l’utilisation de code dans la balise HTML elle-même.

Si vous vérifiez, par exemple, le code source de google.com, vous le verrez intégré CSS critique dans la section du HTML.

Code source de Google.com.

Il existe plusieurs outils qui peuvent aider à extraire les CSS critiques.

  • Criticalcss.com.
  • Critique.
  • Plugin Webpack critique HTML.

Différer le chargement des fichiers JavaScript

En utilisant cette méthode, il est possible de différer le chargement des fichiers JavaScript jusqu’à ce que d’autres éléments critiques de l’arborescence DOM soient chargés. Cependant, cela vient avec quelques mises en garde.

Exemple de report d’un fichier JavaScript :

<script defer src="https://www.searchenginejournal.com/eliminate-render-blocking-resources/466367/script.js"></script>

Premièrement, vous pouvez avoir un impact négatif sur l’apparence du site lorsque vous différez le chargement des fichiers JavaScript, car certains d’entre eux pourraient être des éléments requis pour que la page se charge complètement.

Deuxièmement, si vous ne faites pas attention, en différant le chargement des fichiers JavaScript, vous pourriez potentiellement introduire des problèmes avec l’interactivité de la page (interaction avec la prochaine métrique Core Web Vitals).

Troisièmement, vous pouvez également introduire des problèmes avec le fonctionnement général du site.

L’idée est que vous devez être prudent lorsque vous travaillez sur ces types d’optimisations, afin de ne pas causer par inadvertance de problèmes ailleurs dans le processus.

Ce faisant, vous pouvez avoir un impact considérable sur la vitesse de votre page et sur la façon dont Google voit votre site.

L’autre préoccupation, cependant, est lorsque vous utilisez des plugins tels que Nitro pour différer des fichiers critiques comme CSS et JavaScript.

Bien que cela puisse avoir un impact positif sur la vitesse de la page, le problème majeur avec cela est que le plugin diffère tous les fichiers CRITICAL jusqu’à ce que la page ait chargé la partie HTML du document.

Qu’est-ce que ça veut dire? Cela signifie que Google ne peut pas voir l’intégralité du document tel qu’il est censé l’afficher. Cela revient à bloquer vos fichiers CSS et JavaScript à l’aide de robots.txt, dont Google a besoin pour déterminer si votre site est adapté aux mobiles.

La page officielle de Google Developer dit ceci, comme mentionné ailleurs :

« Pour un rendu et une indexation optimaux, autorisez toujours Googlebot à accéder aux fichiers JavaScript, CSS et image utilisés par votre site Web afin que Googlebot puisse voir votre site comme un utilisateur moyen.

Si le fichier robots.txt de votre site interdit l’exploration de ces éléments, cela nuit directement à la qualité du rendu et de l’indexation de votre contenu par nos algorithmes. Cela peut entraîner des classements sous-optimaux.

Si vous reportez des fichiers CSS et JavaScript critiques pour des raisons de référencement, tant que vous vous assurez que Google peut voir ces fichiers lors du chargement de la page, vous ne devriez pas rencontrer de problèmes majeurs avec la façon dont Google peut voir votre site.

Utilisation des premiers conseils pour une meilleure optimisation du serveur

Avant de pouvoir parler des premiers indices, nous devons discuter du processus de chargement d’une page Web par le serveur. Les sites sont en effet devenus plus sophistiqués ces dernières années.

Et donc, les serveurs aussi. Mais, il y a des limites. Même si les serveurs peuvent effectuer et effectuent des tâches triviales toute la journée, il est toujours possible qu’un serveur s’enlise en s’efforçant de trop réfléchir à la façon dont il gère les ressources d’un site.

Ainsi, lorsque cela se produit, une latence supplémentaire par rapport à ce qui se produirait autrement se produit – et cela se produit avant que le navigateur ne puisse commencer à afficher la page.

Lorsque cette latence se produit, vous pouvez vous retrouver dans des situations où un site peut prendre quelques secondes avant d’apparaître dans la fenêtre du navigateur.

Et s’assurer que votre serveur restitue correctement les fichiers est un excellent premier pas vers l’augmentation de la vitesse de votre page.

Voici un exemple de ce qui se passe lorsque votre serveur ne répond pas correctement et met trop de temps à traiter certaines ressources :

Premiers indices

Alors, comment fonctionnent les premiers indices ?

Selon le guide du développeur Google Chrome, « les premiers indices sont un code d’état HTTP (103 premiers indices) qui est utilisé pour envoyer une réponse HTTP préliminaire précise avant une réponse finale ».

Qu’est-ce que cela accomplit ?

Cela permet à un serveur de fournir certains types d’indices à un navigateur pour certaines ressources critiques (fichiers JavaScript, feuilles de style CSS, etc.) susceptibles d’être chargées et utilisées par la page Web elle-même.

Ce processus se produit en l’espace de quelques millisecondes ou moins pendant que le serveur travaille sur le rendu des ressources de la page principale.

Les premiers conseils sont quelque chose qui « aide un navigateur » et accélère le temps de réflexion du serveur en travaillant sur ce chargement à l’avance.

Pour cette raison, ce processus permet d’accélérer le temps de chargement de la page.

Des outils pour vous aider à optimiser votre chemin de rendu critique

N’êtes-vous pas un maître du code extraordinaire et vous êtes incapable de travailler avec et d’optimiser le code, les plugins et les éléments sous le capot de votre site Web ?

Eh bien, n’ayez crainte (trop!). Il existe des plugins WordPress disponibles qui peuvent vous aider à faire exactement cela.

Vous trouverez ci-dessous une liste d’outils que vous pouvez utiliser pour vous aider à optimiser votre propre chemin de rendu critique pour réussir :

  • Plugin CSS critique: Cet outil pratique vous permet de générer le CSS critique dont votre site a besoin. Ajoutez simplement votre URL, cliquez sur générer et c’est parti.
  • Plug-in d’optimisation automatique de la vitesse de la page : Ce plugin particulier est encore un autre plugin de vitesse de page qui vous permet également de différer les fichiers critiques. De plus, il aide à injecter du CSS en ligne dans l’en-tête de la page, reporte les scripts au pied de page et minimise vos fichiers HTML.
  • Plug-in de vitesse de page WP Rocket : Ce plugin de vitesse de page est l’un des plugins de mise en cache les plus puissants. Après l’installation, ce plugin particulier vous permet de profiter de la mise en cache des pages, de la compression GZIP, du préchargement du cache et de la mise en cache du navigateur.
  • WP-Optimiser : Il s’agit d’un plugin WordPress qui vous permet de faire plusieurs choses pour aider à mieux optimiser votre site pour des temps de chargement rapides. Ils incluent l’optimisation de votre base de données, la compression de vos images et la mise en cache de vos pages, ainsi que la minification et l’asynchronisation de vos fichiers CSS et JavaScript.

Veuillez noter : Cet auteur n’a aucun parti pris financier avec l’un de ces outils.

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 trois 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 la page entraînent 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 l’expérience de page sur le bureau en 2022, commençant son déploiement de l’expérience de page de bureau en février et se terminant en mars.

Selon Google, les trois mêmes métriques Core Web Vitals (LCP, FID et CLS), ainsi que leurs seuils associés, seront désormais liés au classement des ordinateurs de bureau.

En outre, Google travaille sur une toute nouvelle métrique Core Web Vitals, peut-être expérimentale, prenant en compte la durée maximale de l’événement et la durée totale de l’événement.

Leur explication de ces facteurs qu’ils envisagent sont les suivants :

Durée maximale de l’événement : la latence d’interaction est égale à la durée d’événement unique la plus longue 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énements, en ignorant tout chevauchement.

Avec de nombreuses études établissant un lien entre la réduction des temps de chargement des pages et l’amélioration de précieux KPI (conversions, taux de rebond, temps passé sur le 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 occupent une position unique pour guider cet effort, car notre rôle consiste souvent à 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.

Les objectifs de l’optimisation des ressources bloquant le rendu

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

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 l’expérience de la page et des scores Core Web Vitals.

Pourquoi améliorer le CSS bloquant le 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 des pages 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 est-ce?

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

Si un navigateur rend 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 se traduira par une page littéralement inutilisable.

La majorité du contenu devra être repeinte afin de paraître le moins du monde acceptable pour un utilisateur.

Comment éliminer les ressources bloquant le rendu

Si nous examinons le processus de rendu des pages, la case grise ci-dessous représente le temps de navigation nécessaire pour obtenir toutes les ressources CSS. De cette façon, il peut commencer à construire le DOM de CSS (ou arbre CCSOM).

Cela peut prendre entre une milliseconde et plusieurs secondes, selon ce que votre serveur doit faire pour charger ces ressources.

Il peut également varier, ce qui peut dépendre de la taille, ainsi que de la quantité, de ces fichiers CSS.

L’arborescence de rendu suivante montre un exemple de navigateur affichant tous les fichiers avec CSS dans le DOM :

Arbre de rendu DOM CSSOM.

De plus, ce qui suit montre un exemple de la séquence de 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, connue sous le nom de chemin de rendu critique. .

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

La recommandation officielle de Google indique ce qui suit :

«CSS est une ressource bloquant le rendu. Faites-le parvenir au client le plus tôt et le plus rapidement possible pour optimiser le temps de premier rendu.

Le HTML doit être converti en quelque chose avec lequel le navigateur peut fonctionner : le DOM. Les fichiers CSS sont de la même manière. Celui-ci doit être converti 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 afficher, ce qui contribue grandement à une expérience de page améliorée.

Pourquoi améliorer le JavaScript bloquant le rendu ?

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 rendre entièrement une page.

Donc, ce n’est pas vraiment une partie techniquement requise du rendu de la page.

Mais la mise en garde à cela est la suivante : la plupart des sites modernes sont codés de telle manière que JavaScript (par exemple, le framework Bootstrap JS) est requis pour rendre l’expérience au-dessus du pli.

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 l’exécution complète des fichiers JavaScript.

Cela peut être spécifié autrement en reportant les fichiers JavaScript pour une utilisation ultérieure.

Un exemple de ceci est s’il y a des fonctions JS comme une alerte qui est intégrée au HTML. Cela pourrait arrêter le rendu de la page jusqu’à l’exécution de ce code JavaScript.

JavaScript a le pouvoir exclusif 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 l’intégralité du contenu de la page. Ce délai est intégré au navigateur par défaut – pour un tel scénario « juste au cas où ».

Recommandation officielle de Google :

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

Comment identifier les ressources bloquant le rendu

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

  • Exécutez un test en utilisant 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 « Start Render ».

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

Exemple de rendu de démarrage.

Après avoir identifié une ressource (potentiellement) bloquant le rendu, testez sa suppression pour voir si le contenu au-dessus de la ligne de flottaison 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 le changement d’éléments sur le site affecte l’expérience.

Exemple de résultats de test de page Web montrant des ressources bloquant le rendu.

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 dont vous disposez en les combinant en un seul fichier et en les compressant.

L’amélioration de vos techniques de codage peut également se traduire par un fichier plus rapide à télécharger et ayant moins d’impact sur la vitesse de rendu de votre page.

Comment 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 afficher le contenu au-dessus de la ligne de flottaison, vous souhaiterez explorer une myriade de méthodes disponibles afin d’améliorer le rendu de votre page et différer les ressources non critiques.

Il existe de nombreuses solutions à ce problème, du report des fichiers JavaScript et CSS à la réduction de l’impact que CSS peut avoir.

Une solution possible consiste à ne pas ajouter de CSS à l’aide de la règle @import.

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 dans le HTML.

Minifiez vos fichiers CSS et JavaScript

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

Le processus de minification prend tous les espaces inutiles dans un fichier et le comprime 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é pour 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 homologues précédents, 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 les ressources de blocage sans rendu.

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 à première vue, ces fichiers de polices tiers prennent souvent plus de temps à se charger et peuvent contribuer à votre problème de ressources bloquant le rendu.

En raison des fichiers externes, le navigateur doit faire des demandes externes pour télécharger ces fichiers afin d’afficher votre page, ce qui peut entraîner des temps de téléchargement considérablement plus longs.

Si vous faites partie d’une équipe dont les meilleures pratiques de développement ne sont pas idéales, il peut être logique que vous disposiez de nombreux fichiers de polices tiers qui ne sont pas nécessaires au rendu de 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 dans Core Web Vitals.

L’utilisation de polices système, en revanche, ne conserve le traitement que dans le navigateur sans demandes externes.

En outre, il existe probablement des polices système très similaires aux polices tierces que vous utilisez.

Cependant, si vous devez absolument utiliser des polices tierces, vous devez faire deux choses pour atténuer les problèmes liés à certains aspects des polices tierces.

Premièrement, si elles sont utilisées conjointement avec le préchargement et l’échange de polices, les problèmes avec les polices tierces deviennent un non-problème.

L’autre problème lors de l’utilisation de polices tierces est que les polices sont invisibles jusqu’à ce que la police elle-même soit chargée, ce qui a un impact négatif sur Core Web Vitals et l’expérience utilisateur. Pour éviter cela, vous pouvez utiliser le CSS d’échange de polices.

Voici comment ça fonctionne: Le CSS Font-Swap explique au navigateur que le texte qui utilise une police particulière doit être affiché immédiatement en utilisant une police système. Une fois la police personnalisée prête, cette police personnalisée remplacera alors la police système. C’est la méthode la plus efficace que vous puissiez utiliser pour éviter les polices invisibles lors du chargement de la page.

The New Kid On The Block : polices variables

Depuis 2020, les polices variables sont devenues largement prises en charge dans la plupart des navigateurs. Que sont exactement les polices variables ?

Avec les polices variables, tous vos styles de police sont contenus dans un seul fichier. Mais avant que les polices variables ne deviennent monnaie courante, vous auriez besoin de plusieurs fichiers de polices distincts pour les polices.

L’utilisation de polices variables présente également plusieurs avantages, notamment :

  • Taille de fichier plus petite : Les polices variables ont une taille de fichier plus petite car il s’agit d’un fichier à police unique qui contient toutes les variations de largeur, de poids et d’autres attributs.
  • Une gamme de conception plus flexible : Avec d’autres types de polices, trois à cinq fichiers de polices différents sont nécessaires pour fournir chaque représentation du langage/de la voix de conception d’un site. Et cela inclut toutes les permutations d’en-têtes, de corps de texte, etc. Mais avec des polices variables, l’utilisation d’un seul fichier de police vous permet d’utiliser toutes les variations possibles qui pourraient être associées à la conception d’une police.
  • Moins et un seul fichier : En raison de ces économies de taille de fichier, cela aide à compresser davantage la taille de votre page et diminue la vitesse de votre page. Et l’avantage du fichier unique lui-même permet au webmaster de vraiment compresser encore plus la vitesse de sa page.

La documentation suivante parle des polices variables et comment les implémenter. En raison de leurs avantages, l’utilisation de polices variables est une alternative acceptable si vous devez absolument implémenter des polices tierces.

Améliorez vos techniques de codage et de combinaison de fichiers

Si vous travaillez vous-même avec du code, vous pouvez (ou non… personne ne juge ici) trouver que les techniques ne sont pas optimales.

Un exemple : vous utilisez partout le CSS en ligne, ce qui entraîne des problèmes de traitement et de rendu dans le navigateur.

La solution la plus 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 : disons que vous avez une page qui est codée en utilisant des techniques plus anciennes plutôt que des techniques modernes et plus légères.

Les techniques plus anciennes pouvaient 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.

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

Par exemple : si vous avez huit ou 10 fichiers JavaScript qui contribuent tous à la même tâche, vous pouvez engager un développeur qui peut combiner tous ces fichiers pour vous.

Et s’il s’agit de fichiers JavaScript moins critiques, alors pour diminuer encore les problèmes de rendu de page, ces fichiers peuvent également être différés en les ajoutant à la fin du code HTML sur 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.

Points clés à retenir

Si vous souhaitez créer votre propre processus pour rechercher et réduire les ressources bloquant le rendu, vous disposez désormais des outils pour le faire. Le processus est décrit comme suit :

  • Étape 1: Explorez votre site à l’aide de Screaming Frog ou d’autres outils d’exploration.
  • Étape 2: Identifiez les pages avec une vitesse de page lente.
  • Étape 2a : Vous pouvez également utiliser Google Search Console ou Google Analytics à cette fin.
  • Étape 3: Organisez les pages avec les performances les plus faibles que vous trouvez dans une liste prioritaire.
  • Étape 4: Parcourez les éléments de la liste de contrôle ci-dessus (vous pouvez également créer une feuille de calcul de chaque élément par page si vous préférez) et recherchez, réduisez ou réparez ces ressources bloquant le rendu si nécessaire.
  • Étape 5 : Rincez et répétez pour chaque page de votre site.

L’idée est de créer un processus facilement évolutif, facile à mettre en œuvre et qui peut vous mettre sur la voie du succès avec une vitesse de page beaucoup plus faible en conséquence.

Avec ce processus, vous aussi pouvez bénéficier de l’avantage que vous aurez, et vous pourriez également bénéficier d’un coup de pouce de Google Core Web Vitals.

L’identification et la réparation des ressources bloquant le rendu est un élément essentiel de l’optimisation de la vitesse que la plupart des audits comportent cette étape. Le raisonnement derrière cela est qu’ils aident à créer les meilleurs temps de rendu possibles pour vos pages de classement.

Google travaille constamment à améliorer la vitesse des pages. Mais il y a une chose qui a toujours été cohérente : plus la vitesse de votre page est rapide, mieux c’est.

En intégrant un processus évolutif où vous pouvez accomplir cela rapidement, il est possible de s’attaquer relativement facilement aux projets d’optimisation de la vitesse des pages, même les plus vastes et les plus complexes.

Et cela se traduit également par une meilleure expérience utilisateur.

En trouvant et en réparant les ressources bloquant le rendu, vous pouvez également améliorer la façon dont votre utilisateur expérimente votre site, et vous continuerez à satisfaire les visiteurs de votre site Web.

Après tout, garder votre site en parfait état pour les heures de grande écoute est l’objectif de tout ce travail d’optimisation !

Davantage de ressources:

  • Advanced Core Web Vitals : un guide technique de référencement
  • Différence entre le rapport CWV de la Search Console et PageSpeed ​​Insights
  • Core Web Vitals : un guide complet

Image en vedette : SuperOhMo/Shutterstock

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici