Quita el código JavaScript sin usar

El código JavaScript que no se utiliza puede disminuir la velocidad de carga de tu página:

  • Si JavaScript bloquea el procesamiento, el navegador debe descargar, analizar, compilar y evaluar la secuencia de comandos antes de continuar con el resto del trabajo necesario para renderizar la página.
  • Incluso si JavaScript es asíncrono (no bloquea el procesamiento), el código compite por el ancho de banda con otros recursos mientras se descarga, lo que tiene implicaciones importantes de rendimiento. El envío de código sin usar a través de la red también es un desperdicio para los usuarios de dispositivos móviles que no tienen planes de datos ilimitados.

Cómo falla la auditoría de JavaScript sin usar

Lighthouse marca todos los archivos JavaScript con más de 20 kibibytes de código sin usar:

Una captura de pantalla de la auditoría.
Haz clic en un valor de la columna URL para abrir el código fuente de la secuencia de comandos en una pestaña nueva.

Cómo quitar JavaScript sin usar

Detecta JavaScript sin usar

La pestaña Cobertura de las Herramientas para desarrolladores de Chrome te ofrece un desglose por línea del código que no se usa.

La clase Coverage de Puppeteer puede ayudarte a automatizar el proceso de detección de código sin utilizar y de extracción.

Herramienta de compilación que permite quitar código sin usar

Consulta las siguientes pruebas de Tooling.Report para descubrir si tu agrupador admite funciones que facilitan evitar o quitar el código que no se usa:

Orientación específica para pilas

Angular

Si usas Angular CLI, incluye mapas de origen en tu compilación de producción para inspeccionar tus paquetes.

Drupal

Se recomienda quitar los elementos de JavaScript que no se usen y solo adjuntar las bibliotecas de Drupal necesarias al componente o la página relevantes de una página. Consulta Cómo definir una biblioteca para obtener más detalles.

Joomla

Te recomendamos reducir o cambiar la cantidad de extensiones de Joomla que cargan código JavaScript sin usar en tu página.

Magento

Inhabilita el paquete de JavaScript integrado de Magento.

React

Si no estás renderizando el servidor, divide los paquetes de JavaScript con React.lazy(). De lo contrario, divide el código con una biblioteca de terceros, como loadable-components.

Vuelta

Si no estás renderizando el servidor y usas el router Vue, divide los paquetes por rutas de carga diferida.

WordPress

Puedes reducir o cambiar la cantidad de complementos de WordPress que cargan código JavaScript sin usar en tu página.

Recursos