Usa el monitor de rendimiento para tener una idea rápida del rendimiento de la carga y del tiempo de ejecución de tu sitio.
Descripción general
El panel Monitor de rendimiento muestra un cronograma que representa 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 tu app.
La supervisión de rendimiento hace un seguimiento de las siguientes métricas:
- el uso de CPU.
- Tamaño del montón de JavaScript.
- Cantidad total de nodos del DOM, objetos de escucha de eventos de JavaScript, documentos y marcos de la página.
- Nuevos cálculos de diseños y estilos por segundo.
Cómo abrir el panel Monitor de rendimiento
Para abrir el panel Monitor de rendimiento, haz lo siguiente:
- Abre Herramientas para desarrolladores.
- Para abrir el menú de comandos, presiona lo siguiente:
- En macOS: Command + Mayúsculas + P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Performance monitor, selecciona Mostrar monitor de rendimiento 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 Monitor 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, desplázate por su sitio web y presta atención a las métricas Nodos del DOM y Diseño/s.
Si los usuarios informan tiempos de carga lentos en tu sitio, el monitor de rendimiento puede ayudarte a identificar áreas con problemas.
Por ejemplo, un gran aumento en el uso de CPU podría indicar un código ineficiente. Además, si una página contiene una gran cantidad de objetos de escucha de eventos de 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 usar primero el panel Lighthouse y, luego, investigar más a fondo con el panel Rendimiento o el Monitor de rendimiento.