JavaScript sin usar
Silktide carga tus páginas en un navegador real y mide cuánta parte de cada script se ejecuta realmente mientras la página se carga. Los scripts con una gran cantidad de código sin usar se informan junto con el ahorro potencial.
Por qué es importante
El sin usar les cuesta el doble a tus visitantes: una vez para descargarlo y otra mientras el navegador analiza y compila código que nunca se ejecuta. En móviles, ese segundo coste predomina: un teléfono de gama media puede emplear varias veces más tiempo en procesar un script que en descargarlo, durante el cual la página no puede responder a toques ni al desplazamiento.
El código sin usar se acumula del mismo modo que el CSS sin usar: los frameworks y las bibliotecas incluyen funciones que no utilizas, y el código antiguo rara vez se elimina. Cada visitante lo paga en cada visita a la página.
Cómo solucionarlo
- Elimina scripts que la página ya no necesita, incluidas las etiquetas de servicios que has dejado de usar.
- Divide los paquetes grandes para que cada página cargue solo el código que utiliza. Las herramientas de compilación modernas admiten la división de código, que lo hace automáticamente.
- Carga el código de funciones por debajo del pliegue o bajo demanda —modales, reproductores, widgets— solo cuando se necesiten, en lugar de hacerlo por adelantado:
\/\/ Carga el widget de chat solo cuando el visitante lo solicita
button.addEventListener('click', async () => {
const { openChat } = await import('.\/chat.js');
openChat();
});
Cómo lo prueba Silktide
- Cargar la página en un navegador real y registrar qué partes de cada script se ejecutan mientras se carga la página.
- Para cada script, medir cuántos de sus bytes nunca se ejecutaron.
- Informar de cada script con desperdicio significativo, mostrando su tamaño actual, el porcentaje sin usar y los bytes que podrías ahorrar.
Solución de problemas
El código se ejecuta, pero no durante la carga de la página
La medición cubre la carga inicial. El código que solo se ejecuta más tarde —validación de formularios, manejo de menús, funciones tras clics— cuenta como sin usar aunque la página lo necesite finalmente. Ese código es un buen candidato para cargarse bajo demanda en lugar de por adelantado.
El código sin usar está en un script de terceros
Normalmente no puedes recortar el paquete de otra persona, pero sí puedes controlar cuándo se carga. Consulta Código de terceros y Fachadas para código de terceros para conocer enfoques.