Descubre los problemas de rendimiento de la renderización con esta referencia de opciones relacionadas con el rendimiento en la pestaña Renderización.
Destaca las áreas que se volvieron a pintar con destello de pintura
Con esta opción activada, en Chrome la pantalla parpadeará con color verde cada vez que se vuelva a pintar.
Para ver las áreas que se están volviendo a pintar, haz lo siguiente:
- Abre la pestaña Rendering en esta demo y marca Paint flashing.
- Observa el cambio de imagen que se destaca en verde.
Si en otra página ves toda la pantalla parpadea con verde o áreas que no pensaste que deberían pintarse, considera investigar más a fondo.
Destaca las regiones de cambio de diseño
Los cambios de diseño provocan repeticiones inesperadas y pueden ser no solo molestos sino perjudiciales.
Para ver la ubicación y el momento de los cambios de diseño en una página, haz lo siguiente:
Abre la pestaña Rendering y marca Layout Shift Regions.
Actualiza la página. Las áreas de cambio de diseño se destacan brevemente en púrpura.
Cómo ver capas y mosaicos con bordes de capas
Usa Bordes de capas para ver una superposición de bordes de capas y mosaicos en la parte superior de la página.
Para habilitar los bordes de las capas, haz lo siguiente:
- Abre la pestaña Renderización y marca la opción Fronteras de la capa.
- Observa los bordes de las capas en naranja y oliva, y los mosaicos en cian.
Consulta los comentarios de debug_colors.cc para obtener una explicación de los códigos de color.
Consulta los fotogramas por segundo en tiempo real con las estadísticas de renderización de fotogramas
Las Estadísticas de renderización de fotogramas son una superposición que aparece en la esquina superior derecha del viewport.
Para abrir las Estadísticas de renderización de fotogramas, haz lo siguiente:
- Abre la pestaña Renderización y habilita la casilla de verificación Estadísticas de renderización de fotogramas.
- Observa las estadísticas en la esquina superior derecha de la página.
La superposición Estadísticas de renderización de fotogramas muestra lo siguiente:
- Estimación en tiempo real de fotogramas por segundo a medida que se ejecuta la página.
- Enmarca el cronograma como un diagrama con tres tipos de fotogramas:
- Fotogramas renderizados correctamente (líneas azules)
- Fotogramas presentados parcialmente (líneas amarillas)
- Marcos descartados (líneas rojas)
- El estado de la trama de GPU: activado o desactivado. Para obtener más información, consulta Cómo obtener la rasterización de GPU.
- Uso de memoria de GPU: Es la cantidad de MB de memoria usados y máximos.
Identifica los problemas de rendimiento del desplazamiento
Usa Problemas de rendimiento de desplazamiento para identificar los elementos de la página que tengan objetos de escucha de eventos relacionados con el desplazamiento que puedan dañar el rendimiento de la página.
Para ver los elementos que podrían ser problemáticos, haz lo siguiente:
- Abre la pestaña Renderización y marca Problemas de rendimiento del desplazamiento.
- Observa los elementos potencialmente problemáticos que se destacan.
Ver Core Web Vitals
Las Métricas web son una iniciativa de Google para brindar orientación unificada sobre los indicadores de calidad que son esenciales para ofrecer una excelente experiencia del usuario en la Web.
Las Métricas web esenciales son el subconjunto de Métricas web que se aplican a todas las páginas web. Cada una de las Métricas web esenciales representa una faceta distintiva de la experiencia del usuario, se puede medir en el campo y refleja la experiencia del mundo real de un resultado crítico centrado en el usuario. Las Métricas web esenciales son las siguientes:
- Procesamiento de imagen con contenido más grande (LCP): Mide el rendimiento de carga. Para proporcionar una buena experiencia del usuario, el LCP debe ocurrir dentro de los 2.5 segundos posteriores al momento en que la página comienza a cargarse.
- Interaction to Next Paint (INP): Mide la interactividad. Para proporcionar una buena experiencia del usuario, las páginas deben tener un INP de 200 milisegundos o menos.
- Cambio de diseño acumulado (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia del usuario, las páginas deben mantener un CLS de 0.1 o menos.
Usa la extensión de Chrome de Métricas web esenciales para ver los valores de Métricas web esenciales de tu página.