JavaScript en double

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 inclure sa propre copie du même module, et les visiteurs finissent par télécharger deux fois une fonctionnalité identique.

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 par une page qui met plus de temps à s'afficher et à répondre.

La duplication a aussi tendance à croître discrètement : chaque nouveau script ou widget ajouté à un site peut apporter ses propres copies de bibliothèques courantes, de sorte que le gaspillage s'accumule au fil du temps à moins que quelqu'un ne le repère.

Comment corriger

Cette correction concerne vos développeurs, dans le processus de compilation du site plutôt que dans son contenu :

Analysez comment le JavaScript du site est regroupé. La plupart des outils de regroupement proposent un mode d'analyse qui visualise le contenu de chaque fichier de sortie, ce qui rend les modules dupliqués faciles à repérer.
Configurez la compilation pour dédupliquer les dépendances partagées, de sorte qu'une bibliothèque utilisée à plusieurs endroits soit incluse 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, donc mettre à niveau le tout 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 une version plus légère ou remplacez-le.

Comment Silktide teste cela

Charger la page dans un véritable navigateur, 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 rapprochées selon ce qu'elles font; elles sont donc 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.
Évaluer la page selon la taille totale de téléchargement gaspillée : même environ 10 Ko de duplication fait baisser la note, et 50 Ko ou plus est considéré comme médiocre.

Dépannage

Les deux fichiers ne contiennent pas un code identique

La vérification rapproche les modules selon ce qu'ils sont, et non selon leur texte exact. Le même module peut sembler 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. Signalez-le au fournisseur, chargez leur script d'une autre manière qui partage vos dépendances, ou acceptez le coût si la valeur du script dépasse ce coût.