Cómo eliminar el JavaScript que no se utiliza

Published on

Translated to: English, Pусский

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:

Una captura de pantalla de la auditoría
Haga clic en el valor de la columna URL para abrir el código fuente del script en una nueva pestaña.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.