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 ? Vous n’êtes pas le seul à recevoir cet recommandation après un test sur Google PageSpeed Insights ou sur LightHouse. Et Ce n’est pas la recommandation la plus simple à mettre en oeuvre. On fait le point pour vous aider à améliorer la performance de votre site Internet.

Mais présentons-nous dans un premier temps. Nous sommes l’agence 36 Pixels, spécialisée notamment dans l’optimisation des webPerfs, c’est à dire l’amélioration du temps de chargement des sites Internet. Vous pouvez faire appel à nous pour vous aider à améliorer la vitesse de votre site Internet, ou parcourir cet article et les autres sur l’optimisation web et vous lancer en solo.

Voici le programme de cet article :

• Définition d’une demande critique
• Réduire les demandes critiques sur un site web
• Optimiser les demandes critiques sous WordPress
• Notre méthodologie au sein de 36 Pixels

Définition d’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 :

1. 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.

2. 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. Pour aller un peu plus loin dans les explications, sans devenir trop technique, il faut utiliser la méthode async ou defer. Dans tous les cas, ne pas essayer cela si l’on a pas une bonne connaissance en développement web. En attendant un article un peu plus technique mais plus complet sur le sujet, voici le type de code à utiliser sur du JS.

<script src="main.js" async></script>
// ou 
<script src="defer.js" async></script>

Réduisez les demandes critiques sous WordPress

Sous WordPress, pour réduire les demandes critiques, il faudra soit passer par le code source de votre thème (et de vos plugins), soit passer par des plugins pour pourront tenter de régler cela à votre place.

• Pour le CSS, il n’existe pas de solution simple pour mettre en place du critical CSS. Le plugin payant WP Rocket est semble t’il le seul à pouvoir vous aider simplement aujourd’hui.
• Pour les polices web, nous avons écrit tout un article sur l’optimisation des polices web et le non blocage du rendu. Cela pourra vous aider 😉
• Enfin, pour le JS, voici un plugin qui pourrait vous aider : Async JavaScript. Prenez le temps de tester chacune de vos modifications, le site pourrait être totalement buggé à la moindre modification

Notre méthodologie au sein de l’agence

Réduire la profondeur des demandes critiques demande pas mal de précautions, vous l’aurez compris.

1. Commencer par l’optimisation des polices, qui est assez simple. Voir l’optimisation des typographies.
2. Pour le CSS, le mieux est de le coder de nouveau en partie, en essayant de séparer le critical CSS, du reste de la feuille de style
3. Pour le JS, le sujet les plus sensible, il faut y aller pas à pas, en testant le report de l’interprétation de chaque fichier un à un, en testant les fonctionnalités associées sur le front.

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. Pour accélérer le temps de chargement de vos pages, 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.