First Input Delay explained

Google ha utilizado durante mucho tiempo el tiempo de carga de la página, el tiempo que tarda una página en cargarse por completo después de que alguien intenta visitarla , a la hora de decidir qué páginas recomendar a los buscadores. Sin embargo, el tiempo de carga no cuenta toda la historia.

Así es que llega el First Input Delay.

Si has leído nuestra cobertura anterior de Core Web Vitals, la actualización de experiencia en página y priorización de UX de Google, ya has visto que el First Input Delay (o retraso de la primera entrada) es una de las tres métricas que conforman los Core Web Vitals que Google analiza al determinar la experiencia de página.

En esta guía (una de las cuatro que profundiza en los detalles de CWV), cubriremos todo lo que necesitas saber para comprender qué es el First Input Delay, por qué es importante y cómo optimizar tu sitio web para FID.

¿Qué es First Input Delay?

First input delay, según la explicación de Google, es "el tiempo desde que un usuario interactúa por primera vez con una página hasta el momento en que el navegador puede comenzar a procesar los controladores de eventos en respuesta a esa interacción".

En otras palabras:

El FID es la cantidad de tiempo que le toma a una página responder a un usuario la primera vez que intenta hacer algo en la página.

Es como cuando recibes una llamada en tu teléfono. Cuando escuches que tu teléfono comienza a sonar, es posible que lo contestes de inmediato o tal vez tengas las manos ocupadas o estés en medio de hacer algo.

El tiempo entre el momento en que tu teléfono comienza a sonar y el momento en que realmente te mueves para contestar es el FID.

FID

Para comprender completamente el FID, veamos qué sucede cuando intentas interactuar con una página en la web:

  1. Tu navegador solicita al servidor del sitio web que descargue todos los archivos necesarios para cargar y representar la página.

  2. Tu navegador comienza a descargar y procesar archivos en lo que se llama el "hilo principal".

  3. A medida que el navegador lee el código HTML de la página, puede comenzar a representar partes de la página.

  4. Cuando el navegador encuentra archivos JavaScript, el hilo principal deja de leer el HTML y se centra en JavaScript.

  5. El navegador no volverá al código HTML hasta que termine de procesar el JavaScript, por lo que si el código tiene dos scripts en una fila, el hilo principal procesará ambos antes de volver al HTML.

Cada vez que el navegador encuentra un archivo JavaScript, repetirá los pasos 3-5. Por lo tanto, cargar una página web puede (y a menudo lo hace) detenerse y comenzar varias veces.

page load

Si un usuario intenta interactuar con la página mientras el hilo principal está ocupado procesando una secuencia de comandos, verá un retraso entre la acción y la respuesta de la página. El tiempo entre el momento en que el usuario interactúa con la página (hace clic en el botón, por ejemplo) y la página reacciona a la interacción es el "retraso de entrada", o input delay.

Una cosa importante a tener en cuenta aquí sobre FID: solo mide el tiempo entre la interacción del usuario y cuando el servidor comienza a reaccionar.

Entonces, cuando un usuario hace clic en el botón de reproducción en un video, FID se refiere a la cantidad de tiempo que le toma al sitio web comenzar a procesar el comando. No mide la cantidad de tiempo que realmente tarda el video en cargarse, almacenarse en búfer o comenzar a reproducirse.

La diferencia entre FID y velocidad de página

The difference between FID and page speed

En este punto, puedes estar pensando que FID suena muy parecido a otras métricas de velocidad de Google, como el tiempo de carga, el tiempo hasta el primer byte, el First Contentful Paint y el tiempo hasta la interactividad.

Si bien es cierto que cada uno de esos conceptos mide una cierta cantidad de tiempo, no son lo mismo que FID y, por lo tanto, miden diferentes aspectos de la usabilidad de una página.

Así es como FID se diferencia de otros aspectos de la velocidad de la página:

  • Tiempo de carga: El tiempo de carga se refiere a la cantidad de tiempo que le toma a un navegador cargar y renderizar completamente una página, independientemente de las acciones del usuario. Los tiempos de carga cortos son importantes para la usabilidad, pero no miden la rapidez con la que una página responde a la interacción del usuario.

  • Tiempo hasta el primer byte: El tiempo para el primer byte mide cuánto tarda un servidor en comenzar a enviar datos cuando un navegador solicita una página. Dice qué tan rápido es el servidor de un sitio y no dice mucho sobre la interactividad de una página para los usuarios.

  • First contentful paint: First contentful paint es la cantidad de tiempo que transcurre entre que una página comienza a cargarse y el navegador muestra el primer fragmento de contenido de la página. El First contentful paint mide el tiempo de carga percibido para los usuarios porque nos dice cuándo la gente verá por primera vez algo que sucede en su pantalla. Sin embargo, tampoco nos dice mucho sobre lo que sucederá cuando un usuario haga clic en un botón cuando se cargue.

  • Tiempo hasta interactividad: es una métrica de rendimiento en Google Lighthouse que indica cuándo una página se vuelve interactiva según la definición de Google. Sin embargo, al igual que las otras tres métricas, no dice cuánto tiempo tarda una página en responder a las interacciones.

