Panel de rendimiento: analiza el rendimiento de tu sitio web

Dale St. Marthe

Usa el panel Rendimiento para analizar el rendimiento de tu sitio web.

Descripción general

El panel Rendimiento te permite registrar perfiles de rendimiento de la CPU de tus aplicaciones web. Analiza los perfiles para encontrar posibles cuellos de botella de rendimiento y formas de optimizar el uso de recursos.

Usa el panel Rendimiento para hacer lo siguiente:

• Registra un perfil de rendimiento.
• Cambia 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.

Como alternativa, sigue estos pasos para abrir el panel Rendimiento con el menú de comandos:

1. Abre las Herramientas para desarrolladores.
2. Para abrir el menú de comandos, presiona las siguientes teclas:
3. En macOS: Command + Mayúsculas + P
4. Windows, Linux y ChromeOS: Control+Mayúsculas+P
5. Comienza a escribir Performance panel, selecciona Mostrar panel de rendimiento y presiona Intro.

Observa las Métricas web esenciales en vivo

Cuando abres el panel Rendimiento, este captura de inmediato y te muestra las métricas locales de Procesamiento de imagen con contenido más grande (LCP) y Cambio de diseño acumulado (CLS) que indican su puntuación (buena, necesita mejoras o mala).

Si interactúas con tu página, el panel Rendimiento también captura tu Interaction to Next Paint (INP) local y su puntuación, que, además de LCP y CLS, te proporcionan una descripción general completa de las Métricas web esenciales de tu página mediante tu conexión de red y dispositivo.

El panel Rendimiento proporciona una lista de las interacciones capturadas en las tres tarjetas de métricas. Para borrar la lista, haz clic en Bloquear Borrar.

Para obtener un desglose de la puntuación de una métrica, coloca el cursor sobre el valor de la métrica para ver una información sobre herramientas.

Compara tu experiencia con la de tus usuarios

También puedes recuperar datos de campo del Informe sobre la experiencia del usuario en Chrome y comparar la experiencia de los usuarios de tu sitio con tus métricas locales.

Para agregar datos de campo, sigue estos pasos:

1. En Rendimiento > Próximos pasos > Datos de campo, haz clic en Configurar.

   

2. En el diálogo Configurar la recuperación de datos del campo, observa la Divulgación de privacidad y haz clic en Aceptar.

   Avanzado: Configura una asignación entre los entornos de desarrollo y producción…

   De manera opcional, para obtener automáticamente los datos de campo más relevantes, puedes configurar (varias) asignaciones entre tus orígenes de desarrollo y producción:

   1. En la ventana de diálogo, expande la sección Advanced y haz clic en + New.

   2. En la tabla de asignación, ingresa tus URLs de desarrollo y producción, y haz clic en +.

      

      Por ejemplo, una asignación de http://localhost:8080 a https://example.com mostrará los datos de campo de example.com/page1 cuando navegues a localhost:8080/page1.

      Además, si por algún motivo no puedes obtener los datos de campo automáticamente, puedes activar check_boxMostrar siempre los datos de campo de la siguiente URL y proporcionar una URL. El panel Rendimiento intentará primero recuperar los datos de campo de esta URL y, luego, te mostrará estos datos de campo sin importar a qué página navegues.

      Para cambiar la configuración de recuperación de datos de campo después de la configuración, haz clic en Datos de campo > Configurar.

   Con la recuperación de datos de campo configurada, el panel Rendimiento ahora muestra una comparación entre las puntuaciones de tus métricas locales y las que experimentan tus usuarios. Puedes ver el período de recopilación en la sección Datos de campo a la derecha.

   

   Para obtener un desglose de la puntuación de una métrica, coloca el cursor sobre el valor de la métrica para ver una información sobre herramientas.

Configura tu entorno para que coincida mejor con el de tus usuarios

Con la recuperación de datos de campo configurada como se describe en la sección anterior, el panel Rendimiento te brinda recomendaciones sobre cómo configurar tu entorno para que se adapte mejor a la experiencia de tus usuarios.

Para configurar tu entorno, sigue estos pasos:

1. En cada tarjeta de métricas, expande la sección Considera tus condiciones de prueba locales (si corresponde) y lee las recomendaciones.

   

   Parece que en este ejemplo, para que coincida mejor con la experiencia de tus usuarios, es posible que desees utilizar un tamaño de pantalla de escritorio común y reducir la CPU y la red.

2. Para que coincida con la configuración del entorno de este ejemplo, haz lo siguiente:

   1. Configura el viewport en uno de los tamaños de pantalla comunes (por ejemplo, 720p o 1080p). Para emular dispositivos y tamaños de pantalla específicos, puedes usar el Modo de dispositivo en el panel Elementos.
   2. El 82% de los usuarios del sitio web en este ejemplo usan computadoras de escritorio para navegar. Para asegurarte de comparar las puntuaciones de tus métricas locales con los datos de campo correctos, puedes seleccionar Computadora de escritorio en la sección Datos de campo > Lista desplegable Device.
   3. En la sección Configuración del entorno, establece la lista desplegable Red en, por ejemplo, 4G rápida y CPU en, por ejemplo, 20 veces de ralentización. En la misma sección, asegúrate de marcar check_box Inhabilitar la caché de la red.

3. Con el entorno configurado, vuelve a cargar la página, interactúa con ella para capturar tu INP local y vuelve a comparar las puntuaciones de las métricas.

   

   Parece que las puntuaciones de las métricas ahora son más similares a las que experimentan tus usuarios. Por lo tanto, las secciones Ten en cuenta las condiciones de prueba locales desaparecieron de las tarjetas de métricas.

Con eso, ahora puedes comenzar a mejorar las Métricas web esenciales de tu sitio web:

• Optimiza el LCP
• Optimiza el INP
• Optimiza la métrica CLS

Cómo capturar y analizar un informe de rendimiento

En las siguientes secciones, sigue las instrucciones para grabar un perfil, cambiar la configuración de captura y analizar el informe.

Cómo grabar un perfil de rendimiento

Cuando todo esté listo para grabar, el panel Rendimiento te brindará las siguientes opciones:

• Cómo registrar el rendimiento del entorno de ejecución
• Registra el rendimiento de la carga
• Cómo tomar capturas de pantalla durante la grabación
• Cómo forzar 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 DevTools captura las grabaciones 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:

• Disable JavaScript samples: Inhabilita la grabación de las pilas de llamadas de JavaScript que se muestran en la pista Main 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.
• Habilita las estadísticas del selector CSS (lento): Captura las estadísticas del selector CSS. Obstaculiza considerablemente el rendimiento.
• Limitación de la CPU: Simula velocidades de CPU más lentas.
• Limitación de la red: Simula velocidades de red más lentas.
• Concurrencia 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 un pan de breadcrumbs y saltar entre niveles de zoom

Sigue estos pasos para obtener más información sobre las pestañas Bottom-up, Call tree y Event Log:

• Cómo ver las actividades en una tabla

Para obtener información sobre cómo analizar el informe, haz lo siguiente:

• Cómo ver la actividad del subproceso principal
• Cómo leer el gráfico tipo llama
• Ver una captura de pantalla
• Cómo ver las 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 Recalculate Style
• Genera 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