Google Chrome obtiene una superposición de rendimiento de la página web en tiempo real

Google Chrome está obteniendo una nueva pantalla de visualización frontal del navegador (HUD) que muestra las métricas de rendimiento de las páginas web que está visitando.

En abril, Google presentó una nueva iniciativa llamada Elementos vitales web básicos que mide el rendimiento de una página web y las métricas de experiencia del usuario necesarias para ofrecer una buena experiencia al usuario cuando navega por un sitio web.

Las métricas principales de Web Vital que Google está midiendo actualmente son la pintura de contenido más grande (LCP), el retraso de la primera entrada (FID) y el cambio de diseño acumulativo (CLS), que se describen a continuación.

• La pintura Contentful más grande (LCP) mide cuándo se hace visible el elemento más grande en la pantalla visible de un navegador. Para proporcionar una buena experiencia de usuario, LCP debe realizarse dentro 2,5 segundos cuando la página comienza a cargarse por primera vez.
• Retraso de la primera entrada (FID) mide el tiempo desde que un usuario interactúa por primera vez con una página hasta que el navegador puede responder a esa interacción. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID inferior a 100 milisegundos.
• Cambio de diseño acumulativo (CLS) mide la cantidad de contenido visible que se mueve en la vista y qué tan lejos se mueven estos elementos. Las razones comunes para CLS son cuando aparecen anuncios que empujan el contenido visible hacia abajo. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1.

En mayo de 2021, Google utilizará las métricas Core Web Vitals de un sitio web como factor de clasificación en los algoritmos de los motores de búsqueda de Google.

Para ayudar a los usuarios a analizar estas métricas en las páginas web, Google ha lanzado una extensión de Chrome llamada Vitali web que muestra un HUD en pantalla con métricas de rendimiento para las páginas web que está visitando.

El HUD métrico de Web Vitals será una función integrada

En las compilaciones de Google Chrome Canary, Google está eliminando la necesidad de una extensión y creando un HUD integrado que muestra métricas de rendimiento en tiempo real mientras se usa una página web.

Como puede ver a continuación, este HUD se ubicará en la parte superior derecha de una página web y mostrará métricas de rendimiento para la pintura con contenido más grande (LCP), el retraso de la primera entrada (FID) y el cambio de diseño acumulativo (CLS),

Como parte de esta función, los desarrolladores de Chrome también han agregado una nueva medida llamada Marco caído promedio (ADF).

La métrica ADF es una métrica de suavidad que mide la GPU y el rendimiento de representación de una página web. Cuanto más bajo sea el ADF, más suave será la página, mientras que los marcos más altos causarán "tirones" o tartamudeo e inestabilidad al usar la página web.

Todavía queda bastante trabajo por hacer con esta función, ya que el texto es demasiado pequeño para leerlo fácilmente, puede superponerse a partes importantes de una página web y no hay una manera fácil de desactivar el HUD. Google está trabajando activamente en la solución [1, 2] estos problemas.

Sin embargo, una vez que esté lista, esta función será muy útil para los desarrolladores que buscan exprimir el mayor rendimiento posible de sus sitios o para los SEO que quieran posicionarse mejor en los resultados de búsqueda de Google.

Cómo habilitar el HUD de referencia de Chrome

Para probar las nuevas métricas de rendimiento de HUD, primero debe instalarlas Google Chrome Canary.

Una vez que Chrome Canary esté instalado, puede habilitar la función HUD siguiendo estos pasos.

1. iniciar sesión en chrome: // banderas en la barra de direcciones de Chrome y presione enter.
2. Cuando se abra la pantalla de experimentos, busque "PIEL. "
3. Cuando el 'Mostrar métricas de rendimiento en HUD"se muestra la bandera, haga clic en el menú desplegable y seleccione"Calificado. "

   

4. Reinicie el navegador cuando se le solicite.

Una vez que Google Chrome se reinicia, verá las métricas de rendimiento de HUD mientras navega por la web.