Usa el panel de Estadísticas de rendimiento para obtener estadísticas prácticas y basadas en casos de uso sobre el rendimiento de tu sitio web.
Descripción general
El panel Estadísticas de rendimiento te permite hacer lo siguiente:
- Registra y mide el rendimiento de carga de la página.
- Consulta las métricas de rendimiento de las Métricas web.
- Ver actividad de red
- Simula velocidades de CPU y de red más lentas.
- Importar y exportar grabaciones
¿Por qué un panel nuevo?
El nuevo panel Estadísticas de rendimiento es un experimento para abordar estos 3 problemas de los desarrolladores cuando trabajan con el panel Rendimiento existente:
- Demasiada información Con la IU rediseñada, el panel Estadísticas de rendimiento optimiza los datos y muestra solo la información pertinente.
- Es difícil distinguir entre los casos de uso. El panel Estadísticas de rendimiento admite el análisis basado en casos de uso. Por el momento, solo admite el caso de uso de carga de página, pero en el futuro se agregarán más funciones según tus comentarios, por ejemplo, la interactividad.
- Requiere un conocimiento profundo del funcionamiento de los navegadores para usarse de manera eficaz. El panel Estadísticas de rendimiento destaca las estadísticas clave en el panel Estadísticas, con comentarios prácticos sobre cómo solucionar problemas.
Introducción
En este instructivo, se explica cómo medir y comprender el rendimiento de carga de tu página con el panel de Estadísticas de rendimiento. Sigue leyendo o mira la versión en video de este instructivo.
Abre el panel Estadísticas de rendimiento
- Abre las Herramientas para desarrolladores.
Haz clic en Más opciones > Más herramientas > Estadísticas de rendimiento.
Como alternativa, usa el menú de comandos para abrir el panel de Estadísticas de rendimiento.
Rendimiento de los registros
El panel Estadísticas de rendimiento puede registrar el rendimiento general y el rendimiento basado en casos de uso (por ejemplo, la carga de la página).
- Abre esta página de demostración en una pestaña nueva y, en la página, abre el panel de estadísticas de rendimiento.
Puedes limitar la red y la CPU mientras grabas. En este instructivo, marca Inhabilitar caché y configura CPU en 4x slowdown en el menú desplegable:
Haz clic en Medir la carga de la página. Herramientas para desarrolladores registra las métricas de rendimiento mientras se vuelve a cargar la página y, luego, detiene automáticamente el registro unos segundos después de que finaliza la carga de la página.
Cómo volver a reproducir una grabación de rendimiento
Usa los controles que se encuentran en la parte inferior para controlar la reproducción de la grabación.
Este es un ejemplo de cómo hacerlo.
- Haz clic en Reproducir para reproducir la grabación.
- Haz clic en Pausar para pausar la repetición.
- Ajusta la velocidad de reproducción con el menú desplegable.
- Haz clic en Alternar vista previa visual para mostrar u ocultar la vista previa visual.
Cómo navegar por una grabación de rendimiento
Las Herramientas para desarrolladores se alejan automáticamente para mostrar la línea de tiempo de grabación completa. Puedes navegar por la grabación con el zoom y mover la línea de tiempo.
Para acercar y alejar la imagen, y mover la línea de tiempo hacia la izquierda y la derecha, usa los botones de navegación correspondientes:
- Haz clic en la línea de tiempo para mover el cabezal de reproducción y ver un fotograma en particular.
- Haz clic en los controles Acercar y Alejar en la parte inferior para acercar o alejar la imagen. En este caso, el zoom se basa en el cabezal de reproducción.
- Arrastra la barra de desplazamiento horizontal que se encuentra en la parte inferior para mover la línea de tiempo hacia la izquierda y la derecha.
También puedes usar combinaciones de teclas. Haz clic en el botón para ver los atajos.
Cuando usas combinaciones de teclas, el zoom se basa en el cursor del mouse.
Cómo consultar las estadísticas de rendimiento
Obtén una lista de estadísticas de rendimiento en el panel Insights. Identifica y corrige posibles problemas de rendimiento.
Coloca el cursor sobre cada una de las estadísticas para destacarlas en los segmentos principales.
Haz clic en una sugerencia, por ejemplo, la solicitud que bloquea la renderización, para abrirla en el panel Detalles. Para comprender mejor el problema, examina las secciones Archivo, Problema y Cómo corregirlo, entre otras.
Consulta las métricas de rendimiento de las Métricas web
Las Métricas web son una iniciativa de Google para proporcionar una guía unificada sobre los indicadores de calidad que son esenciales para brindar una excelente experiencia del usuario en la Web.
Puedes ver estas métricas en los paneles Cronograma y Estadísticas.
Coloca el cursor sobre las estadísticas de la línea de tiempo para obtener más información sobre las métricas.
Descubre los retrasos de Largest Contentful Paint
El Largest Contentful Paint (LCP) es una de las métricas de Core Web Vitals. Informa el tiempo de renderización del bloque de imagen o texto más grande visible dentro del viewport, en relación con el momento en que la página comienza a cargarse por primera vez.
Una buena puntuación de LCP es de 2.5 segundos o menos.
Si el procesamiento de imagen con contenido más grande de tu página tarda más en renderizarse, en el cronograma, verás la insignia de LCP con un cuadrado amarillo o un triángulo rojo.
Para abrir el panel Detalles, haz clic en la insignia de LCP en la línea de tiempo o en el panel Estadísticas a la derecha. En el panel, puedes descubrir las posibles causas de las demoras y sugerencias para corregirlas.
En este ejemplo, una solicitud bloquea la renderización, y puedes aplicar estilos críticos intercalados para corregirlo. Para obtener más información, consulta Elimina los recursos que bloquean la renderización.
Para ver los tiempos parciales de renderización del LCP, desplázate hacia abajo hasta la sección Detalles > Desglose de tiempos.
El tiempo de renderización del LCP consta de las siguientes partes:
| Subparte del LCP | Descripción |
|---|---|
| Tiempo hasta el primer byte (TTFB) | Es el tiempo que transcurre desde que el usuario inicia la carga de la página hasta que el navegador recibe el primer byte de la respuesta del documento HTML. |
| Retraso en la carga de recursos | Es la diferencia entre el TTFB y el momento en que el navegador comienza a cargar el recurso de LCP. |
| Tiempo de carga del recurso | Es el tiempo que tarda en cargarse el recurso del LCP. |
| Retraso en la renderización del elemento | Es la diferencia entre el momento en que termina de cargarse el recurso del LCP y el momento en que se renderiza por completo el elemento del LCP. |
Si un elemento del LCP no requiere una carga de recursos para renderizarse, se omiten el retraso y el tiempo de carga de recursos. Por ejemplo, en caso de que el elemento sea un nodo de texto renderizado con una fuente del sistema.
Cómo ver la actividad de los cambios de diseño
Consulta la actividad de los cambios de diseño en el segmento Cambios de diseño.
Los cambios de diseño se agrupan en una ventana de sesión. En el ejemplo, hay dos ventanas de sesión. Las ventanas de sesión tienen intervalos entre ellas.
El cambio de diseño acumulado (CLS) es una de las métricas de las métricas web esenciales. Usa el registro Cambios de diseño para identificar posibles problemas y causas de los cambios de diseño.
Cuando mejore la métrica del CLS, comience siempre con la ventana de sesión más grande. En nuestro ejemplo, la ventana de sesión 1 es la más grande, según el color de fondo y el nivel.
Haz clic en una captura de pantalla para ver los detalles del cambio de diseño, identificar las posibles causas raíz y los elementos afectados.
En nuestro ejemplo, la posible causa raíz es contenido multimedia sin tamaño. Para obtener información sobre cómo corregirlo, consulta Optimiza el CLS.
Información sobre la puntuación de cambio de diseño
Para comprender cómo se calculan las puntuaciones, usa la sección Window del panel Details. La ventana muestra a qué ventana de sesión pertenece el cambio de diseño actual.
Si se desplaza toda la página, la puntuación máxima de cada cambio de diseño es 1. En nuestro ejemplo, el primer cambio de diseño obtuvo una puntuación de 0.15. El segundo cambio de diseño obtuvo una puntuación de 0.041.
La puntuación total para esta ventana de sesión es 0.19. Según el umbral del CLS, necesita mejoras. El color de fondo de la ventana de sesión refleja lo mismo.
El gráfico de fondo de la ventana de sesión aumenta con el tiempo. La puntuación acumulativa del cambio de diseño refleja el aumento en ese momento.
Cómo ver la actividad de red
Consulta la actividad de red en el segmento Network. Puedes expandir el segmento de red para ver todas las actividades de la red y hacer clic en cada elemento para ver los detalles.
Ver la actividad del renderizador
Consulta la actividad de renderización en el segmento Renderer. Puedes expandir cada renderizador para ver las actividades y hacer clic en cada elemento para ver los detalles.
Cómo ver la actividad de la GPU
Visualiza la actividad de la GPU en el segmento GPU. La pista de GPU está oculta de forma predeterminada. Para habilitarla, marca GPU en Configuración.
Cómo ver los tiempos de usuario
Para obtener medidas de rendimiento personalizadas, puedes usar User Timing y visualizar tus tiempos con el segmento Timing. Para obtener más información, consulta la API de User Timing.
Consulta esta página de demostración que calcula el tiempo transcurrido de la carga de texto.
Para ver los tiempos del usuario, haz lo siguiente:
- Marca lugares en tu aplicación con
performance.mark(). - Mide el tiempo transcurrido entre las marcas con
performance.measure(). - Graba el rendimiento.
- Visualiza las mediciones en el segmento Tiempos. Si no ves el segmento, verifica la opción Tiempos del usuario en Configuración.
- Para ver los detalles, haz clic en el tiempo de la pista.
Personaliza la IU
Para personalizar la línea de tiempo y las pistas, haz clic en el ícono de Configuración del panel y marca las opciones que prefieras.
Cómo exportar una grabación
Para guardar una grabación, haz clic en Exportar .
Cómo importar una grabación
Para cargar una grabación, selecciona Importar .
Cómo borrar una grabación
Para borrar una grabación, haz lo siguiente:
- Haz clic en Borrar. Se abrirá un cuadro de diálogo de confirmación.
- En el cuadro de diálogo, haz clic en Borrar para confirmar la eliminación.