Saltar al artículo
Performance20 oct 20264 min de lectura

JavaScript no utilizado: qué eliminar y qué investigar

Lea la cobertura de JavaScript sin interrumpir funciones útiles. Rastree un script, verifique otros estados y compare los resultados de carga e interacción.

Módulos JavaScript activos conectados a una página y bloques sin usar apartados

Un informe de cobertura de JavaScript muestra qué código se ejecutó durante el periodo observado. El código no ejecutado al cargar la página puede ser necesario para un menú, el proceso de compra u otra ruta. Utilice el informe para elegir qué investigar y compruebe los recorridos afectados antes de modificar el paquete.

Empiece por el recurso y las condiciones

Ejecute Milten JS Scanner para la página que desea investigar. Guarde la URL, la fecha y las condiciones de la prueba junto con el resultado. El escáner observa una carga de página sin hacer clic ni desplazarse. Informa sobre la carga de scripts, la cobertura y los errores de JavaScript; no demuestra que un archivo sea innecesario en todo el sitio.

Compare los datos de carga de un archivo con los de ejecución de su código. Un volumen elevado de transferencia, una ejecución prolongada y una proporción alta de código no ejecutado son observaciones distintas. Un script puede descargarse rápidamente y aun así mantener ocupado el hilo principal. Si un archivo no se cargó, esa prueba no aporta una medición útil de su ejecución.

Siga un ejemplo de pago ilustrativo

Supongamos que app.js contiene código tanto de la página de destino como del proceso de compra. La función de compra no se ejecuta al abrir la página de destino. Es un ejemplo didáctico, no un resultado medido en un cliente.

Localice la URL del recurso y compruebe cómo lo importa la página. Abra el proceso de compra, utilice el menú y visite otras páginas que compartan el paquete. Registre las acciones probadas. En Chrome DevTools Coverage, la grabación puede continuar mientras interactúa con la página. Esa observación abarca más que un análisis limitado a la carga inicial.

Si el proceso de pago necesita el código, eliminarlo interrumpiría una acción útil. Puede que valga la pena investigar la carga de esa función cuando el usuario llega al pago. La decisión depende de la aplicación y de los efectos en la siguiente interacción.

Utilice mapas fuente cuando estén disponibles

Un mapa fuente puede conectar un paquete generado a módulos fuente. La vista del módulo Milten depende de un mapa válido y compatible que el escáner pueda leer. Un mapa ausente deja esa parte del informe incompleta. Los hallazgos de recursos y errores aún pueden ayudar a localizar un problema.

Si no dispone de un mapa de fuentes utilizable, examine la ruta de importación del recurso y el resultado de la compilación. La ausencia de la vista de módulos no demuestra que se haya ejecutado todo el código. La guía de mapas de fuentes de MDN explica la relación entre el código generado y el original.

Haga un cambio y pruebe el recorrido afectado

Elija una oportunidad confirmada, como separar una función que se utiliza con poca frecuencia o retrasar una integración opcional. Mantenga el cambio lo suficientemente pequeño como para comparar. Verifique que la función requerida aún funcione, que no aparezcan nuevos errores de la consola y que la red cargue los archivos deseados.

Utilice Speed Scanner para comprobar la carga e INP Scanner para investigar una interacción lenta. El TBT y las tareas largas de la carga inicial no miden lo mismo que el INP de visitas reales. Si se acumulan objetos tras navegar repetidamente, utilice Memory Leaks y reproduzca el recorrido indicado.

Compare pruebas en condiciones equivalentes

Repita la misma URL bajo las mismas condiciones de dispositivo, red y caché. Conserve ambos informes y registre qué interacciones probó manualmente. Verifique la compilación de producción después de publicar el cambio de código; un paquete de desarrollo puede comportarse de manera diferente.

¿Puedo eliminar todos los bytes no ejecutados?

No, el resultado describe un intervalo de observación, no todos los estados posibles de la aplicación. Pruebe las acciones relevantes y las rutas compartidas antes de eliminar el código.

¿Un paquete más pequeño garantiza una página más rápida?

No, el orden de carga, la respuesta del servidor, la ejecución y las interacciones posteriores también importan. Compare el recorrido del usuario y el tamaño del archivo.

Analizar el JavaScript de una página. Para conocer el contexto de carga más amplio, lea velocidad del sitio web y SEO.

Velocidad de tu sitio web

Descubre qué ralentiza tu sitio web

Analiza tu página con Milten para conocer sus Core Web Vitals y recibir recomendaciones para acelerar la carga.

Analizar tu sitio web
Cookies

Usamos cookies

Usamos cookies para ofrecerte una mejor experiencia en nuestro sitio. Puedes obtener más información sobre cómo usamos las cookies en nuestra política de privacidad.

JavaScript no utilizado: interpretar la cobertura y verificar los cambios