Utiliza el panel Estadísticas de rendimiento para obtener estadísticas prácticas y basadas en casos de uso sobre el rendimiento de tu sitio web.
¿Por qué elegir un nuevo panel?
El nuevo panel Estadísticas de rendimiento es un experimento que aborda estos 3 problemas para los desarrolladores cuando se trabaja con el panel Rendimiento existente:
- Contiene demasiada información. Con la IU rediseñada, el panel Estadísticas de rendimiento optimiza los datos y muestra solo la información relevante.
- Es difícil distinguir entre casos de uso. El panel Performance Insights admite el análisis basado en casos de uso. Por el momento, solo admite casos de uso de carga de página. Se agregarán más en el futuro según tus comentarios, como la interactividad.
- Se requiere un vasto conocimiento de cómo funcionan los navegadores para usarlos de manera eficaz. En el panel Estadísticas de rendimiento, se destacan las estadísticas clave del panel Estadísticas y se incluyen comentarios prácticos sobre cómo solucionar problemas.
Introducción
En este instructivo, aprenderás a medir y comprender el rendimiento de carga de la página con el panel Estadísticas de rendimiento. Continúa leyendo o mira la versión en video de este instructivo más arriba.
Abrir el panel Estadísticas de rendimiento
- Abre Herramientas para desarrolladores.
Haz clic en Más opciones > Más herramientas > Estadísticas de rendimiento.
También puedes usar el menú de comandos para abrir el panel Estadísticas de rendimiento.
Récord de rendimiento
El panel Estadísticas de rendimiento puede registrar el rendimiento general y basado en casos de uso (por ejemplo, carga de página).
- Abre esta página de demostración en una pestaña nueva y, en la página, abre el panel Estadísticas de rendimiento.
Puedes limitar la red y la CPU durante el registro. En este instructivo, marca Inhabilitar caché y configura CPU en 4x SLOdown 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 la grabación un par de segundos después de que finaliza la carga de la página.
Cómo volver a reproducir la grabación de una presentación
Usa los controles en la parte inferior para controlar la repetició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 Pause para pausar la reproducción.
- Ajusta la velocidad de reproducción con el menú desplegable.
- Haz clic en Activar o desactivar la vista previa para ocultar o mostrar la vista previa.
Cómo navegar por una grabación de una presentación
Herramientas para desarrolladores aleja 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 hacer zoom y mover la línea de tiempo hacia la izquierda y la derecha, usa los botones de navegación correspondientes:
- Haz clic en Cronograma 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. En este caso, el zoom se basa en el cabezal de reproducción.
- Arrastra la barra de desplazamiento horizontal en la parte inferior para mover la línea de tiempo hacia la izquierda y hacia la derecha.
También puedes usar combinaciones de teclas. Haz clic en el botón para ver las combinaciones de teclas.
Cuando usas combinaciones de teclas, te acercas en función del cursor del mouse.
Consulta las estadísticas de rendimiento
Obtén una lista de estadísticas de rendimiento en el panel Insights. Identifica y corrige los posibles problemas de rendimiento.
Coloca el cursor sobre cada una de las estadísticas para destacarlas en las pistas principales.
Haz clic en una estadística (por ejemplo, la solicitud que bloquea la renderización) para abrirla en el panel Details. Para comprender mejor el problema, examina las secciones Archivo, Problema y Cómo corregirlo, entre otras opciones.
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 ofrecer una excelente experiencia del usuario en la Web.
Puedes ver estas métricas en los paneles Timeline y Insights.
Coloca el cursor sobre las estadísticas en Cronograma para obtener más información sobre las métricas.
Descubre las demoras del procesamiento de imagen con contenido más grande
El Procesamiento de imagen con contenido más grande (LCP) es una de las Métricas web esenciales. 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 comenzó 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, verás la insignia de LCP con un cuadrado amarillo o un triángulo rojo en el cronograma.
Para abrir el panel Details, haz clic en la insignia de LCP en el cronograma o en el panel Insights que está a la derecha. En el panel, puedes descubrir las posibles causas de los retrasos y las sugerencias para solucionarlos.
En este ejemplo, una solicitud bloquea la renderización, y puedes aplicar estilos críticos en línea para corregirla. Para obtener más información, consulta Elimina recursos que bloquean el procesamiento.
Para ver las subpartes del tiempo de renderización de LCP, desplázate hacia abajo hasta la sección Detalles > Desglose de tiempos.
El tiempo de renderización de LCP consta de las siguientes subpartes:
| Subparte de LCP | Descripción |
|---|---|
| Tiempo hasta el primer byte (TTFB) | El tiempo que transcurre desde que el usuario comienza a cargar la página hasta que el navegador recibe el primer byte de la respuesta del documento HTML. |
| Retraso en la carga de recursos | El delta entre el TTFB y el momento en el que el navegador comienza a cargar el recurso LCP. |
| Tiempo de carga del recurso | Se refiere al tiempo que lleva cargar el recurso LCP. |
| Retraso en la renderización de elementos | El delta entre el momento en que el recurso LCP termina de cargarse y el momento en que el elemento de LCP se renderiza por completo. |
Si un elemento de LCP no requiere una carga de recursos para su renderización, se omiten el tiempo y el retraso de la carga del recurso. Por ejemplo, en caso de que el elemento sea un nodo de texto renderizado con una fuente de sistema.
Cómo ver la actividad de los cambios de diseño
La actividad de los cambios de diseño de la vista 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 espacios vacíos entre ellas.
Cambios de diseño acumulados (CLS) es una de las métricas web esenciales. Usa el segmento Cambios de diseño para identificar posibles problemas y causas de los cambios de diseño.
Cuando mejore la métrica de CLS, siempre comienza con la ventana de sesión más grande. En nuestro ejemplo, la ventana de sesión 1 es la ventana más grande según el nivel y el color del fondo.
Haz clic en una captura de pantalla para ver los detalles del cambio de diseño, además de 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 solucionarlo, consulta Optimiza el Cambio de diseño acumulado.
Comprende la puntuación de los cambios de diseño
Para comprender cómo se calculan las puntuaciones, usa la sección Window en el panel Details. En Window, se muestra a qué ventana de sesión pertenece el cambio de diseño actual.
Si se cambia 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 de CLS, es necesario mejorar. 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.
Ver actividad de red
Consulta la actividad de red en el segmento Red. Puedes expandir el recorrido de la red para ver todas sus actividades y hacer clic en cada elemento para ver los detalles.
Ver actividad del renderizador
Consulta la actividad de renderización en el segmento Renderer. Puedes expandir cada procesador para ver las actividades y hacer clic en cada elemento para ver los detalles.
Ver la actividad de GPU
Consulta la actividad de GPU en el segmento de GPU. El segmento de GPU está oculto de manera predeterminada. Para habilitarlo, marca la opción GPU en Configuración.
Ver tiempos de usuario
Para obtener mediciones de rendimiento personalizadas, puedes usar Tiempos de usuario y visualizar tus tiempos con el segmento Tiempo. 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 de los usuarios, haz lo siguiente:
- Marca lugares en tu aplicación con
performance.mark(). - Mide el tiempo transcurrido entre las marcas con
performance.measure(). - Graba tu interpretación.
- Consulta las mediciones en el segmento Tiempos. Si no puedes ver la pista, consulta Tiempos de usuario en Configuración.
- Para ver los detalles, haz clic en el tiempo en la pista.
Personaliza la IU
Para personalizar las opciones de Rutas y Seguimientos, 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 Import .
Cómo borrar una grabación
Para borrar una grabación, haz lo siguiente:
- Haz clic en Borrar. Se abrirá un diálogo de confirmación.
- En el cuadro de diálogo, haz clic en Borrar para confirmar esta acción.