Estadísticas de rendimiento: Obtén estadísticas prácticas sobre el rendimiento de tu sitio web.

Sofia Emelianova
Sofia Emelianova

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

  1. Abre Herramientas para desarrolladores.
  2. Haz clic en Más opciones > Más herramientas > Estadísticas de rendimiento.

    Estadísticas de rendimiento en el menú.

    También puedes usar el menú de comandos para abrir el panel Estadísticas de rendimiento.

    Mostrar el comando Estadísticas de rendimiento en el menú Comando

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).

  1. Abre esta página de demostración en una pestaña nueva y, en la página, abre el panel Estadísticas de rendimiento.
  2. 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:

    Limitación.

  3. 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.

    Opciones de inicio.

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.

Controles de reproducció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.

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. 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.

Panel de estadísticas

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.

Detalles de la estadística.

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.

Consulta las métricas de rendimiento de las Métricas web.

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.

Umbrales de LCP.

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.

La insignia de LCP.

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.

El panel de detalles.

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.

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

Seguimiento de 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.

Intervalo y ventana de sesión

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.

CLS.

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.

Consulta los detalles del cambio de diseño.

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.

identificar las posibles causas raíz.

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.

Comprende la puntuación de los cambios de diseño.

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.

Umbral de CLS.

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.

Gráfico de fondo del período de interrupción.

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 la actividad de red.

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.

Consulta la actividad del renderizador.

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.

Consulta la actividad de la GPU.

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:

  1. Marca lugares en tu aplicación con performance.mark().
  2. Mide el tiempo transcurrido entre las marcas con performance.measure().
  3. Graba tu interpretación.
  4. Consulta las mediciones en el segmento Tiempos. Si no puedes ver la pista, consulta Tiempos de usuario en Configuración.
  5. Para ver los detalles, haz clic en el tiempo en la pista. El seguimiento de tiempos

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.

Configuración.

Cómo exportar una grabación

Para guardar una grabación, haz clic en Exportar .

Exporta una grabación.

Cómo importar una grabación

Para cargar una grabación, selecciona Import .

Importa una grabación.

Cómo borrar una grabación

Para borrar una grabación, haz lo siguiente:

  1. Haz clic en Borrar. Se abrirá un diálogo de confirmación. Borra la grabación.
  2. En el cuadro de diálogo, haz clic en Borrar para confirmar esta acción.