Comment réduire les ressources Javascript inutilisées ?

“Réduisez les ressources JavaScript inutilisées”, c’est l’une des recommandations les plus fréquentes sur PageSpeed Insights. Notamment lorsque votre LCP est trop élevé ! Si elle fait partie de vos recommandations, vous êtes au bon endroit. Outre vos images, ce sont souvent vos fichiers JavaScripts qui alourdissent le poids de vos pages. Depuis 2013, le poids médian de celles-ci a été multiplié par 4, sur mobile, d’après HTTP Archive. D’ailleurs, c’est le deuxième type de contenu en termes de taille :

Source

Et, depuis leur avènement, des frameworks Javascript principalement destinés à améliorer la Developer Experience ont accentué l'importance prise par le JS (comme en témoigne ce graphique), et donc l'impact sur les performances des pages. Mais c'était sans compter leur impact sur le poids des pages et sur les temps de chargement !

Alors, au lieu d’améliorer l’UX, ces fichiers Javascript peuvent la dégrader et rallonger les temps de chargement : s’ils ne sont pas chargés correctement, plus ces scripts sont nombreux, plus le rendu de votre page peut être bloqué. Par exemple, pour chaque script JS déclaré comme synchrone dans la page, le navigateur arrête le chargement de la page jusqu’à la fin du téléchargement et de l’exécution de ces fichiers !

Dans tous les cas, même si vos scripts sont chargés de façon non bloquante, il faut à un moment les exécuter. Et plus vous avez de JS, plus cette exécution prend du temps. Et comme le navigateur ne sait faire qu’une chose à la fois, pendant ce temps, votre utilisateur navigue moins bien : la page “freeze” ou alors, elle ne réagit plus du tout…

C’est non seulement problématique pour vos utilisateurs, mais cela se reflète aussi dans vos résultats Lighthouse et Page Speed Insights : votre TBT sera plus élevé. Et au niveau des Core Web Vitals qu’on retrouve dans le CrUX, c’est votre FID / INP qui sera cette fois dégradé.

Pour éviter ça, consultez les recommandations de cet article pour optimiser l’affichage de vos JS et améliorer la performance de vos pages.

Comment le JS peut ralentir vos pages ?

Vous le savez : toutes les ressources intégrées à la page prennent du temps à être analysées, puis chargées. Alors si elles ne sont pas nécessaires, elles dégradent vos performances sans raison. C’est donc du temps et du poids que vous pouvez économiser sur vos temps de chargement !

Et bien que le JavaScript permet d’ajouter de l’interactivité et rendre votre site plus agréable pour vos utilisateurs… S’il est chargé trop tôt, que les fichiers sont très nombreux, s’ils sont sur un autre domaine ou encore qu’il nécessite beaucoup de temps pour être chargé, votre expérience utilisateur en sera dégradée.

Pour rappel, à chaque fois que vous voulez afficher une page, voici ce qui se déroule :

le navigateur analyse le code HTML afin de construire le DOM ;
à la rencontre d’un fichier JavaScript (JS), la construction du DOM est interrompue,
l’analyseur récupère le script, l’exécute puis continue son analyse du code HTML.

Effectivement, le navigateur affiche les éléments d’une page selon leur ordre dans le fichier HTML. L’endroit où se trouve votre Javascript a une conséquence directe sur le rendu de la page, la vitesse de chargement et aussi sur l’expérience utilisateur. Pour charger le JS, le navigateur doit charger le script, parser (l’analyser), puis l’exécuter. Nous avons expliqué ce processus dans un article dédié au chargement des JS.

La répercussion directe : le rendu de la page est bloqué et votre utilisateur devra attendre pour voir le contenu qui devait s’afficher ! Le JavaScript a donc un impact direct sur la vitesse de chargement.

Ces fichiers JavaScripts bloquants pour votre navigateur

Avant de vous lancer dans l’optimisation de vos JavaScripts inutilisés, faisons un point sur ces JS qui bloquent le rendu.

Le javascript synchrone

Avec l’attribut <sync>, l'exécution des JavaScript est bloquante. Au moment où le navigateur détecte un script sync dans la page HTML qu'il analyse, il doit suspendre la construction du DOM. Puis, il télécharge le script, laisse le Javascript s’exécuter, avant de terminer la construction du DOM. On retrouve fréquemment cette méthode appliquée aux scripts d'A/B testing, assurant ainsi que l'effet de flickering est évité.

La limite du JS asynchrone

Contrairement à ce que vous pouvez penser, les JavaScripts déclarés en <async> peuvent aussi être responsables d’un blocage de rendu. Même s’ils n’interrompent pas le chargement du code HTML (ils sont téléchargés en parallèle), ils peuvent devenir bloquants, car une fois téléchargés, le navigateur les exécute directement.

Et c’est là l'une des limites du JS asynchrone : l’analyse du code est arrêtée, ainsi que les autres scripts qui devaient être exécutés, et le rendu de la page également.

Comme le navigateur exécute les JS une fois téléchargés, il ne suit plus l’ordre du code. Et plus le nombre de scripts async est élevé, plus vous risquez de bloquer votre main thread avoir un Time to interactive plus long !

