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, al 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 que le toma a una página responder a un usuario la primera vez que intenta hacer algo en la página.

Para comprender completamente 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 analiza el código HTML de la página, puede comenzar a representar partes de la página. Sin embargo, el navegador dejará de leer el HTML si encuentra JavaScript.

  4. Cuando encuentra JavaScript, el hilo principal deja de leer el HTML y en su lugar descarga y ejecuta el script.

  5. El navegador no comenzará a analizar HTML hasta que termine de procesar JavaScript, por lo que si el código de la página tiene dos archivos JS seguidos, el hilo principal procesará ambos antes de volver al HTML.

  6. Cada vez que el navegador encuentra un script, lo cargará a través del hilo principal. Por lo tanto, el proceso de carga de la página puede (y a menudo lo hace) detenerse y comenzar varias veces.

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".

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. No mide cuánto tiempo tarda realmente el servidor en completar su tarea.

Si un usuario hace clic en el botón de reproducción de 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.

¿Por qué es importante el First Input Delay?

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.

Measuring and Tracking 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. Los datos de campo serán ligeramente diferentes para cada usuario porque todos tienen diferentes dispositivos y conexiones a Internet.

  • 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.

* Tal como está, el FID se mide y puntúa basándose únicamente en datos reales del usuario*. Requiere que un usuario de la vida real interactúe con tu página, por lo que es una métrica de solo campo.

Como tal, necesitas monitorear FID usando herramientas de campo:

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.

Cómo obtener un buen puntaje FID

Divide las tareas largas

Cualquier cosa que mantenga ocupado el hilo principal durante 50 ms o más es lo que se conoce como "tarea larga". Dado que los usuarios que interactúan con un sitio mientras el hilo principal está ocupado tienen que esperar a que finalice esa tarea, es mejor reducir al mínimo las tareas largas.

Usa Chrome DevTools para identificar tareas largas en tus páginas y luego dividirlas en tareas más pequeñas y del tamaño de un bocado.

Atributos asíncronos / diferidos

WooRank FID Async

JavaScript es una parte importante de la web moderna, que permite todo tipo de funciones para tu sitio web. También da la casualidad de que causa cuellos de botella en el hilo principal de una página, lo que conduce a puntuaciones FID bajas. La buena noticia es que hay formas de decirle a los navegadores que omitan secuencias de comandos individuales al cargar la página: el atributo Async y el atributo defer.

Cuando la etiqueta HTML de un script tiene el atributo async, se cargará en paralelo al hilo principal. Esto permite que la página continúe cargándose y renderizándose mientras carga scripts grandes o lentos al mismo tiempo.

El atributo HTML defer, como puedes adivinar, indica al navegador del usuario que espere (o "difiera") a que se cargue el resto de la página antes de descargar y procesar el JavaScript.

Estos atributos HTML controlan el inicio y la parada que se produce cuando los navegadores encuentran JavaScript mientras analizan el HTML de una página. Al eliminar una secuencia de comandos del hilo principal o esperar a procesar la secuencia de comandos, puede acelerar el análisis de HTML y reducir el retraso de entrada.

Usa un Trabajador web

Los trabajadores web son scripts creados en el código HTML de una página web que se ejecutan independientemente del resto de la página. Los trabajadores web se diferencian de los scripts que utilizan los atributos async odefer en que, dado que se ejecutan en segundo plano mientras se carga la página, no se ven afectados por los scripts diseñados para ejecutarse después de que el usuario hace algo.

En otras palabras, los trabajadores web pueden cargar JavaScript sin bloquear la interactividad. Entonces, una página puede cargar y ejecutar un script lento sin afectar el FID.

Presta atención a los scripts de terceros

Casi todos los sitios web dependen de algún tipo de código de terceros para agregar funcionalidad o rastrear datos. Las herramientas de análisis y uso compartido de redes sociales son dos scripts de terceros comunes que probablemente estés ejecutando en tu sitio web en este momento.

Es una buena práctica vigilar cuándo y cuánto tardan en cargarse. Si bien no controlas el código en sí (y, por lo tanto, no puedes afectar el tamaño o la velocidad), puedes usar métodos como los atributos async ydefer o trabajadores web para priorizar las tareas.

Si una secuencia de comandos no necesita ejecutarse al principio del proceso de carga, considera posponerla o usar un trabajador web para ejecutarla en segundo plano.

No pospongas la corrección de puntuaciones FID deficientes

El First Input Delay 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.

Su incorporación al algoritmo de clasificación de Google, junto con el resto de las métricas de CWV, difumina aún más la línea entre desarrollo, SEO y marketing digital y debería servir como una prueba más de que las tres funciones deben trabajar en conjunto desde el principio de cualquier proyecto.