En pocas palabras, las cuatro métricas anteriores miden básicamente qué tan rápido los usuarios pueden comenzar a usar una página, pero no nos brindan una imagen completa de la usabilidad de la página.

First Input Delay llena este vacío.

¿Importa el FID?

Como hemos comentado, la clave para promocionar con éxito tu sitio web en línea es proporcionar una experiencia excelente a los usuarios. No debería sorprendernos que una de las cosas que hace que la experiencia de usuario sea "excelente" es cuánto tiempo tienen que esperar las personas antes de que una página comience a funcionar cuando intentan hacer algo en ella.

Si tu página hace que los usuarios esperen mucho tiempo antes de responder a sus interacciones, tu marca no está impresionando a los nuevos usuarios. Incluso tu audiencia existente puede cansarse de la espera y abandonarte.

En otras palabras, FID es una forma de cuantificar si tu sitio web está causando una buena primera impresión o no.

Desde un ángulo más práctico, la puntuación de FID de una página es una métrica de Core Web Vitals. Y sabemos que Core Web Vitals influye en el ranking de una página en los resultados de búsqueda.

PES

Arreglar una puntuación de retraso de la primera entrada deficiente

¿Qué causa los retrasos en la entrada?

FID ocurre cuando el usuario intenta que un sitio web haga algo, pero su navegador está ocupado haciendo otra cosa. El visitante del sitio web puede ver el contenido de la página, pero el sitio no responderá a ninguna de sus acciones hasta que estos otros trabajos hayan finalizado.

Mirando hacia atrás en el proceso de carga de una página, el "hilo principal" de una página actúa como un camino donde cada uno de los archivos que el navegador tiene que descargar es un automóvil en ese camino. En esta carretera hay autos pequeños y rápidos y hay autos más grandes y lentos y están todos en una línea tratando de salir de la carretera (terminar de cargar).

Los retrasos en la entrada de datos ocurren porque un sitio web tiene que esperar a que los camiones grandes y lentos se salgan de la carretera antes de poder responder a la interacción del usuario.

El navegador del usuario está esencialmente atascado en un gran atasco.

autos

Ejemplos de FID

Aquí veremos el informe de rendimiento disponible en Chrome Dev Tools para algunos sitios web para ver qué podría estar causando problemas de FID para las personas que intentan visitar esos sitios.

En la captura de pantalla siguiente, las barras grises sombreadas en rojo representan tareas largas que ocupan el hilo principal durante más de 500 milisegundos.

CDT

En este primer ejemplo, vemos que el hilo principal inicia el proceso de carga de la página con 3 tareas largas. El primero tarda 9 segundos en completarse, el segundo tarda 6 segundos en completarse y el tercero tarda un poco más de 3,5 segundos en completarse.

Al reducir la cantidad de scripts que el navegador tiene que descargar y ejecutar, este sitio podría convertir todos esos camiones grandes y lentos que atascan su hilo principal en autos más ligeros y rápidos que permiten que la página responda a las interacciones del usuario más rápidamente.

En esta captura de pantalla, vemos otro sitio web que tiene menos tareas largas en su hilo principal, pero aún experimenta problemas con retrasos en la entrada.

load

Al hacer zoom en la tarea larga más a la derecha, vemos que en realidad son varias tareas agrupadas.

many tasks load

Esta tarea se compone de varios scripts que el navegador tiene que descargar y ejecutar antes de pasar a la siguiente. Cada uno de estos scripts se puede ejecutar en solo unos pocos milisegundos (el más largo es de solo 125 milisegundos), pero se suman.

Esta es una página altamente interactiva con muchas cosas que las personas pueden usar para interactuar con el contenido, por lo que tiene sentido que haya una gran cantidad de scripts que deben ejecutarse para cargar la página. Pero todos estos scripts hacen que esta página sea menos útil para los visitantes.

Optimización y depuración del FID

Los principales culpables de las malas puntuaciones de FID son JavaScript y las imágenes. La mejor opción para corregir (o evitar) FID es optimizar estos archivos mediante la minificación y la compresión.

Para encontrar las causas específicas del retraso de la primera entrada, deberás confiar en una herramienta de laboratorio para identificar y depurar los problemas exactos.

