Usa el Monitor de rendimiento para tener una idea rápida de la carga y el rendimiento del tiempo de ejecución de tu sitio.
Descripción general
El panel Monitor de rendimiento muestra un cronograma con las métricas de rendimiento en tiempo real. Haz clic en una métrica para ocultarla o mostrarla. Luego, observa cómo cambia el gráfico a medida que interactúas con la app.
El supervisor de rendimiento hace un seguimiento de las siguientes métricas:
- el uso de CPU.
- Tamaño del montón de JavaScript.
- La cantidad total de nodos del DOM, objetos de escucha de eventos de JavaScript, documentos y marcos en la página.
- Diseños y recálculos de estilo por segundo
Cómo abrir el panel de supervisión de rendimiento
Para abrir el panel Monitor de rendimiento, haz lo siguiente:
- Abre Herramientas para desarrolladores.
- Para abrir el menú Comando, presiona lo siguiente:
- macOS: Comando + Mayúsculas + P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Performance monitor, selecciona Show Performance monitor y presiona Intro. Las Herramientas para desarrolladores muestran el panel Monitor de rendimiento en la parte inferior de la ventana de Herramientas para desarrolladores.
Como alternativa, en la esquina superior derecha, selecciona more_vert Más opciones > Más herramientas > Monitor de rendimiento.
Cómo usar el panel de supervisión de rendimiento
El monitor de rendimiento brinda una idea general del rendimiento del tiempo de ejecución de tu sitio web.
Observar cómo cambian los valores de las métricas a medida que interactúas con tu sitio web puede revelar oportunidades de mejora.
Una función útil del Monitor de rendimiento es que persiste durante la navegación de la página. Por lo tanto, como desarrollador de frontend, puedes evitar problemas como la paginación excesiva de diseños. Para ello, abre el Monitor de rendimiento, te desplazas por su sitio web y presta atención a las métricas de Nodos del DOM y de Diseño/s.
Si los usuarios informan tiempos de carga lentos en tu sitio, el monitor de rendimiento puede ayudarte a identificar las áreas con problemas.
Por ejemplo, un gran aumento en el uso de la CPU puede apuntar a un código ineficiente. Y, en general, si una página contiene una gran cantidad de objetos de escucha de eventos JS, puede ser beneficioso refactorizar tu código y reducir esos números para liberar memoria.
Si recién comienzas a analizar el rendimiento, la ruta recomendada es utilizar primero el panel Lighthouse y, luego, investigar más a fondo con el panel Rendimiento o el monitor de rendimiento.