Que es el FID web vitals

¿Qué es el First Input Delay o FID y cómo optimizarlo?

El retraso de la primera entrada, First Input Delay o FID, es el tiempo que transcurre entre la primera interacción del usuario con la página web y la respuesta de la página web.

El retardo de la primera entrada (FID) también es una métrica de tiempo de carga centrada en el usuario (Web Vitals).

Además, FID es una señal importante para ver la «capacidad de respuesta de carga» de la página web.

Incluso si una página web se carga más rápido que sus competidores sin permitir que los usuarios interactúen, es una situación que no deseamos en nuestro sitio web, ya que puede ser percibida como un mal funcionamiento por los usuarios y también por los motores de búsqueda.

El diseño y la maquetación web son factores importantes para la experiencia de usuario y el SEO, pero tampoco se calculan ni se perciben como una «métrica».

Es posible medir la productividad y la eficiencia del diseño web y la maquetación mediante métodos indirectos como las pruebas A / B, la creatividad, la comparación analítica y la experiencia.

Pero las métricas de velocidad de la página se pueden calcular directamente. Gracias a esta diferencia, los motores de búsqueda y varias herramientas de UX intentan calcular y medir métricas de velocidad de página centradas en el usuario de forma más profunda y detallada.

En este artículo, nos centraremos en la definición, función, medición y optimización del FID.

¿Qué es FID o Firt Input Delay?

FID es la medida de la primera interacción procesable del usuario con la página web. Esta interacción puede ser un clic en un campo de entrada, eventos de entrada o cualquier tipo de interacción del usuario impulsada por Javascript (en términos de eventos de entrada).

Sin procesar los detectores de eventos y los controladores de eventos, un navegador no puede mostrar al usuario la página web correctamente.

Incluso si esos controladores y escuchas de eventos fueran procesados, si el hilo principal de un navegador está en un cuello de botella, es posible que aún no responda al usuario.

Debido a este tipo de relaciones entre los componentes de la página web, un SEO y un desarrollador deberían poder calcular y analizar la interacción de los activos de la página web entre sí durante la carga de la página.

¿Qué es un buen puntaje FID para los usuarios?

  • Un buen FID es inferior a 100 MS (verde).
  • Entre 100 MS y 300 MS pueden percibirse como aceptables (amarillo).
  • Si el FID es superior a 300 MS, debería mejorarse (rojo).

Que es el FID web vitals

Si el 75% de los usuarios y las sesiones han experimentado una sincronización de FID por debajo de los 100 MS, significa que el sitio web funciona bien en términos de First Input Delay.

¿Cómo medir FID en navegadores?

First Input Delay o Input Latency sólo calcula el tiempo entre la interacción y su ejecución.

FID no incluye el evento en sí en su definición. El desempeño del evento puede afectar la experiencia del usuario, pero aún así, un desarrollador y un SEO deben recordar que FID es solo el proceso de esperar el comienzo del evento mientras la página web intenta responder a la interacción del usuario.

Los activos de página grandes y pesados ​​se descargan durante el First Contentful Paint y el Time to Interactive. La “First Contentful Paint” o “First Significant Paint” son las métricas que muestran el momento en que la página web se vuelve visible y entendible para el usuario durante la carga de la página web.

First Input Delay o Input Latency, por otro lado, intenta capturar el intervalo de tiempo del primer momento útil de este componente significativo de la página web.

El FID también puede variar según el momento exacto de la primera entrada. Si la primera entrada ocurre durante la tarea más larga y pesada para el hilo principal del navegador, se calculará como más alta de lo habitual.

Debido a esta situación, el tiempo total de bloqueo también es otra métrica importante de velocidad de página y rendimiento de carga de página web.

First Input Delay y Asynchronous Loading de los activos de la página web

Para mejorar el FID, algunos desarrolladores siempre usan la carga asincrónica (async). La carga asincrónica significa que los componentes de la página web se cargan en paralelo entre sí en el mismo momento.

