Optimización web: eliminar el código muerto con la pestaña Coverage de Chrome
La web moderna es cada vez más pesada. Los sitios cargan archivos inmensos. Sin embargo, una gran parte de este código nunca se utiliza. Los desarrolladores suelen utilizar bibliotecas completas. Solo utilizan una pequeña parte de las funciones. Este exceso de datos ralentiza la navegación. Consume batería en el móvil. Desperdicia ancho de banda.
Google Chrome ofrece una herramienta integrada muy potente. Se llama la pestaña Coverage (Cobertura). Esta herramienta analiza su código mientras navega. Muestra lo que se ejecuta. Muestra, sobre todo, lo que permanece inactivo. Eliminar este código muerto es una prioridad para el rendimiento. Es esencial para mejorar sus Core Web Vitals.
¿Por qué es peligroso el código muerto?
Cada byte enviado tiene un coste técnico. El navegador sigue un proceso estricto para mostrar una página.
El impacto en el renderizado CSS
El CSS bloquea la visualización de la página. El navegador debe leer todo el archivo antes de dibujar. Si su archivo ocupa 200 KB pero solo 10 KB son útiles, está perdiendo tiempo. El usuario ve una pantalla blanca. Esto aumenta la puntuación LCP (Largest Contentful Paint). Un sitio rápido retiene mejor a sus visitantes.
El coste del JavaScript
El JavaScript es muy costoso para el procesador. El navegador debe descargar el archivo. Luego, debe descomprimirlo. Después, debe analizarlo y compilarlo. Este trabajo utiliza muchos recursos. En un smartphone antiguo, esto crea tirones. La herramienta Coverage le ayuda a reducir el TBT (Total Blocking Time).
¿Cómo abrir la pestaña Coverage?
La herramienta se esconde en las opciones avanzadas de Chrome. Aquí están los pasos para acceder a ella:
- Abra su sitio web en Chrome.
- Abra las herramientas de desarrollo con la tecla
F12. - Presione
Ctrl + Shift + P(oCmd + Shift + Pen Mac). - Aparecerá una barra de búsqueda.
- Escriba la palabra “Coverage”.
- Seleccione la opción “Show Coverage”.
Se abrirá un nuevo panel en la parte inferior de su ventana. Para comenzar el análisis, haga clic en el botón de recarga. Es el icono con una flecha circular. La página se refrescará. La herramienta registrará entonces cada línea de código utilizada.
Entender la visualización de datos
La pestaña Coverage presenta una tabla completa. Cada fila corresponde a un archivo cargado.
- URL: El nombre y la dirección del archivo. Esto incluye sus scripts y sus estilos.
- Type: Indica si se trata de JS o de CSS.
- Total Bytes: El peso total del archivo.
- Unused Bytes: La cantidad de código que no se ha utilizado.
- Usage Visualization: Una barra horizontal muy útil.
Analizar los colores
En esta herramienta, los colores son fáciles de entender. La barra roja representa el código que nunca se ha ejecutado. La barra gris representa el código útil.
Si ve una barra casi totalmente roja, el archivo es un problema. En la imagen de arriba, algunos archivos muestran un 100% de código no utilizado. Es una pérdida total de eficiencia. Esto suele ocurrir con las fuentes de iconos o los viejos scripts de seguimiento.
Análisis detallado en las fuentes
Haga clic en una fila de la tabla. El archivo se abre en la pestaña Sources. Mire a la izquierda de los números de línea. Aparecen franjas de colores.
- Una franja gris significa que la línea ha sido leída por el navegador.
- Una franja roja significa que la línea es ignorada.
El factor humano: la interacción
La herramienta Coverage es un grabador en vivo. No puede adivinar el futuro. Al cargar la página, todo lo relacionado con los menús desplegables o las ventanas emergentes estará en rojo. Es normal. El código aún no se ha utilizado.
Para obtener un informe fiable:
- Inicie la grabación.
- Recorra toda su página.
- Haga clic en todos los botones.
- Abra los menús.
- Desplácese hasta el pie de página.
Verá que las barras rojas se vuelven grises en tiempo real. El código que realmente necesita se revela poco a poco.
¿Cómo eliminar el código innecesario?
Una vez terminado el diagnóstico, debe actuar. Aquí hay tres métodos para limpiar su proyecto.
1. La eliminación manual
Es el método más sencillo para el CSS. Si la herramienta muestra que estilos enteros están en rojo en todo el sitio, elimínelos. Suele ser código antiguo olvidado.
2. El fraccionamiento del código (Code splitting)
No cargue el código de su página de “Contacto” en su “Inicio”. Divida sus scripts en trozos pequeños. Cárguelos solo cuando sea necesario. Es muy fácil de hacer con los frameworks modernos.
Aquí tiene un ejemplo de carga condicional en JavaScript:
const feedbackBtn = document.querySelector('.js-feedback');
if (feedbackBtn)
{
import('./modules/feedback.js').then(module =>
{
module.init();
});
}
3. El Tree Shaking
Es una técnica automática. Elimina el código muerto durante la creación del sitio. Para ello, utilice herramientas como Vite o Webpack. Analizan su código y eliminan lo que no se llama.
// Solo importamos lo que es útil
import {computeTotal} from './math-library.js';
const result = computeTotal(10, 20);
console.log(result);
// La función multiply() en math-library.js no se utilizará
// No se incluirá en el archivo final
Las extensiones de navegador y la pestaña Coverage
La imagen de la pestaña Coverage a menudo muestra líneas que comienzan con chrome-extension://. No es el código de su
sitio. Son los scripts de sus propias extensiones (como uBlock o LastPass).
Atención: No confunda estos archivos con sus propios activos. Concéntrese únicamente en los archivos que comienzan
con http:// o https:// con su nombre de dominio. Las extensiones consumen muchos recursos. Pueden falsear sus
pruebas de rendimiento. Pruebe siempre su sitio en modo Incógnito para evitar esto.
Beneficios para el SEO y la indexación
Un sitio ligero está mejor posicionado en Google. El motor de búsqueda analiza la velocidad. Si sus archivos JS son demasiado pesados, el robot de Google dedicará menos tiempo a indexar sus páginas. Esto se llama el presupuesto de rastreo (crawl budget).
Al reducir el código muerto:
- El sitio carga más rápido.
- La experiencia del usuario mejora.
- La tasa de rebote disminuye.
- Su puntuación Lighthouse aumenta.
Conclusión
La pestaña Coverage es una herramienta de diagnóstico vital. Permite ver lo invisible. En pocos clics, identificará a los culpables de la lentitud. Limpiar su código es una marca de respeto hacia el usuario.
Empiece hoy mismo. Abra sus herramientas. Inicie un análisis. Cada línea roja eliminada hace que la web sea más rápida y ecológica.
Preguntas Frecuentes
¿Es posible alcanzar el 0% de código no utilizado?
Es casi imposible. Un sitio necesita código para gestionar errores. Necesita código para futuras interacciones. Una tasa del 20% de código no utilizado ya es un excelente resultado.¿Funciona la herramienta Coverage en Firefox?
Firefox tiene herramientas similares, pero la pestaña Coverage de Chrome es la más completa. Ofrece la visualización más precisa línea por línea.¿Es peligroso el código muerto para la seguridad?
Sí. Cuanto más código tenga, mayor será el riesgo de vulnerabilidades. Eliminar el código innecesario reduce la superficie de ataque. Es una buena práctica de seguridad.¿Por qué mi archivo CSS está en rojo al 100% en el móvil?
Probablemente sea un archivo dedicado a la versión de escritorio (comoprint.css). La herramienta Coverage
le ayuda a ver que está cargando archivos innecesarios para ciertas pantallas.
