Rendimiento frontend y Core Web Vitals

Core Web Vitals

Estándares de toda la industria para la excelencia:
 

• Largest Contenful Paint (LCP): cuanto se tarda el contenido más grande de tú sitio web.
• First Input Delay (FID): desde que quieres darle un input a la página.
• Cumulative Layout Shift (CLS): mire el gift prro >:u
   
  Si no cumples con estos estandafares, Google le quita relevancia a tú página.

Visión General

ℹ️ Concepto Clave
Web Vitals son una iniciativa de google para unificar la calidad de aspectos esenciales para la experiencia de usuario en la web.

.
De manera general, se debe implementar cierta calidad de software que se entra a los usuarios. Priorizando en la simpleza del código, entregando métricas descriptivas de nuestro sitio o página web.
.

Core Web Vitals

ℹ️ Definición
Son un subconjunto de Web Vitals que son aplicables a todas las páginas web, representando una faceta distinta de la experiencia del usuario.

.
Las Core web Vitals, son temporales donde actualmente nos concentramos en 3 aspectos que reflejan la experiencia de usuario.
.

.

ℹ️ Definición
La Largest Contentful Paint (LCP) informa el tiempo de procesamiento de la imagen o el bloque de texto más grande visible dentro de la ventana gráfica, en relación con el momento en que la página comenzó a cargarse por primera vez.

.
Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener un render del contenido más grande de 2,5 segundos o menos.
.

.

ℹ️ Definición
First Input Delay (FID) mide el tiempo desde que un usuario interactúa por primera vez con una página (es decir, cuando hace clic en un enlace, toca un botón o usa un control personalizado con JavaScript) hasta el momento en que el navegador puede comenzar a procesar los eventos.

.
Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener un Retraso en la primera entrada de 100 milisegundos o menos.
.

ℹ️ Definición
Cumulative Layout Shift (CLS) es una medida que define por puntaje a los cambios de diseño frente al comportamiento inesperado ante eventos.

.
Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una puntuación CLS de 0,1 o menos.
.

En el caso de mi FoodMe el LCP me está rompiendo el negocio, de resto los indicadores se ven bien.

Aún cuando lo “colapsamos” un día entero con el synthetic que hacìa ordenes cada minuto, parece que tenemos buenos indicadores 😁.

Se puede notar el aumento de tiempo de carga que genera gitch para no saturarse (suele apagarse después de cierto tiempo) y esas nuevas consultas se destacan en las gráficas abajo.

https://docs.newrelic.com/docs/browser/browser-monitoring/getting-started/browser-summary-page/

Les comparto mis Core Web Vitals

• LCP - Largest Contentful Paint – Renderizado del mayor elemento con contenido
• FID - First Input Delay – Latencia de la primera interacción
• CLS - Cumulative Layout Shift – Cambios de diseño acumulados

LCP, FID & CLS + FRONT END Y BACK END (24 HOURS)

Frontend Performance
Se refiere a todas las metricas que puedan tomarse desde el Frontend y que cumplan con su ovjetivo.

Availabiliity (Disponibilidad)
Es accesible, se puede visitar, esta up running?

Se recomienda usar el ping alert.

Funcionability (Funcionabilidad)
La aplicación hace lo que se supone que debe hacer, el ususrio puede completar las tareas críticas, pueden comprar?

Se recomienda usar synthetics.

Performance (Actuación)
El sitio responde rápido, responde bien o demora en cargar?

Configurar tresholds y alerts de tiempos de carga

Comparto documentación donde New Relic nos especifica los distintos atributos que posee para consultar los web vitals.
PageViewTiming: Async or dynamic page details
|
Además de eso, dejo la sentencia en NRQL para obtener el promedio de nuestros los web vitals desde hace 1 semana.

FROM PageViewTiming SELECT average(firstContentfulPaint), average(largestContentfulPaint), average(cumulativeLayoutShift) since 1 week ago

Todo muy bien =P

Mis Core Web Vitals no están tan bien como quisiera

Lab:

Estos son los resultados para los 3 Core Web Vitals, de momento todos se encuentran dentro de los tiempos requeridos y claramente el frontend tarda mucho más que el backend en cargar.

LCP y FID están ok y CLS en warning
El frontend demora más tiempo

30 minutos

24 Horas

Yo cambie el selector de tiempo a 7 días para mostrar más interacción, es sitio está en verde todo 😃 :

Y el Frontend siempre suele tardar más tiempo en cargar.

En mí caso todo esta andando bien perron!

En mi caso deberia mejorar el LCP, Largest Contentful Paint ya que la primera carga suele ser lenta

Los CWV de mi app no estan tan bien a mi parecer, CLS es el más crítico, y el FE está tomando un tiempo de carga significativo, el BE está respondiendo en un tiempo prudente… es bueno.

Esto del “CLS - Cumulative Layout Shift” Me parece algo que empresas no-éticas podrían utilizar a su favor…