JavaScript duplicado

A Silktide verifica se algum código que a sua página descarrega está incluído mais de uma vez. O código duplicado torna a página maior e mais lenta a carregar, sem acrescentar nada para o visitante.

O moderno é normalmente composto por muitos módulos pequenos que são agrupados numas poucas aplicações grandes. Quando vários pacotes são compilados de forma independente — por exemplo, o seu próprio código e um widget incorporado — cada um pode incluir a sua própria cópia do mesmo módulo, fazendo com que os visitantes descarreguem a mesma funcionalidade duas vezes.

Por que isso é importante

Cada módulo duplicado consome tempo de transferência, tempo de processamento e dados móveis, sem trazer qualquer benefício. Numa ligação rápida de escritório, o desperdício pode passar despercebido, mas os visitantes que utilizam telemóveis e redes mais lentas sentem-no diretamente, sob a forma de uma página que demora mais tempo a aparecer e a responder.

A duplicação também tende a crescer silenciosamente: cada novo script ou widget adicionado a um site pode trazer as suas próprias cópias de bibliotecas comuns, fazendo com que o desperdício se acumule ao longo do tempo, a menos que alguém procure por ele.

Como corrigir

Esta correção destina-se aos seus programadores, no processo de compilação do site e não no seu conteúdo:

Analise como o JavaScript do site é agrupado. A maioria das ferramentas de agrupamento tem um modo de análise que mostra visualmente o conteúdo de cada ficheiro de saída, facilitando a identificação de módulos duplicados.
Configure a compilação para eliminar dependências partilhadas duplicadas, para que uma biblioteca utilizada em vários locais seja incluída uma vez e partilhada, em vez de ser copiada para cada pacote.
Alinhe as versões: duas versões diferentes da mesma biblioteca não podem ser combinadas, pelo que atualizar tudo para uma única versão é frequentemente a verdadeira solução.
Se a duplicação vier de um script de terceiros que não pode recompilar, peça ao fornecedor uma compilação mais pequena ou substitua-o.

Como a Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e a localização de teste configurados para os seus testes de velocidade.
Examina os ficheiros JavaScript que a página descarrega e identifica os módulos que aparecem em mais de um ficheiro. As cópias são comparadas com base no que fazem, por isso são encontradas mesmo quando os ficheiros estão formatados ou de forma diferente.
Comunica cada módulo duplicado, os ficheiros em que aparece e o tamanho do descarregamento que poderia ser poupado ao remover as cópias adicionais.
Avalia a página pelo tamanho total do descarregamento desperdiçado: mesmo cerca de 10 KB de duplicação reduzem a classificação, e 50 KB ou mais são classificados como mau.

Resolução de problemas

Os dois ficheiros não contêm código idêntico

A verificação compara os módulos pelo que são e não pelo seu texto exato. O mesmo módulo pode parecer muito diferente em dois pacotes depois da minificação e, ainda assim, continuar a ser o mesmo código duplicado.

A duplicação está dentro de um script de terceiros

Não pode recompilar o pacote de outra pessoa. Comunique o problema ao fornecedor, carregue o script de outra forma que partilhe as suas dependências ou aceite o custo se o valor do script o justificar.