Réduisez la profondeur des demandes critiques

Réduire la profondeur des demandes critiques. Ok Google, c’est sympa de m’annoncer cela mais qu’est ce que cela signifie et comment je fais moi pour la réduire cette profondeur ? On fait le point pour vous aider à améliorer la performance de votre site Internet.

Qu’est-ce qu’une demande critique ?

Si l’on veut pouvoir aller plus loin, il va falloir commencer par répondre à cette question : qu’est-ce qu’une demande critique ?

Une demande critique pour une page, c’est l’appel d’un fichier qui est jugée comme obligatoire pour l’affichage de celle-ci. Sans ce fichier, impossible d’afficher la page correctement. Le plus souvent, on parle de dépendance, qui parait un peu plus explicite, mais bon, vous connaissez Google, ils aiment bien créer des termes qui font très techniques…. Bref, il faudra donc attendre que ce fichier soit entièrement chargé pour que votre navigateur puisse afficher le résultat attendu. Cela peut correspondre à un fichier CSS, pour la mise en forme de votre page, un fichier JS pour gérer par exemple des comportement sur votre page ou encore une police d’écriture (fichiers .woff, .woff2, .eot ou .otf). Vous imaginez bien que cela peut avoir un impact direct sur le temps de chargement de votre page web et donc réduire la performance de votre site web.

Comment réduire ces demandes ?

Nous sommes là sur un niveau de technicité avancé, si le chargement de ce fichier est nécessaire pour l’affichage de la page, c’est qu’il doit être important. D’ailleurs, l’est-il vraiment ? Ce serait sans doute la première question à se poser. Vous pouvez peut être simplement retirer ce fichier de votre page web s’il la fonctionnalité apporté n’est pas primordiale.

Ce fichier est important ou vous ne pouvez pas jugé s’il l’est ou non ? Google nous conseille alors 2 choses :

Réduire la longueur des chaînes et la taille de téléchargement des ressources

Réduire la longueur des chaînes revient à essayer de minifier et de compresser vos fichiers pour qu’ils soient un peu moins lourd. Cela revient quasiment mot pour mot à réduire la taille de téléchargement de vos fichiers. Entrons dans le détail.

Minifier correspond à retirer l’ensemble des espaces ou des retours à la ligne non nécessaires sur vos fichiers, notamment les fichiers .css ou les fichiers .js. Quand vous utilisez des ressources minifiées, elles ont souvent l’utilisation du « .min. » dans leur nomenclature. Vous pouvez trouver des sites Internet qui vous proposeront de s’occuper de minifier vos fichiers. Il s’agira alors de les remplacer sur votre site Internet. Si vous utilisez WordPress ou une autre solution open source, vous trouverez des plugins qui vous proposerons de minifier vos fichiers.

Compresser les fichiers revient à utiliser des applications qui vont tenter de réduire la taille des fichiers en utilisant des algorithmes. Encore une fois, vous trouverez sans doute des plugins ou des sites Internet qui s’occuperont de cela pour vous.

Attention tout de même, si vous vous lancez dans la minification de fichiers ou leur compression, testez toujours le résultat sur votre site, en ayant pris soin de vider votre cache auparavant, avant de vous assurer que votre site a toujours le comportement ou le design attendu.

Reporter le téléchargement de ressources inutiles

Bon là, je pense que c’est Gérard de chez Google qui y est allé un peu vite sur la traduction. Si c’est une ressource inutile, on pourrait tout simplement supprimer cette ressource. Parlons plutôt de ressource non prioritaire ou bloquante. Alors comment rendre une ressource non bloquante ? Voici la solution en fonction du type de fichier.

  • Pour une typographie, il s’agit d’indiquer que la page peut être affichée dans un premier temps avec une typographie alternative, le temps qu’elle soit entièrement téléchargée. On passe par une propriété CSS que l’on appelle le font-display. Voici un lien qui vous explique de quoi il s’agit : Font-display On passera donc sa typo en font-display:swap. Si vous utilisez une Google Font, il s’agit d’une nouvelle fonctionnalité qui a été intégrée en mai 2019 sur l’outil. Vérifiez que l’url appelée comprend bien ce petit bout de code à la fin de son url : « &display=swap » ou ajouter le vous même. Cela devrait faire le job.
  • Pour les fichiers .css, il faut séparer le style qui est utilisé pour mettre en forme le CSS du haut de la page, au dessus de ce que l’on appelle la limite de flotaison, du reste du css. C’est ce que l’on appelle générer le critical CSS. Il existe des sites Internet qui vous proposeront cette fonctionnalité mais il ne répondent par toujours bien à la demande et il faudrait le générer pour chacune de vos pages. L’idéal serait plutôt de penser cela au moment du développement de votre site Internet.
  • Pour le JS, il faut analyser au cas par cas. La plus part du temps, la chargement d’un fichier .js peut être reporté à la fin de la page, car il gère les interactions de l’utilisateur avec la page, et ne présente donc aucun intérêt tant que l’utilisateur n’a pas chargé la page. Mais il peut être aussi intéressant de commencer son téléchargement dès le début en parallèle du chargement de la page. On parle alors de chargement asynchrone. Dans tous les cas, ne pas essayer cela si l’on a pas une bonne connaissance en développement web.

La profondeur des demandes critiques, un travail d’expert

Si vous avez lu tout cet article, vous aurez sans doute compris que réduire la profondeur des demandes critiques peut s’avérer relativement complexe et est à réserver à des experts. Vous trouverez sans doute d’autres points que vous pourrez améliorer vous même. N’hésitez pas à nous solliciter pour vous aider à corriger se point et à améliorer la performance de votre site Internet.