Hay 3 métricas de laboratorio que puedes utilizar para depurar puntuaciones FID deficientes para tu sitio web:

  • First Contentful Paint (FCP): FCP es la cantidad de tiempo que le toma a un navegador representar el primer contenido al cargar una página. Nos dice cuánto tiempo podría tener que esperar un usuario potencial antes de que pueda comenzar a consumir el contenido de la página.

  • Time to Interactive (TTI): TTI es el tiempo que tarda una página en volverse completamente interactiva, lo que requiere que se muestre "contenido significativo" y que la página responda a las interacciones en 50 milisegundos. Nos dice cuánto tiempo debe esperar un usuario potencial antes de que pueda comenzar a usar una página por completo.

  • Total Blocking Time (TBT): TBT es el tiempo transcurrido entre FCP y TTI. Esta métrica indica si hay tareas del navegador que tardan más de 50 milisegundos en completarse y "bloquean" la carga del resto de la página. TBT te ayuda a comprender qué tan interactiva es (o no) una página para los usuarios potenciales a medida que se carga.

lab data fid

Si la ruta del hilo principal de tu página tiene autos que impiden que un usuario obtenga contenido o use la página interactiva, o si hay camiones lentos que atascan a los otros autos, estas tres métricas de laboratorio lo ayudarán a encontrarlos.

Si bien la primera pintura con contenido, el tiempo para interactuar y el tiempo de bloqueo total no son exactamente reemplazos para FID, el análisis de estas 3 métricas de laboratorio puede decirte qué tareas evitan que los visitantes potenciales puedan usar rápidamente una página.

Los Informes y Proyectos de WooRank son herramientas de laboratorio que ayudan a los propietarios de sitios web a depurar y optimizar FID en sus propios sitios.

Los datos sobre el rendimiento de First Contentful Paint, Time to Interactive y Total Blocking Time se muestran en la sección Rendimiento para la revisión de una página. Estos datos y análisis indican qué archivos grandes y lentos impiden que tu sitio se cargue por completo y se vuelva útil tan rápido como debería.

LCP

A partir de aquí, es un paso sencillo para ti o tu equipo de desarrollo mejorar el rendimiento y la puntuación de retraso en la primera entrada de tu sitio.

Medición y monitoreo de FID

En nuestras guías anteriores sobre las métricas individuales de CWV, discutimos el concepto de datos de "campo" frente a datos de "laboratorio":

  • Los datos de campo se recopilan de usuarios reales que visitan una página en la web. Se recopila y se puede acceder a ella a través de Informes de experiencia de usuario de Chrome,que incluye datos de sitios web en la base de datos CrUX.

  • Los datos de laboratorio se miden a través de pruebas realizadas en entornos controlados, generalmente a través de software y otras tecnologías, en dispositivos y conexiones predeterminados. No hay usuarios reales involucrados en los datos de laboratorio.

Debido a que FID requiere la interacción de un usuario del sitio web, Google hace que los datos de FID estén disponibles solo a través de sus herramientas de campo:
Como tal, necesitas monitorear FID usando herramientas de campo:

Sin embargo, estas herramientas de Google solo funcionan si tu sitio web está incluido en la base de datos de CrUX, lo cual no está garantizado. Incluso si Google ha rastreado e indexado tu sitio, es posible que aún no obtengas datos de campo para FID u otros Core Web Vitals si tu sitio no recibe suficiente tráfico dentro de un período de tiempo determinado.

El Asistente de WooRank, por otro lado, recopila sus propios datos de campo tan pronto como se instala en un sitio web. No depende de los informes CrUX de Google y, por lo tanto, no está limitado en términos de los datos FID que puede proporcionar.

Los usuarios de WooRank que hayan instalado el Asistente en su sitio podrán monitorear el rendimiento de su sitio para el FID (más todos los demás CWV y un montón de métricas más) en el segundo en que sus sitios comiencen a recibir visitantes.

FID

La puntuación FID que deseas

El FID se analiza y puntúa en un espectro:

  • Un FID de menos de 100 milisegundos se considera "bueno".

  • Los retrasos entre 100 y 300 milisegundos se puntúan como "necesita mejorar".

  • Cualquier FID de más de 300 milisegundos se considera "deficiente".

First Input Delay scoring

Obviamente, deseas que tus usuarios esperen el menor tiempo posible después de interactuar con tu página, pero debes apuntar a menos de 100 milisegundos para el 75% o más de las páginas vistas de una página.

No pospongas la corrección de puntuaciones FID deficientes

El FID es uno de los factores más importantes cuando se trata de evaluar la experiencia que tienen los usuarios en la vida real cuando intentan interactuar con una página en la web. Después de todo, hay una razón por la que es una métrica de Core Web Vitals.

Al incorporar FID (y los otros Core Web Vitals) en el algoritmo de clasificación de búsqueda, Google ha desdibujado aún más la línea entre desarrollo, SEO y marketing digital. Comenzar cualquier proyecto con el pie derecho requiere que las tres funciones funcionen en conjunto ahora más que nunca si deseas lograr los resultados deseados.

El Asistente de WooRank ayuda a identificar problemas página por página y se ha actualizado recientemente para incluir las tres comprobaciones de CWV, lo que te ayuda a garantizar que sus usuarios tengan una excelente experiencia en la página.