JavaScript duplicado
Silktide comprueba si parte del código que tu página descarga está incluido más de una vez. El código duplicado hace que la página sea más pesada y más lenta de cargar, sin aportar nada al visitante.
El moderno suele ensamblarse a partir de muchos módulos pequeños que se agrupan en pocos archivos grandes. Cuando varios paquetes se construyen de forma independiente —por ejemplo, tu propio código más un widget incrustado—, cada uno puede incluir su propia copia del mismo módulo, y los visitantes acaban descargando la misma funcionalidad dos veces.
Por qué es importante
Cada módulo duplicado cuesta tiempo de descarga, tiempo de procesamiento y datos móviles, y no aporta nada a cambio. En una conexión rápida de oficina el desperdicio puede pasar desapercibido, pero los visitantes en móviles y redes más lentas lo notan directamente como una página que tarda más en aparecer y responder.
La duplicación también tiende a crecer silenciosamente: cada script o widget nuevo que se añada a un sitio puede traer sus propias copias de bibliotecas comunes, de modo que el desperdicio se acumula con el tiempo si nadie lo vigila.
Cómo solucionarlo
Esto lo deben abordar tus desarrolladores, en el proceso de construcción del sitio más que en su contenido:
- Analiza cómo se agrupa el JavaScript del sitio. La mayoría de herramientas de empaquetado tienen un modo de análisis que visualiza qué contiene cada archivo de salida, lo que facilita detectar los módulos duplicados.
- Configura la compilación para deduplicar las dependencias compartidas, de modo que una biblioteca usada en varios lugares se incluya una sola vez y se comparta, en lugar de copiarse en cada paquete.
- Alinea las versiones: dos versiones distintas de la misma biblioteca no se pueden fusionar, por lo que actualizar todo a una única versión suele ser la solución real.
- Si la duplicación proviene de un script de terceros que no puedes reconstruir, pide al proveedor una compilación más ligera o sustitúyelo.
Cómo lo comprueba Silktide
- Carga la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
- Examina los archivos JavaScript que la página descarga e identifica los módulos que aparecen en más de un archivo. Las copias se detectan por lo que hacen, por lo que se encuentran incluso cuando los archivos están formateados o de forma diferente.
- Se informa de cada módulo duplicado, de los archivos en los que aparece y del tamaño de descarga que podría ahorrarse al eliminar las copias adicionales.
- Se califica la página según el tamaño total de descarga desperdiciado: incluso unos 10 KB de duplicación bajan la nota, y 50 KB o más se califican como deficientes.
Solución de problemas
Los dos archivos no contienen código idéntico
La comprobación identifica los módulos por lo que son, no por su texto exacto. El mismo módulo puede parecer muy diferente en dos paquetes tras la minificación y, aun así, ser el mismo código duplicado.
La duplicación está dentro de un script de terceros
No puedes reconstruir el paquete de otra persona. Plantea el problema al proveedor, carga su script de otra forma que comparta tus dependencias o acepta el coste si el valor del script lo compensa.