Solucionar la advertencia de Lighthouse 'reduce unused JavaScript'

¿Qué es la advertencia de Lighthouse 'reduce unused JavaScript'?

¿Qué es la advertencia reduce unused JavaScript en Lighthouse? Lighthouse marca los scripts que tienen más de 20kb de bytes no utilizados.

La advertencia 'reduce unused JavaScript' afecta directamente a la puntuación de Lighthouse.

El JavaScript no utilizado también es muy importante para aprobar los Core Web Vitals, ¡ya que el JavaScript no utilizado tiene un coste! Puede competir por los recursos de red y bloquear el hilo principal. Esto ralentizará los Core Web Vitals, especialmente el Largest Contentful Paint (LCP) y el Interaction to Next Paint (INP).

¿Qué causa el JavaScript no utilizado?

El JavaScript no utilizado puede tener muchas razones. El JavaScript no utilizado suele ser causado por:

• Demasiados  plugins en tu CMS.
• Código muerto.
• Mala programación.
• Acceso sin restricciones al Tag Manager
• Importaciones innecesarias
  
• Código que se cargó inmediatamente pero que podría haberse cargado justo antes de su uso.

¿Cómo afecta el 'unused JavaScript' a la velocidad de la página?

El JavaScript no utilizado afecta directamente a las métricas de Lighthouse. Hace que la renderización de una página web sea innecesariamente complicada, haciendo casi imposible obtener esa alta puntuación en Lighthouse. Tu navegador tendrá que hacer más trabajo antes de que la página web pueda mostrarse en pantalla. 

Sin embargo, ten en cuenta que una puntuación de Lighthouse no es una puntuación de Core Web Vitals. Los Core Web Vitals se miden con datos de CrUX.

Hay 2 problemas con el JavaScript no utilizado.

• En primer lugar, ese JavaScript necesita ser descargado. Estos scripts competirán por los recursos de red. Esto puede tener un gran impacto en el Largest Contentful Paint (LCP)
• En segundo lugar, el navegador necesitará ejecutar todo ese JavaScript. Mientras un navegador ejecuta ese JavaScript, básicamente dejará de hacer cualquier otra cosa y no podrá responder a la entrada del usuario ni continuar analizando la página. Esto afectará tanto al Largest Contentful Paint (LCP) como al Interaction to Next Paint (INP)

Cómo encontrar 'unused JavaScript'

Para encontrar 'unused JavaScript' puedes leer la auditoría de Lighthouse o usar la 'Chrome Coverage Tool' para obtener una lista completa de todos los archivos JavaScript y su cantidad de bytes no utilizados.

Abre las Chrome Dev Tools con el atajo ctrl-shift-i . Luego usa el atajo ctr-shift-p para abrir el menú de comandos y escribe 'coverage'. Selecciona 'Start instrumenting coverage and reload page'. Esto recargará la página y te mostrará la cantidad de bytes no utilizados para todos los archivos que contienen código CSS o JavaScript.

Cómo solucionar 'reduce unused JavaScript'

Para solucionar la advertencia 'reduce unused JavaScript', primero deberás rastrear sus orígenes. Lighthouse te dará una indicación de qué scripts tienen una gran cantidad de bytes no utilizados. Hay 5 sospechosos habituales:

1. Elimina plugins innecesarios o triviales. Si estás usando un CMS basado en plugins como WordPress, con diferencia el método más fácil y efectivo para limpiar tu código no utilizado es eliminar los plugins que no necesitas o que pueden ser reemplazados fácilmente por un simple cambio de código (por ejemplo, tu plugin de análisis, plugin de chat, plugin de compartir en redes sociales)
   
2. Elimina el código muerto. El código muerto es código que ya no se utiliza en el sitio web actual. Solo ocupa espacio y ancho de banda. Si eres dueño de un sitio web, sugiero programar un maratón de código muerto al menos dos veces al año donde revises bien tus scripts personalizados y elimines el código que ya no se necesita.
   
3. Reescribe scripts mal programados.  Los scripts mal programados tienden a tener muchas comprobaciones y declaraciones if/else innecesarias. Esas comprobaciones podrían nunca usarse y ciertas condiciones if/else podrían no ser necesarias. Si tienes muchos scripts antiguos o tu desarrollador de JavaScript actual es mejor que el anterior, podría ser una buena idea revisar los scripts antiguos.
   
4. Limpia tu Tag Manager y restringe el acceso. El Tag Manager es una fuente común de código no utilizado, especialmente cuando se permite a departamentos menos técnicos agregar etiquetas. Muchas veces olvidarán eliminar sus etiquetas no utilizadas y el Tag Manager se convierte en la fuente principal de JavaScript no utilizado.
5. Elimina importaciones innecesarias (NextJS, React, VUE, etc.). La mayoría de los entornos SPA están importando demasiados componentes / funciones. Revisa tus importaciones y elimina el código no utilizado. 
6. Carga diferida (Lazy load) de rutas o componentes  (NextJS, React, VUE, etc.). La carga diferida de componentes solo importará esos componentes una vez que sean necesarios. Esto eliminará inmediatamente la 'advertencia de Lighthouse por JavaScript no utilizado' para estas páginas donde cargues diferidamente el código no utilizado.
7. Aplazar la carga de scripts no críticos. A veces necesitas un script (por ejemplo, para enviar un formulario) pero no lo necesitas de inmediato. Y, seamos honestos, el 98% de tus visitantes no se registrarán de todos modos. Así que, en su mayor parte, estos scripts no se utilizan. Tendría más sentido cargar este script cuando el visitante interactúa con el formulario, y no durante la carga de la página.

Solución alternativa para 'reduce unused JavaScript'

A veces no es posible solucionar todas las advertencias de JavaScript no utilizado. En ese caso, podrías intentar minimizar el impacto de estos recursos no utilizados

- Carga todos los recursos de JavaScript desde tu dominio principal (esto evita una nueva conexión de red)
- Precarga recursos más importantes como tus fuentes y el elemento de imagen LCP.
- Aplaza tanto JavaScript como puedas
- Coloca el JavaScript menos importante en la parte inferior de la página