Usa el panel Rendimiento para analizar el rendimiento de tu sitio web.
Descripción general
El panel Performance te permite registrar los perfiles de rendimiento de la CPU de tus aplicaciones web. Analiza perfiles para detectar posibles cuellos de botella en el rendimiento y formas de optimizar el uso de recursos.
Usa el panel Rendimiento para hacer lo siguiente:
- Graba un perfil de rendimiento.
- Cambiar la configuración de captura
- Analizar un informe de rendimiento
Para obtener una guía completa sobre cómo mejorar el rendimiento de tu sitio web, consulta Cómo analizar el rendimiento del tiempo de ejecución.
Cómo abrir el panel Rendimiento
Para abrir el panel Rendimiento, abre Herramientas para desarrolladores y selecciona Rendimiento en las pestañas ubicadas en la parte superior.
También puedes seguir estos pasos para abrir el panel Rendimiento con el Menú de comandos:
- Abre Herramientas para desarrolladores.
- Abre el menú de comandos presionando las siguientes teclas:
- En macOS: Command + Mayúsculas + P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Performance panel, selecciona Mostrar panel de rendimiento y presiona Intro.
Cómo grabar un perfil de rendimiento
Cuando tengas todo listo para grabar, el panel Performance te ofrecerá las siguientes opciones:
- Cómo registrar el rendimiento del tiempo de ejecución
- Cómo registrar el rendimiento de carga
- Cómo tomar capturas de pantalla durante la grabación
- Fuerza la recolección de elementos no utilizados durante la grabación
- Cómo guardar una grabación
- Cómo cargar una grabación
- Cómo borrar una grabación
Cómo cambiar la configuración de captura
La configuración de captura te permite cambiar la forma en que las Herramientas para desarrolladores capturan los registros de rendimiento y puede brindarte información adicional en el informe. Haz clic en Configuración de captura . Configuración para acceder al menú Configuración de Captura.
Selecciona las siguientes opciones en el menú Configuración de captura:
- Inhabilitar muestras de JavaScript: Inhabilita la grabación de las pilas de llamadas de JavaScript que se muestran en el segmento Principal a las que se llama durante la grabación. Se reducirá la sobrecarga de rendimiento.
- Habilitar instrumentación avanzada de procesamiento (lento): Captura instrumentación avanzada de procesamiento. Obstaculiza considerablemente el rendimiento.
- Habilitar las estadísticas del selector CSS (lento): Captura las estadísticas del selector CSS. Obstaculiza considerablemente el rendimiento.
- Limitación de CPU: Simula velocidades más lentas de CPU.
- Limitación de la red: Simula velocidades de red más lentas.
- Simultaneidad de hardware: Configura el valor que informa
navigator.hardwareConcurrency.
Cómo analizar un informe de rendimiento
Consulta Cómo analizar una grabación de rendimiento para obtener una guía completa sobre cómo usar el panel Rendimiento.
A continuación, se presenta una agrupación de temas de la guía, además de documentación útil:
Para aprender a navegar por el informe, haz lo siguiente:
- Cómo navegar por la grabación
- Actividades de búsqueda
- Realiza un seguimiento de los iniciadores de eventos
Si quieres obtener información para enfocarte en lo que importa para tu flujo de trabajo, haz lo siguiente:
- Cómo cambiar el orden de las pistas y ocultarlas
- Oculta funciones y sus elementos secundarios en el gráfico tipo llama
- Cómo crear rutas de navegación y pasar de un nivel de zoom a otro
Sigue estos pasos para obtener más información sobre las pestañas Bottom-up, Call tree y Event Log:
Para obtener información sobre cómo analizar el informe, haz lo siguiente:
- Cómo ver la actividad del subproceso principal
- Leer el gráfico tipo llama
- Ver una captura de pantalla
- Visualiza métricas de memoria
- Cómo ver la duración de una parte de una grabación
- Cómo analizar el rendimiento del selector CSS durante los eventos de Recalculate Style
- Cómo generar perfiles del rendimiento de Node.js con el panel Rendimiento
- Cómo analizar fotogramas por segundo (FPS)
- Referencia de eventos de la línea de tiempo
Mejora el rendimiento con estos paneles
Descubre otros paneles que pueden ayudarte a mejorar el rendimiento de tu sitio web:
- Lighthouse: Optimiza la velocidad del sitio web
- Memoria: Descripción general del panel de memoria
- Estadísticas de rendimiento: Obtén estadísticas prácticas sobre el rendimiento de tu sitio web
- Renderización: Descubre problemas con el rendimiento de la renderización
- Problemas: Encuentra y soluciona problemas
- Rendimiento: Consulta información sobre las capas