Cuando trabajas con dependencias de terceros como Bootstrap o Materialize, una gran parte del código que cargas en tu proyecto probablemente no se está usando. Ese código innecesario sigue pesando, afecta el rendimiento y puede convertir un proyecto sencillo en algo muy pesado. La buena noticia es que Chrome DevTools incluye una herramienta que te permite visualizar exactamente qué código estás utilizando y cuál no.
¿Por qué las dependencias de terceros afectan el rendimiento?
Al incorporar un framework de CSS o una librería externa, estás cargando miles de líneas de código que alguien más escribió. Sin embargo, es muy común que solo utilices un pequeño porcentaje de ese código. El resto permanece ahí, ocupando espacio y aumentando el peso total de tu proyecto.
Esto se convierte en un problema de performance. Aunque tu proyecto sea visualmente sencillo, si tiene muchas dependencias sin optimizar, el navegador tiene que descargar, procesar y mantener todo ese código extra. Antes de pasar un proyecto a producción, es fundamental identificar qué se puede limpiar.
¿Cómo usar la herramienta Coverage en DevTools?
La herramienta Coverage te da visibilidad completa sobre el código HTML, CSS y JavaScript que realmente consume tu proyecto. Para acceder a ella sigue estos pasos [02:25]:
- Abre DevTools en tu navegador.
- Ve al menú de tres puntos.
- Selecciona Más herramientas y luego Coverage.
- Presiona el botón de grabar para iniciar el análisis.
- Si no aparece información, refresca la página mientras Coverage está grabando.
Una vez que el análisis termina, aparece una lista con todos los archivos que tu proyecto está cargando. Cada archivo muestra el porcentaje en bytes de su peso relativo [03:05].
¿Qué significan los colores rojo y verde?
La parte más importante del análisis son las dos líneas de colores que aparecen junto a cada archivo [03:30]:
- Verde: código que tu proyecto sí está utilizando.
- Rojo: código que está presente pero no se usa.
Al hacer clic en cualquier archivo, DevTools abre directamente el código fuente. Puedes recorrerlo línea por línea para ver en verde lo que se ejecuta y en rojo lo que sobra. Esto aplica tanto para HTML como para CSS y JavaScript.
¿Qué pasa con el código comentado y los archivos del navegador?
En el ejemplo del proyecto clon de Google, aunque no se usaron dependencias externas, sí había código comentado que el proyecto no utilizaba [01:30]. Los comentarios son útiles durante el desarrollo para documentar secciones o indicar a otros miembros del equipo dónde empieza cierto bloque de estilos. Sin embargo, si ese código ya no sirve, debe limpiarse porque ocupa espacio.
Por otro lado, el navegador agrega automáticamente cierto código como Websockets, protocolos de conexión y el objeto window para renderizar la página y conectarse al servidor [04:10]. Ese código aparece en el análisis aunque tú no lo hayas escrito.
¿Cómo aplicar Coverage antes de pasar a producción?
Imagina que cargas Bootstrap y solo usas unas cuantas clases. Es probable que más del ochenta por ciento del código de Bootstrap aparezca en rojo, y apenas un quince o veinte por ciento en verde [05:00]. Eso representa una oportunidad enorme de optimización.
Incorporar este análisis como buena práctica te permite:
- Medir qué código agrega valor real a tu proyecto.
- Identificar dependencias que pesan más de lo que aportan.
- Tomar decisiones informadas sobre qué limpiar o reemplazar antes del deploy.
- Reducir significativamente el peso final del proyecto.
Esta práctica es especialmente valiosa en la etapa de optimización, justo antes de mandar a producción. Saber por dónde empezar a recortar puede marcar la diferencia entre un sitio rápido y uno que tarda demasiado en cargar. ¿Ya probaste Coverage en alguno de tus proyectos? Comparte tu experiencia y cuéntanos qué porcentaje de código innecesario encontraste.
