First Input Delay

First Input Delay. Primer Retardo de Entrada.

El primer retardo de entrada  o First Input Delay (FID) mide desde la primera interacción del usuario con su sitio web (por ejemplo, cuando hace clic en un enlace, botón o usa un control JavaScript personalizado), hasta el momento en que el navegador realmente puede responder a la interacción.

El retraso de entrada se debe a que el hilo principal del navegador está ocupado haciendo otras cosas, por lo que no puede responder al usuario. Una razón común para esto es que el navegador está ocupado analizando y ejecutando grandes archivos JavaScript cargados por la aplicación.

First Input Delay es el período de tiempo (en milisegundos) que el usuario interactúa con la página web por primera vez y el navegador responde a esta interacción. Los comportamientos de desplazamiento y zoom no están incluidos en este indicador.

Este tiempo a que se refiere primer retardo de entrada, es entre el contenido que se dibujó en la página (FCP) y todas las funciones pueden responder al tiempo de interacción del usuario.

First Input Delay(FID). Primer retardo de entrada

Si el usuario interactúa con la página cuando el subproceso principal está más ocupado, el tiempo de respuesta de demora será mayor. Si el usuario interactúa con la página durante el período inactivo del subproceso principal, el navegador puede responder de inmediato. Entonces, para el indicador First Input Delay (FID), debemos prestar atención a la distribución general del valor primer retardo de entrada, no a un solo valor.

Cómo Optimizar First Input Delay

La causa principal de un First Input Delay (FID) deficiente es la ejecución pesada de JavaScript. La optimización de cómo JavaScript analiza, compila y ejecuta en su página web reducirá directamente el FID.

Por lo general, depende del hecho de que JavaScript debe descargarse, analizarse y ejecutarse en el hilo principal, y en ausencia de la velocidad del dispositivo (teniendo en cuenta los dispositivos móviles de gama baja). Cuanto mayor sea el tiempo de retraso, peor será la experiencia del usuario.

Ejecución pesada de JavaScript

El navegador no puede responder a la mayoría de las entradas del usuario mientras ejecuta JavaScript en el hilo principal. En otras palabras, el navegador no puede responder a las interacciones del usuario mientras el hilo principal está ocupado. Para mejorar esto:

Para una lectura más profunda lea optimización de first input delay

Resumen

Como desarrolladores web, First Input Delay es algo que queremos mantener al mínimo. Algunos sitios no tendrán un primer retardo de entrada, ya que el usuario puede no interactuar con el sitio de otra manera que no sea desplazarse o hacer zoom (que no están cubiertos por el FID). Básicamente, el subproceso principal se bloquea predominantemente al analizar, compilar y ejecutar JavaScript. En dispositivos más lentos como los móviles de gama baja, esta vez se incrementa dramáticamente.

Una causa común de los FID largos son los grandes paquetes de JavaScript con tareas de inicialización de larga duración. Aunque puede que no sea posible reducir un tamaño de paquete dado, podemos cambiar la estrategia que tomamos para manejar su ejecución. Por ejemplo, podemos dividir las tareas de larga duración en tareas más pequeñas (menos de 50 ms), lo que permite que el navegador ceda el procesamiento de procesamiento y entrada. Los navegadores generalmente priorizarán las interacciones del usuario sobre las tareas del sitio en un proceso llamado priotizitación de entrada, por lo que dividir el código en tareas más pequeñas le permite al navegador la oportunidad de priorizar cualquier entrada del usuario. A medida que las tareas en JavaScript se ejecutan hasta su finalización, una forma simple de dividirlas es forzar una nueva tarea utilizando setTimeout con un temporizador ms.

 

Contenido Relacionado:

 

Largest Contentful Paint
Cumulative Layout Shift
Core Web Vitals. Cómo Medir Estas Señales De Calidad
Cómo Optimizar La Velocidad De Carga Con Lighthouse
Que Es Speed Index
Herramientas CSS no utilizadas. Análisis
Cómo los Enlaces negativos afectan su sitio y su marca
Cómo Eliminar CSS No Utilizadas
Centro de Herramientas SEO
Bitácora de SEO
Problemas Comunes De Enlazado Interno. Deshágase De Ellos
¿Qué Es El Zumo De Enlaces?
Qué Es El Volumen De Búsquedas De Palabras Clave
Porque Y Cómo Posicionarse En Los SERPs.
¿Qué es CSS crítico? ¡Genéralo!
Centrarse En Palabras Clave De Cola Larga

Sigueme
Últimas entradas de Estela Silva H. (ver todo)

Política de comentarios: Me encantan los comentarios y agradezco el tiempo que los lectores dedican para compartir ideas y para retroalimentación. Sin embargo, todos los comentarios son moderados manualmente y aquellos que considero spam o comentario promocional se eliminarán.

This function has been disabled for Blog de Marketing.