Esta situación también crea un cuello de botella durante la carga de la página web. Pero, dado que se cargan de forma asincrónica, esto significa que el navegador puede percibir la primera entrada del usuario para procesar los controladores de eventos.

Pero dado que el navegador también busca, descarga y procesa los otros activos de la página web, el evento que el usuario espera no puede suceder como debería.

Por lo tanto, la carga asincrónica puede mejorar el tiempo de FID ya que «el evento en sí no está incluido en el cálculo de FID», pero esto no significa necesariamente que la experiencia del usuario haya mejorado.

FID y Event Listener

Para calcular el FID, no siempre necesitamos detectores de eventos. La mayoría de los eventos basados ​​en la interacción del usuario no requieren un detector de eventos. La condición importante para el cálculo de FID es tener una entrada. Especialmente tratamos de encontrar el primer tiempo de inactividad del hilo principal después de la entrada recibida.

En este contexto, puede ver los elementos HTML que no requieren un detector de eventos.

  • <input> campos.
  • <textarea> campos.
  • <select> elementos.
  • <option> elementos.
  • <a> elementos.

Los elementos HTML que no requieren un detector de eventos pueden ser más, pero para el mensaje que estamos tratando de dar, estos son suficientes.

¿Por qué es más importante el FID?

Esta pregunta puede leerse así «¿por qué el Second Input Delay  no es tan importante como el First Input Delay?».

Porque el FID refleja la primera interacción del usuario con la página web. La mayoría de los usuarios saben qué hacer en la página web, ya que vienen con una intención de usuario específica. Si no pueden ver el «contenido» y no pueden interactuar con el «contenido», esto frustrará a la mayoría de los usuarios y los sistemas de Google detectarán esa frustración cuando vuelva a las SERPS en busca de otra URL que satisfaga su intención de búsqueda .

Importancia del First Input Delay

  • El FID y la primera interacción del usuario con el sitio web es importante. El cerebro humano puede crear su visión y opinión generales a través de la primera impresión. Si la primera interacción no es lo suficientemente rápida, el usuario podría pensar que el sitio web no es confiable o de calidad.
  • La mayoría de los errores de capacidad de respuesta de carga y los problemas de interactividad de carga ocurren mientras se cargan las páginas web. Es por eso que es importante responder a lo que busca el usuario durante la fase de carga.
  • El FID y el Input Delays after son dos términos diferentes en la ciencia de la velocidad de la página. Separarse unos de otros ayuda a los desarrolladores y SEO a pensar de forma más analítica y estructurada.

¿Cuáles son los Input Example?

En pocas palabras, existen los Inputs Examples en los Inputs Events. Por lo tanto, el desplazamiento o el zoom no se cuentan como entrada del usuario y no se evalúan en el FID.

Además, las «acciones continuas» como el zoom y el desplazamiento se pueden realizar desde otro hilo del navegador para que los navegadores puedan ocultar su latencia.

En resumen, los retrasos de entrada (Input Delay) se encuentran en la sección R del modelo de rendimiento “RAIL= Response, Animation, Idle, Load”.

modelo rail web vitals

RAIL es un modelo de rendimiento centrado en el usuario que proporciona una estructura pensada en la velocidad de carga.

El modelo divide la experiencia del usuario en acciones clave (por ejemplo, tocar, desplazarse, cargar) y le ayuda a definir los objetivos de rendimiento para cada una de ellas.

RAIL representa cuatro aspectos distintos del ciclo de vida de las aplicaciones web: respuesta, animación, inactivo y carga. Los usuarios tienen diferentes expectativas de rendimiento para cada uno de estos contextos, por lo que los objetivos de rendimiento se definen en función del contexto y la investigación de UX sobre cómo los usuarios perciben los retrasos .

 

¿Qué pasa si un usuario nunca crea un Input Example durante la carga de la página?

No todas las entradas del usuario están incluidas en las primeras entradas como se dijo antes.

Además, todas las entradas del usuario no pueden ocurrir durante los tiempos de inactividad del hilo principal del navegador.

