JavaScript dupliqué

Silktide vérifie si une partie du code que votre page télécharge est incluse plus d’une fois. Le code en double rend une page plus volumineuse et plus lente à charger, sans rien apporter au visiteur.

Le moderne est généralement assemblé à partir de nombreux petits modules regroupés en quelques gros fichiers. Lorsque plusieurs bundles sont construits indépendamment — par exemple votre propre code plus un widget intégré — chacun peut embarquer sa propre copie du même module, et les visiteurs finissent par télécharger deux fois la même fonctionnalité.

Pourquoi c’est important

Chaque module dupliqué coûte du temps de téléchargement, du temps de traitement et des données mobiles, et n’apporte rien en retour. Sur une connexion rapide au bureau, ce gaspillage peut être invisible, mais les visiteurs sur téléphone et sur des réseaux plus lents le ressentent directement sous la forme d’une page qui met plus de temps à apparaître et à répondre.

La duplication a aussi tendance à croître en silence : chaque nouveau script ou widget ajouté à un site peut apporter ses propres copies de bibliothèques courantes, si bien que le gaspillage s’accumule avec le temps à moins que quelqu’un ne le recherche.

Comment corriger le problème

Cette correction s’adresse à vos développeurs, dans le processus de build du site plutôt que dans son contenu :

Analysez la façon dont le JavaScript du site est bundlé. La plupart des bundlers disposent d’un mode d’analyse qui visualise le contenu de chaque fichier de sortie, ce qui rend les modules dupliqués faciles à repérer.
Configurez le build pour dédupliquer les dépendances partagées, afin qu’une bibliothèque utilisée à plusieurs endroits ne soit incluse qu’une seule fois et partagée, plutôt que copiée dans chaque bundle.
Alignez les versions : deux versions différentes de la même bibliothèque ne peuvent pas être fusionnées ; mettre tout à niveau vers une seule version est souvent la véritable solution.
Si la duplication provient d’un script tiers que vous ne pouvez pas reconstruire, demandez au fournisseur un build plus léger, ou remplacez-le.

Comment Silktide teste cela

Charger la page dans un navigateur réel, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Examiner les fichiers JavaScript que la page télécharge et identifier les modules qui apparaissent dans plus d’un fichier. Les copies sont mises en correspondance selon leur comportement, de sorte qu’elles sont trouvées même lorsque les fichiers sont formatés ou différemment.
Signaler chaque module dupliqué, les fichiers dans lesquels il apparaît, et la taille de téléchargement qui pourrait être économisée en supprimant les copies supplémentaires.
Noter la page en fonction de la taille totale de téléchargement gaspillée : même environ 10 Ko de duplication dégrade la note, et 50 Ko ou plus est jugé médiocre.

Dépannage

Les deux fichiers ne contiennent pas exactement le même code

Cette vérification associe les modules selon ce qu’ils sont, et non selon leur texte exact. Le même module peut paraître très différent dans deux bundles après minification, tout en restant le même code dupliqué.

La duplication se trouve dans un script tiers

Vous ne pouvez pas reconstruire le bundle de quelqu’un d’autre. Remontez le problème au fournisseur, chargez son script d’une autre manière qui partage vos dépendances, ou acceptez le coût si la valeur du script le justifie.