Rendimiento de Página proporciona una visión general instantánea del rendimiento de cualquier página web — métricas de tiempo de carga (FCP, DOMContentLoaded, carga completa, TTI), estadísticas DOM (conteo de elementos, profundidad de anidamiento, escuchadores de eventos) y un desglose de recursos mostrando el conteo y tamaño de JavaScript, CSS, imágenes, fuentes y otros activos. Una puntuación de rendimiento codificada por color proporciona un indicador rápido de salud.
El perfilado de rendimiento con Lighthouse o WebPageTest proporciona un análisis profundo pero tarda en ejecutarse y produce informes abrumadores. A veces solo necesitas una respuesta rápida: "¿Esta página es rápida o lenta? ¿Cuál es el mayor problema?" Rendimiento de Página te da esa visión general instantánea. Lee datos de tiempo de la API de Performance y la API de Navigation Timing del navegador (datos que ya están recopilados — no se necesita una carga adicional de página) y los presenta en un dashboard visual y limpio. La sección superior muestra las métricas clave de tiempo: First Contentful Paint (cuando aparece el primer contenido), DOMContentLoaded (cuando el HTML se analiza completamente), Carga Completa (cuando todos los recursos terminan) y Time to Interactive (cuando la página se vuelve receptiva). Cada métrica está codificada por color — verde para rápida, amarillo para moderada, rojo para lenta — según los umbrales de Web Vitals. Debajo de eso, un desglose de recursos muestra cuánto ancho de banda se gasta en JavaScript, CSS, imágenes, fuentes y otros tipos de recursos, con gráficos de barras visuales para una comparación fácil. La sección de estadísticas DOM muestra el conteo total de elementos, profundidad máxima de anidamiento y conteo de escuchadores de eventos — indicadores de complejidad DOM que afectan el rendimiento de renderizado.
Muestra First Contentful Paint (FCP), DOMContentLoaded, Carga Completa de Página y Time to Interactive (TTI) — las cuatro métricas de rendimiento más importantes. Cada una está codificada por color: verde (rápido), amarillo (moderado), rojo (lento) según los umbrales establecidos de Web Vitals.
Gráfico de barras visual mostrando el conteo y tamaño total de cada tipo de recurso: archivos JavaScript, hojas de estilos CSS, imágenes, fuentes y otros activos. Ve al instante qué tipo de recurso contribuye más al peso de la página.
Muestra el conteo total de elementos DOM, profundidad máxima de anidamiento y conteo total de escuchadores de eventos. Los tamaños grandes de DOM (2000+ elementos) y el anidamiento profundo (15+ niveles) se señalan como posibles cuellos de botella de rendimiento.
Una única puntuación de 0-100 resume la salud del rendimiento de la página, codificada por color verde (85+), amarillo (50-84) o rojo (0-49). Basada en una combinación ponderada de métricas de tiempo y eficiencia de recursos.
Muestra el tamaño combinado de todos los recursos descargados en MB. Desglosado por categoría para que puedas ver que 842 KB son JavaScript, 245 KB son imágenes y 128 KB son CSS — identificando los contribuyentes más pesados.
Lee los datos de rendimiento de la API de Performance del navegador — datos que ya están recopilados durante la carga normal de la página. Sin pruebas sintéticas, sin solicitudes de red adicionales y sin impacto de rendimiento al ejecutar la herramienta.
Abre cualquier página y obtén una visión general instantánea del rendimiento. ¿Es rápida (puntuación verde), moderada (amarilla) o lenta (roja)? El dashboard responde esto en menos de un segundo — sin esperar a que Lighthouse se ejecute.
Si la página es lenta, el desglose de recursos muestra por qué. ¿1.2 MB de JavaScript? Ese es el cuello de botella. ¿800 KB de imágenes sin optimizar? Esa es la solución. El desglose visual hace obvios los contribuyentes más pesados.
Ejecuta Rendimiento de Página antes de hacer optimizaciones, anota las métricas. Haz tus cambios, recarga y ejecútalo de nuevo. Compara FCP, tiempo de carga y peso total de página para verificar que tus optimizaciones tuvieron el impacto esperado.
Ejecuta Rendimiento de Página en tu sitio y en los sitios de tus competidores. Compara tiempos de carga, pesos de página y distribuciones de recursos. ¿Los competidores envían menos JavaScript? ¿Sus imágenes están mejor optimizadas?
Ejecuta la herramienta en páginas clave regularmente durante el desarrollo. Si la puntuación de rendimiento cae o el peso de la página aumenta repentinamente, has introducido una regresión — detéctala antes de que llegue a producción.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono de Rendimiento de Página. El dashboard aparece al instante con los datos de rendimiento para la carga actual de la página.
Verifica las cuatro métricas clave de tiempo en la parte superior: FCP, DOMContentLoaded, Carga Completa y TTI. Los valores verdes son rápidos, amarillo es moderado, rojo necesita mejora.
Mira el gráfico de barras de recursos para ver qué tipo de activo es el más pesado. JavaScript suele ser el mayor contribuyente — si JS supera los 500 KB, puede valer la pena dividir el código o hacer carga perezosa.
Revisa las estadísticas DOM. Si el conteo de elementos excede 1500 o la profundidad de anidamiento excede 15, considera simplificar el marcado para mejorar el rendimiento de renderizado.
La puntuación general da un punto de referencia rápido. Ejecuta la herramienta antes y después de las optimizaciones para medir la mejora.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