A veces, cuando el hilo principal del navegador y la CPU del dispositivo están ocupados, el usuario intentará interactuar con la página web y, a veces, esto sucederá durante el tiempo de inactividad del hilo principal.

La métrica importante aquí es que brinda a los usuarios la mejor posibilidad de crear un FID más corto por debajo de los 100 MS con alta probabilidad.

¿Por qué FID no incluye el propio evento en el cálculo?

Si los eventos basados ​​en el usuario se incluirían en el FID, los desarrolladores intentarían crear más eventos de carga asincrónicos e intentarían envolver sus controladores de eventos con “setTimeout ()”, “requestAnimationFrame ()”.

Esto acortará el FID pero también empeorará la experiencia del usuario. Además, calcular el FID real no sería posible ya que cada evento tiene una sincronización diferente, no pudimos separar el FID real del evento en sí.

Para realizar un cálculo más objetivo y sencillo para la experiencia del usuario durante la fase de carga de la página, FID no incluye el evento en sí.

¿Cómo medir la FID?

El First Input Delay no se puede medir mediante los simuladores o las herramientas de velocidad de página.

Solo se puede medir a través de las experiencias reales de los usuarios. A través de Bigquery y Chrome Experience Report de Google, un SEO puede ver el porcentaje real de FID rápido o lento para un tiempo y sitio web específicos.

Pero, el tiempo de bloqueo total (Total Blocking Time o TBT) es el término estrechamente relacionado con el FID y el TBT se puede medir a través de herramientas con datos de laboratorio como PageSpeed Insights. Por lo tanto, un TBT bajo significa una mejor posibilidad de FID para los usuarios.

total blocking time o TBT

Las herramientas siguientes se pueden utilizar para analizar el retardo de la primera entrada de una entidad web.

  • Pagespeed Insights
  • Chrome User Experience Reports
  • Search Console (Core Web Vitals)
  • Firebase Performance Monitoring

¿Cómo mejorar el FID?

Dado que el tiempo total de bloqueo se puede medir a través de tareas de más de 40 MS durante la carga de la página, mejorar el TBT también mejorará el FID. Los mejores métodos para mejorar la FID se pueden encontrar a continuación:

  • Optimizar el orden de carga de recursos.
  • Optimice el tiempo de ejecución de Javascript.
  • Aplazar la ejecución de los Activos Javascript no críticos.
  • Minimice la actividad de Polyfills no utilizada para el navegador.
  • Intente aprovechar Webpack, Parcel y Rollup como paquetes de módulos.
  • Reducir la cantidad de Javascript de terceros.
  • Disminuir el recuento y el tamaño de las solicitudes de activos.
  • Mejorar el tiempo de respuesta del servidor.
  • Divida el código y use CSS crítico para la sección superior de la página web.
  • Minimizar el trabajo de procesamiento de subprocesos principal del navegador.
  • Utilice la renderización del lado del servidor (SSR) junto con la caché del lado del servidor.
  • Utilice Web-Workers junto con Service-worker.

Junto con estos, intente centrarse en FID para los dispositivos móviles. Verá un FID más alto para los dispositivos móviles de acuerdo con los dispositivos de escritorio, debido a esta diferencia, especialmente el proceso de optimización debe realizarse para el rendimiento del usuario móvil.

Conclusiones

El FID es uno de los factores más importantes en términos de la experiencia del usuario y de crear una impresión confiable en la página web.

También afecta al rendimiento de SEO, ya que la UX es hermana del SEO. La mala experiencia del usuario y la mala puntuación de FID también crean sospechas sobre los algoritmos del motor de búsqueda.

Si su página web no responde durante la carga debido a un orden de carga de recursos o una estructura de código incorrectos, un motor de búsqueda podría volver a clasificar los resultados de la búsqueda para crear una mejor experiencia de usuario y satisfacción con los clics.

Debido a este efecto directo e indirecto del FID y las métricas de rendimiento basadas en el usuario, es necesario que el SEO y el desarrollo se unan más para garantizar una experiencia de usuario plena y minimizar el impacto del Speed Update que ocurrirá en Mayo del 2021.