El navegador Google Chrome obtiene HUD que ofrece métricas de rendimiento de la página web en tiempo real

Tecnología / El navegador Google Chrome obtiene HUD que ofrece métricas de rendimiento de la página web en tiempo real 2 minutos de lectura Mensajes de notificación de Chrome Canary

Google Chrome



Google ofrece una pantalla informativa Heads-Up Display (HUD) para los Navegador Chrome . La superposición ofrece métricas clave de rendimiento de las páginas web en tiempo real. Esto permitirá a los usuarios comprender el impacto que tienen las páginas web en el rendimiento del navegador y el dispositivo.

La nueva superposición de rendimiento de la página web en tiempo real, actualmente como función experimental, esencialmente amplía la Elementos fundamentales de la Web plataforma que Google lanzó a principios de este año.



Google Core Web Vitals obtiene una superposición de rendimiento de página web visual y en tiempo real:

Google Core Web Vitals mide el rendimiento de una página web y las métricas de experiencia del usuario que se necesitan para ofrecer una buena experiencia de usuario cuando navega por un sitio web. Los elementos vitales actualmente incluyen la pintura de contenido más grande (LCP), el retardo de primera entrada (FID) y el cambio de diseño acumulativo (CLS).



  • Pintura con contenido 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 ocurrir dentro de 2,5 segundos de cuándo comienza a cargarse la página.
  • Retardo 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 cuánto cambia el contenido visible en la ventana gráfica, así como la distancia que se desplazan estos elementos. Las razones comunes para CLS son cuando se muestran anuncios que empujan hacia abajo el contenido visible. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0.1.

Por cierto, Google comenzará a tener en cuenta las métricas de Core Web Vitals dentro de los algoritmos de clasificación para los sitios web buscados y visitados a través del motor de búsqueda de Google. En otras palabras, los sitios web tendrán que mejorar sus métricas de LCP, FID y CLS para seguir siendo relevantes en los resultados de búsqueda de Google.



Métricas de Google Core Web Vitals como función incorporada visible en el navegador web Chrome:

En las compilaciones de Google Chrome Canary, la empresa está creando un HUD integrado que muestra métricas de rendimiento en tiempo real mientras usa una página web. Hasta hace poco, los usuarios de Chrome podían acceder a las métricas mediante una extensión.

[Crédito de la imagen: BleepingComputer]

El nuevo HUD estará ubicado en la parte superior derecha de una página web. Mostrará métricas de rendimiento para la pintura con contenido más grande (LCP), el retardo de primera entrada (FID) y el cambio de diseño acumulativo (CLS). El HUD también incluirá el marco caído promedio (ADF).



ADF es un métrica de suavidad que mide la GPU y el rendimiento de procesamiento de una página web. Cuanto más bajo sea el ADF, más fluida será la página, mientras que los marcos caídos más altos causarán 'tirones' o tartamudeo y entrecortamiento al utilizar la página web.

Cómo habilitar Google Core Web Vitals HUD en el navegador Chrome:

Para probar el nuevo HUD de métricas de rendimiento de Google Core Web Vitals, los usuarios deben instalar primero Google Chrome Canary .

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

  1. Entrar 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 'Aparece la bandera, haga clic en el menú desplegable y seleccione' Habilitado .’
Etiquetas Cromo google