Cómo eliminar el JavaScript que no se utiliza
El JavaScript que no se utiliza puede reducir la velocidad de carga de la página:
- Si el JavaScript es para bloquear la renderización, el navegador debe descargar, analizar, compilar y evaluar el script antes de que pueda proceder con el resto del trabajo que se necesita para renderizar la página.
- Incluso si el JavaScript es asíncrono (es decir, no bloquea la renderización), el código compite por el ancho de banda con otros recursos mientras se descarga, lo cual tiene implicaciones muy importantes para el rendimiento. Asimismo, enviar el código que no se utiliza mediante la red es un derroche para los usuarios de dispositivos móviles que no disponen de planes de datos ilimitados.
Cómo falla la auditoría del JavaScript que no se utiliza #
Lighthouse etiqueta cada archivo de JavaScript con más de 20 kibibytes de código sin utilizar:
Cómo eliminar el JavaScript que no se utiliza #
Detectar el JavaScript que no se utiliza #
La pestaña Cobertura en Chrome DevTools puede darle un análisis línea por línea del código que no se utiliza.
La clase Coverage de Puppeteer puede ayudarle a automatizar el proceso para detectar códigos que no se utilizan y extraer el código utilizado.
Cómo crear una herramienta de respaldo para eliminar el código que no se utiliza #
Consulte las siguientes pruebas de Tooling.Report para determinar si su compactador es compatible con las funciones que hacen más sencillo evitar o eliminar el código sin utilizar:
Indicaciones específicas para cada categoría #
Angular #
Si utiliza Angular CLI, incluya mapas de origen para crear su producción e inspeccionar sus paquetes.
Drupal #
Considere la posibilidad de eliminar los activos de JavaScript que no se utilicen y adjunte solo las bibliotecas de Drupal necesarias para la página o el componente correspondiente de una página. Consulte la sección Cómo definir una biblioteca para obtener más información.
Joomla #
Considere la posibilidad de reducir, o cambiar, el número de extensiones de Joomla que cargan el JavaScript y no se utilizan en su página.
Magento #
Desactive la compactación de JavaScript incorporada en Magento.
React #
Si no renderiza el lado del servidor, divida sus paquetes de JavaScript con React.lazy(). De lo contrario, divida el código mediante una biblioteca de terceros como loadable-components.
Vue #
Si no renderiza en el lado del servidor y utiliza el enrutador Vue, divida los paquetes por rutas de carga diferida.
WordPress #
Considere la posibilidad de reducir, o cambiar, el número de complementos de Joomla que cargan el JavaScript y no se utilizan en su página.
Recursos #
- Código fuente para Eliminar el código que no se utiliza en la auditoría
- Eliminar el código que no se utiliza
- Agregar interactividad con JavaScript
- Dividir el código
- Eliminar códigos inactivos
- Código importado inactivo
- Encontrar el código de JavaScript y CSS que no se utiliza con la pestaña Cobertura en Chrome DevTools
- clase:
Coverage