First Input Delay

First Input Delay. Retardo De La Primera 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. Un consultor seo de primer nivel estará pendiente de esta métrica.

Última actualización: 24 de marzo del 2021

A que se debe First Input Delay. Retardo De La Primera Entrada.

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.

La codificación desordenada causa pausas excesivas en las descargas de páginas web, se inicia y se detiene. Esto ocasiona la insensibilidad al comportamiento de los visitantes que intentan interactuar con la página.

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.

¿Por qué el navegador deja de responder?

Un navegador es un software que realiza tareas para mostrar páginas web. Estas tareas incluyen cargar código, imágenes, fuentes, información de estilo y luego ejecutar (ejecutar) y construir páginas web de acuerdo con las instrucciones HTML.

Este proceso se llama renderizado. El término renderizado se refiere a lo que se debe hacer, que es lo que hace el navegador al juntar código e imágenes para renderizar una página web.

Cada tarea de renderizado se llama hilo. El término «hilo» es la abreviatura de «hilo de ejecución», que significa una serie de acciones individuales (en este caso, se refiere a las muchas tareas individuales realizadas al representar una página web).

En el navegador, hay un hilo que llama al hilo principal. El feed principal es responsable de crear (representar) las páginas web que ven los visitantes del sitio.

Pudieramos comparar al hilo principal como una carretera donde transitam imagenes, código etc.

Algunos códigos son largos y engorrosos. Esto hará que otras tareas se detengan y esperen a que el código lento grande salga de la autopista (descargue y ejecute hasta que finalice).

La forma de mejorar a una página web es optimizar el código descargado primero al ejecutar el código y proceder de manera ordenada para que la página web se pueda descargar lo antes posible.

Cómo usar FID para comprender mejor el estado de la interactividad en orígenes específicos y la web en su conjunto.

A partir de julio de 2018, FID está disponible en Chrome UX Report como una métrica experimental.

Rick habla sobre cómo usar FID para comprender mejor el estado de la interactividad en orígenes específicos y la web en su conjunto.

Transcripción y traducción de la explicación de Rick:

RICK VISCOMI del equipo de Desarrolladores de Google Chrome: Todos hemos experimentado la frustración de intentar utilizar una página web que parece congelada y no responde a la entrada del usuario.

Y por malo que sea, esto es parte de la experiencia del usuario al que no le hemos prestado mucha atención en nuestras herramientas de análisis.

En este episodio, examinamos más de cerca una nueva métrica llamada Demora de la primera entrada, (First Input Delay) y cómo podemos usarla para medir este tipo de experiencias de usuario En la red.

First Input Delay, o FID, es una nueva métrica con el objetivo de medir esa pequeña frustración que todos hemos sentido cuando intentamos interactuar con una página, pero no pasa nada por un tiempo.

Es posible que ya haya oído hablar de una métrica similar, el tiempo A Interactive, o TTI.

Pero la diferencia es que esta métrica solo nos dice cuánto tiempo tardó la página para ser interactiva, no el momento para responder a la interacción de un usuario.

La primera vez que un usuario interactúa con una página, como hacer clic, tocando, presionando una tecla, First Input Delay mide el tiempo que necesita para que el navegador responda realmente a ese gesto.

Esto también significa que una página sin gestos de entrada no tendrá First Input Delay.

Así que no cuente con que suceda para todos.

Las páginas que hacen muy poco trabajo en el hilo principal del navegador debe ser interactivas, lo suficientemente rápido para responder dentro de límites razonables.

Los estudios demuestran que un usuario percibirá un tiempo de respuesta de 100 milisegundos o menos cómo instantáneo.

Pero First Input Delay no solo se ve afectado por la cantidad de trabajo que realiza la página, también puede verse afectado por los propios usuarios.

Una página puede tener un TTI muy lento, pero mientras los usuarios no intenten interactuar con ella inmediatamente, por ejemplo, First Input Delay aún puede ser rápido.

Un usuario en un dispositivo de gama baja con una CPU lenta puede experimentar TTI más prolongado y peor FID.

Para ayudarnos a comprender cuán frustrante la primera experiencia de interacción es en la web, pasemos al informe de Chrome UX.

A partir de julio de 2018, FID está disponible como una métrica experimental en el conjunto de datos.

Esto significa que todavía no está completamente estandarizado, pero aún nos gustaría publicar los datos para su exploración.

Así que escribamos algunas consultas para comprender mejor el estado de First Input Delay en la web.

Acceder a él es igual que cualquier otra métrica de informe de Chrome UX, solo este campo tiene un espacio de nombres experimental antes de eso.

Aquí estamos sumando las densidades de todos los First Input Delay que experimenta menos de 100 milisegundos para developers.google.com.

Y resulta que este origen en realidad tiene más del 90% de las llamadas experiencias instantáneas.

También podemos consultar el porcentaje promedio de FID instantáneo experiencias en todos los orígenes.

Todo lo que tenemos que hacer es modificar la última consulta para eliminar el filtro de origen y dividir la densidad total por el número de orígenes en el conjunto de datos.

El First Input Delay rápido global es del 80%, por lo que no es tan alto como developers.google.com, pero sorprendentemente bueno.

¿Cómo se ve la distribución para First Input Delay? ¿más allá de 100 milisegundos?

Podemos sumar las densidades de todos los contenedores en los histogramas de todos los orígenes para mirar en una distribución media.

Visualizando los datos en Hojas de cálculo, puede ver que hay un pico de First Input Delay valores alrededor de 225 milisegundos.

Esto no es lento, pero para un usuario, esta demora es definitivamente lo suficientemente notable como para sentirse algo insensible.

A partir de ahí, la larga cola se extiende hasta los segundos.

