No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Rendimiento frontend y Core Web Vitals

26/28
Recursos

Aportes 24

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃olapsamos鈥 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.

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 鈥淐LS - Cumulative Layout Shift鈥 Me parece algo que empresas no-茅ticas podr铆an utilizar a su favor鈥