Avoir recours (trop) fréquemment au JavaScript asynchrone peut donc dégrader votre UX. Comme toutes les ressources inutilisées sur votre site, elles sont handicapantes pour tous les utilisateurs qui naviguent dans de mauvaises conditions.

Pour aller plus loin, consultez notre article sur les risques d’utilisation systématique du JS asynchrone. Passons à présent aux méthodes et techniques que vous pouvez utiliser pour réduire vos fichiers JS inutilisés.

Réduire ses fichiers JavaScripts inutilisés : mode d’emploi

Commencez par identifier tous les Javascripts inutilisés

À l’aide de l’outil Coverage dans Chrome DevTools, vous pouvez d’abord analyser fichier par fichier quels sont ceux qui ont le plus de code inutilisé et ensuite afficher pour chaque fichier toutes les lignes de code non utilisées (CSS et JavaScript). Celles qui sont utilisées s’affichent en vert, celles non utilisées s’affichent en rouge.

En utilisant la classe Coverage de Puppeteer, vous pourrez automatiser le processus de détection (et d’extraction) des lignes de code non utilisées. Dans l’exemple ci-dessous, les lignes 55 à 57 sont utilisées et 65 à 67 sont inutilisées. Elles devraient donc être supprimées.

Équipez-vous d’un build tool pour supprimer les lignes de codes inutilisées

Les build tools sont des atouts essentiels dont vous devez vous équiper pour nettoyer votre code en général. Concernant les scripts, consultez Tooling.Report pour tester et trouver l’outil adapté à votre cas, votre environnement, vos habitudes, mais on peut citer plusieurs classes d’outils :

si vous avez de nombreuses dépendances, utilisez Code Splitting pour regrouper vos bibliothèques ou vos modules dans des paquets partagés. Vous réduirez ainsi le temps de chargement et économiserez de l'espace de stockage.
réduisez la taille de vos fichiers en fonction des contraintes du réseau et du navigateur plutôt que de la structure de l'application avec Unused Code Elimination. Vous pourrez également supprimer les lignes de codes inutilisées.
Éliminez les lignes de codes ou modules inutilisés avec Unused Imported Code, qu’ils soient dans le code ou importés par d’autres modules.

Utilisez des recommandations spécifiques à votre stack

Troisième catégorie de conseil pour alléger votre code et réduire vos JavaScripts inutilisés : faites du spécifique selon votre stack, par exemple :

Avec Angular, incluez des "source maps" dans la construction de production d'une application Angular CLI afin d'inspecter les bundles. La technique des Source Maps est d’ailleurs valable Quelle que soit la stack utilisée.
Drupal : supprimez tous les éléments JS inutilisés et n’utilisez que les librairies Drupal nécessaires pour la page (ou la partie de page). Pour aller plus loin, aidez-vous des librairies Drupal.
Joomla : pensez à réduire ou changer le nombre d’extensions joomla qui chargent des scripts sur votre page.
Si vous utilisez Magento, pensez à désactiver les Javascript intégrés.
React : si vous n’utilisez pas le server-side rendering, divisez le nombre de vos fichiers javascript utilisés avec React.lazy(). Sinon, vous pouvez aussi fractionner votre code avec une bibliothèque third parties comme loadable-components
Avec Vue, et notamment le Vue router, si vous n’utilisez pas le server-side rendering, fractionnez vos scripts regroupés en lazyloadant certains chemins d’accès.
Sur WordPress, réduisez ou changez le nombre de plugins qui chargent des javascripts non utilisés sur votre page.

Exécutez les scripts plus tard avec le Smart JS

Pour finir, il existe des solutions pour prioriser vos scripts les plus pertinents et les afficher seulement en temps voulu. S’ils ne sont pas indispensables pour le rendu de la page et qu’ils peuvent être exécutés après son chargement, il vaut mieux les prioriser pour plus tard.

C’est le fonctionnement même de notre Smart JS. Elle est notamment utile pour vos scripts qui ont un impact sur l’interactivité. Cette fonctionnalité agit comme un orchestrateur qui priorise ce qui est réellement utile pour le premier affichage. Bien sûr, si les attributs async et defer sont utilisés, le Smart JS les prend en compte.

Cette fonctionnalité répondra parfaitement à votre besoin d’épurer votre code et de prioriser vos fichiers JS. Par ailleurs, si votre score PageSpeed est fortement impacté par ces fichiers, n’hésitez pas à faire le ménage, supprimer les ressources inutilisées et nettoyer votre code. Les temps de chargement seront réduits et vos utilisateurs vous en remercieront !

Comme pour vos images (ou vos fichiers CSS), les Javascripts (qu’ils soient first party ou third parties) sont là pour améliorer l’expérience utilisateur. Mais, ils peuvent par la même occasion dégrader cette expérience s’ils prennent du temps à charger ou qu’ils sont trop lourds (car trop nombreux et mal ordonnés). Ainsi, suivre cette recommandation PageSpeed Insights peut être efficace dans un premier temps. Mais vous devrez répéter l’opération sur chacune de vos pages et vérifier l’intégralité du code de votre site.

Pour éviter cela, rien de mieux que l’automatisation ! En choisissant notre moteur, vous pourrez implémenter intelligemment les recommandations adaptées à votre cas, proposer la meilleure UX possible à vos utilisateurs et assurer vos revenus.