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.
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.
- Cómo ver la actividad de red
- Simula velocidades de CPU y red más lentas.
- Importa y exporta grabaciones.
¿Por qué elegir un nuevo panel?
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:
- Hay 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 los casos de uso. El panel Performance Insights admite el análisis basado en casos de uso. Por el momento, solo admite el caso de uso de carga de página, y se agregarán más en el futuro en función de tus comentarios, por ejemplo, la interactividad.
- Requiere un conocimiento profundo del funcionamiento de los navegadores para usarlos de manera eficaz. En el panel Estadísticas de rendimiento, se destacan 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 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.
Como alternativa, usa el menú de comandos para abrir el panel Estadísticas de rendimiento.
Cómo registrar el 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 ella, abre el panel de estadísticas de rendimiento.
Puedes limitar la red y la CPU durante el registro. En este instructivo, marca Disable cache y establece 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 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 Pausar para pausar la repetició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 rendimiento
DevTools aleja la imagen automáticamente para mostrar la línea de tiempo completa de la grabación. Puedes navegar por la grabación con zoom y mover la línea de tiempo.
Para acercar y mover el cronograma hacia la izquierda y la derecha, usa los botones de navegación correspondientes:
- Haz clic en la línea de tiempo para mover el punto 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, aplicas zoom según el punto 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 Estadísticas. 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 estadística, por ejemplo, la solicitud de bloqueo de renderización, para abrirla en el panel Detalles. 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 de la Rutas para obtener más información sobre las métricas.
Descubre los retrasos 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. Indica 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 Detalles, haz clic en la insignia de LCP en el cronograma o en el panel Estadísticas a la derecha. En el panel, puedes descubrir las posibles causas de las demoras y las sugerencias para solucionarlas.
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 | Es la diferencia entre el TTFB y el momento en que el navegador comienza a cargar el recurso de LCP. |
| Tiempo de carga de recursos | 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 intervalos 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 quieras mejorar 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 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, 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 ajustar el 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 Ventana en el panel Detalles. 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, 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 acumulada 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 Red. Puedes expandir el recorrido de la red para ver todas sus actividades y hacer clic en cada elemento para ver los detalles.
Cómo ver la actividad del renderizador
Consulta la actividad de renderización en el segmento Renderizador. Puedes expandir cada procesador para ver las actividades y hacer clic en cada elemento para ver los detalles.
Ver 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.
Cómo ver los tiempos de los usuarios
Para obtener mediciones de rendimiento personalizadas, puedes usar los Tiempos de usuario y visualizar tus tiempos con el segmento Tiempos. 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, sigue estos pasos:
- Marca lugares en tu aplicación con
performance.mark(). - Mide el tiempo transcurrido entre las marcas con
performance.measure(). - Registra el rendimiento.
- Consulta las mediciones en el segmento Timings. Si no puedes ver la pista, consulta Tiempos de usuario en Configuración.
- Para ver los detalles, haz clic en el tiempo de 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 la eliminación.