En conjunto, casi el 2% de los valores de First Input Delay son de un segundo o más.

El impacto de JavaScript en el retraso de la primera entrada

JavaScript es como un pequeño motor que hace que sucedan cosas. Al ingresar el nombre en forma de tabla, puede aparecer un código JavaScript para garantizar que se ingresen el nombre y el apellido. Cuando se presiona el botón, se puede usar JavaScript para indicarle al navegador que genere un mensaje de agradecimiento en una ventana emergente.

El problema con JavaScript es que no solo debe descargarse, sino también ejecutarse. Por lo tanto, estas son las dos cosas que causan el retraso de entrada.

Si hay un archivo JavaScript grande cerca, el archivo bloqueará el resto de la página debajo del renderizador (volviéndose visible e interactivo) hasta que se complete la descarga y ejecución.

Esto se llama página bloqueada.

La solución obvia es eliminar estos tipos de códigos y colocarlos en la parte inferior de la página para que no interfieran con todos los demás elementos de la página que esperan ser procesados.

Pero puede ser un problema profesional, por ejemplo, si se coloca al final de una página web larga. La razón es que una vez que se carga la página grande y el usuario está listo para interactuar con ella, el navegador aún indicará que se está descargando (porque el archivo JavaScript grande se lanzó por última vez). La velocidad de descarga de esta página puede ser más rápida, pero se bloqueará mientras espera que se ejecute JavaScript.

¡Hay una solucion!

Atributos diferidos y asíncronos

Los atributos HTML Defer y Async son como señales de tráfico que controlan el inicio y la detención de la descarga y ejecución de JavaScript.

Los atributos HTML son algo que puede transformar elementos HTML, al igual que extender el uso o comportamiento del elemento.

Es como aprender una habilidad, que se convierte en un atributo de tu identidad.

En este caso, los atributos Defer y Async le dicen al navegador que no evite la fragmentación de HTML cuando se descarga. Estos atributos le dicen al navegador que mantenga el hilo principal al descargar JavaScript.

Atributos asincrónicos

Los archivos JavaScript con atributos Async se descargarán y ejecutarán inmediatamente después de la descarga. Cuando comenzó a ejecutarse, el archivo JavaScript bloqueó el hilo principal. Lea Cómo Elimino Los Recursos Que Bloquean El Procesamiento.

Por lo general, el archivo bloqueará el hilo principal cuando comience a descargarse. Pero no tiene atributos (ni retrasos).

Esto es independiente del hilo principal y se descarga en paralelo con él.

Este atributo es útil para archivos JavaScript de terceros (por ejemplo, y para compartir en redes sociales), el orden de ejecución de estos archivos no importa.

Async como su nombre indica implica que la carga del script será totalmente asíncrona. Esto permite que el navegador cargue y ejecute el script en paralelo, sin esperar que la página termine de cargar.

Atributo de defer

Los archivos JavaScript con «defer» también se descargarán al mismo tiempo.

Pero los archivos JavaScript perezosos no se descargarán. Después de descargar y renderizar la página completa, se ejecutará el script. Los códigos diferidos también se ejecutan en el orden en que aparecen en la página web.

Con el atributo defer es útil para archivos JavaScript que dependen de qué elementos de página se cargan y cuándo es importante el orden de ejecución.

El atributo defer indica al navegador que no espere por el script.

Todos los usuarios tienen diferentes tiempos de espera de entrada

Es importante darse cuenta de que la puntuación del retraso de la primera entrada es variable e inconsistente. La puntuación varía de un visitante a otro.

Las variaciones en la puntuación son inevitables porque la puntuación depende de las interacciones específicas de la persona que visita el sitio.

Algunos visitantes pueden distraerse e interactuar solo después de que todo esté cargado y listo para usar.

Por qué la mayoría de los sitios web no pueden aprobar la FID

Desafortunadamente, muchos sistemas de administración de contenido, temas y complementos no están diseñados para cumplir con este indicador relativamente nuevo.

Esta es la razón por la que tantos editores se sorprenden al descubrir que su sitio web no ha pasado la prueba del «primer retraso en la entrada».

Pero a medida que la comunidad de desarrollo de software web responda a las necesidades de la comunidad editorial de diferentes estándares de codificación, esto cambiará.

Toca esperar que los desarrolladores de software que crean sistemas de gestión de contenido puedan cumplir con los estándares.

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 priorizació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.

First Input Delay es unaimportantemétrica centrada en el usuario para medir la capacidad de respuesta de la carga porque cuantifica la experiencia que sienten los usuarios cuando intentan interactuar con páginas que no responden; un FID bajo ayuda a garantizar que la página sea utilizable». – web.dev/fid/

Comience a explorar First Input Delay en el informe de Chrome  UX. Esta es una métrica completamente nueva, así que deje un comentario ahora.

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 Hacer Un Seguimiento De Posiciones
¿Qué es CSS crítico? ¡Genéralo!
Centrarse En Palabras Clave De Cola Larga
Informe Seo Porqué Elaborarlos

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

promedio de puntuación

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

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.

Soporte a su negocio en el campo del posicionamiento web, optimización web y auditorías profesionales. Gracias a mis acciones, los sitios web obtienen un tráfico segmentado que se traduce directamente en ventas y conversiones en el sitio web con  efectos seguros durante muchos años.

Servicios de Comercio electrónicoServicios de e-Marketing y Estrategías
Montar una tiendaPosicionamiento en Goole
Posicionamiento de tiendasMarketing de contenidos
Notificaciones pushAuditorías de Contenido
Auditorías SEO
Páginas Web Gratis
Gestión de Google Ads
Asesoramiento y Consulta
Reparación de Sanciones de Google
Entrenamiento SEO
Reparación de Sitio Hackeado
Acelerar WordPress