¿Qué es el retraso de la primera entrada? ¿Cómo solucionar problemas de FID?

El retraso en la primera entrada es una métrica esencial para realizar un seguimiento y mejorar su página web.

Ofrecer una experiencia de usuario rápida a los visitantes de su sitio web es fundamental para el éxito de su sitio. Pero, ¿cómo saber si su sitio está alcanzando las velocidades adecuadas?

Ahí es donde entra en juego el retardo de la primera entrada (FID).

En este post te explicaremos qué es el FID, cómo medirlo y qué es una buena puntuación FID. También revelaremos algunas formas en que puede optimizar su FID para obtener mejores resultados.

Vamos a sumergirnos.
‍

¿Qué es el retardo de la primera entrada (FID)?

El retardo de la primera entrada (FID) es una métrica de rendimiento web y experiencia del usuario que rastrea el tiempo desde que un visitante interactúa por primera vez con una página web hasta el momento en que el navegador comienza a procesar la interacción. A esto a veces se le llama latencia de entrada.

El retardo de la primera entrada mide la cantidad de tiempo en milisegundos (ms).

Para decirlo en términos más simples, FID es el retraso entre la interacción del usuario, por ejemplo, cuando hace clic o toca algo como un enlace o un botón, hasta el momento en que el navegador responde a su acción y comienza a procesarla.

Piense en ello como medir el tiempo desde que toca el timbre de la puerta de alguien hasta que abre la puerta.

Lo importante que hay que saber sobre FID es que Google lo utiliza como factor de clasificación. Es uno de los Core Web Vitals , que son las métricas que utiliza Google para determinar la calidad de la experiencia del usuario de su sitio y, a su vez, su ranking de página.

Más que eso, las mejoras en el rendimiento del sitio y la experiencia del usuario generalmente conducen a mayores conversiones, ventas e ingresos publicitarios . Al abordar su FID, puede superar ese sentimiento de frustración que los usuarios pueden experimentar mientras se carga su página.

Eso es lo que hace que el retardo de la primera entrada sea una de las métricas de rendimiento web más interesantes: es una de las más puras. Métricas de usuario reales, no una métrica de laboratorio. No se puede simular en una prueba de laboratorio; requiere la intervención real del usuario para poder medirlo. FID mide la experiencia real de usuarios reales que ingresan a su página.

Hay algunas cosas que son importantes al medir los retrasos en la primera entrada.

FID solo mide interacciones finitas

Los eventos que cuentan como interacciones del usuario deben ser discretos o finitos. Eso significa que solo puede ser algo que tenga un punto inicial y final claro, como tocar un botón, hacer clic en un enlace o seleccionar una casilla de verificación.

Los tipos continuos de interacción del usuario, como desplazarse por su página web o hacer zoom, no se pueden medir adecuadamente usando esta métrica porque no se espera ninguna respuesta del sitio en sí, y el objetivo de First Input Delay es medir qué tan receptivo es un sitio mientras está cargando.

En resumen, la entrada del usuario incluye clics, no desplazamientos.

FID solo mide la primera interacción del usuario

La primera vez que un usuario interactúa con su página es su primera impresión, y las primeras impresiones lo son todo. Esto determina cómo experimentan y perciben el rendimiento de su web (y, por tanto, si se quedarán o se irán).

La mayor parte del bloqueo del hilo principal del navegador ocurre en esos primeros momentos del ciclo de vida de una página, porque es entonces cuando se cargan los recursos críticos.

Al medir el retraso de la primera entrada, puede asegurarse de que esos recursos críticos se carguen rápidamente y no hagan que su sitio web se sienta torpe, lento y no responda.

El retardo de la primera entrada es diferente del tiempo de interacción

El tiempo de interacción (TTI) es otra métrica de rendimiento web útil y puede confundirse con el retraso de la primera entrada.

TTI mide el tiempo que tarda una página en ser completamente interactiva, es decir, cuando ya hay contenido útil en la página, la interacción del usuario se procesa en 50 ms y se registran controladores de eventos para la mayoría de los elementos de la página.

El retardo de la primera entrada no es lo mismo. FID se utiliza para rastrear la entrada del usuario que ocurre antes de que la página sea completamente interactiva. Por lo tanto, un usuario puede hacer clic en un enlace que aparece antes de que se registren los controladores de eventos para la mayoría de los elementos de la página, y el retardo de la primera entrada le permite capturar esas primeras interacciones.
‍

La causa del retraso de la primera entrada

Algunos factores diferentes pueden afectar la métrica de retraso de la primera entrada:

Cargas útiles de JavaScript iniciales pesadas

Los paquetes pesados de JavaScript son la causa principal de los largos retrasos en la primera entrada, tanto en la carga útil inicial como en la ejecución en curso.

El navegador puede tardar mucho en analizar y evaluar estos paquetes. Las entradas se retrasan porque deben esperar a que la página cargue todo el JavaScript al que se hace referencia. En otras palabras, si tiene muchas imágenes o scripts que se cargan en orden aleatorio, puede ralentizar todo el proceso y retrasar la respuesta del usuario.

Los paquetes grandes suelen deberse a dependencias excesivas de terceros o cuando se incluye código que la página actual no necesita.

La buena noticia es que puedes controlar el tamaño y la complejidad de las páginas web y, más específicamente, puedes controlar cuánto JavaScript utiliza tu sitio web.

JavaScript de larga duración

También se producen largos tiempos de retraso en la primera entrada incluso después de que se haya cargado todo el JavaScript.

¿Por qué? Porque cualquier tarea de larga duración en JavaScript se ejecuta en el hilo principal y las entradas del usuario se bloquean hasta que finaliza la tarea y el hilo principal queda libre para manejar la entrada.

Este problema se debe a un código mal optimizado.

Velocidad y potencia de procesamiento del dispositivo del usuario.

Esto puede tener un impacto en su FID, pero no puede controlarlo.

¿Qué es una buena puntuación FID?

Recuerde que el FID se mide en milisegundos (ms) de tiempo, por lo que cuanto menos obtenga, mejor. No desea largas demoras en la entrada.

Según los umbrales de FID en PageSpeed Insights:

• FID de 100 ms o menos es bueno
• Es necesario mejorar el FID de entre 100 y 300 ms
• El FID superior a 300 ms es deficiente .

Según una investigación de NN Group, 0,1 segundos es aproximadamente el límite para que el usuario sienta que el sistema está reaccionando instantáneamente. Entonces, intenta y mantenga su FID por debajo de 100 ms.

In some cases, your FID might be under 100ms and scoring as "good" but the page may still feel unresponsive. That's because the browser still needs to run the task associated with the user input, and that's not measured by FID. 
‍

¿Cómo medir el retraso de la primera entrada en su página?

Pruebe estas herramientas para medir el retraso de su primera entrada:

• Informe de experiencia de usuario de Chrome a través de BigQuery (nivel de origen) o la API de CrUX (tanto el nivel de origen como el de URL)
• PageSpeed Insights de Google
• Search Console (informe Core Web Vitals)
  

Todos miden la FID junto con muchas otras métricas clave. Por lo tanto, el que elija dependerá de las otras métricas de desempeño que desee rastrear y de su forma preferida de medir.

Hablemos de cómo utilizar las herramientas para medir FID.

Informe de experiencia del usuario de Chrome

Si se siente cómodo usando JavaScript, también puede experimentar con el Informe de experiencia del usuario de Chrome (CrUX).

El Informe de experiencia del usuario de Chrome proporciona métricas de experiencia del usuario sobre cómo los usuarios del mundo real experimentan su sitio web.

El proyecto público Google BigQuery agrega métricas de experiencia del usuario por origen, si las conocen los rastreadores web de Google, y las divide en múltiples dimensiones. Para acceder a BigQuery, necesita una cuenta de Google y un proyecto de Google Cloud. Google tiene una guía paso a paso y una práctica visita guiada sobre cómo consultar el proyecto .

Alternativamente, los desarrolladores web pueden configurar el panel CrUX en Data Studio para realizar un seguimiento de las tendencias de la experiencia del usuario de un origen.

Para comenzar, vaya a g.co/chromeuxdash , donde puede proporcionar el origen para el cual se generará el panel.

En el panel, puede configurar el rendimiento mensual de Core Web Vitals del origen. Las métricas principales de Web Vitals son las métricas de UX más importantes en las que Google recomienda centrarse, incluido el retraso en la primera entrada.

Información de PageSpeed

Una de las herramientas más sencillas de utilizar para realizar una prueba de retraso de entrada es PageSpeed Insights de Google.

Esta es una herramienta gratuita que prueba el rendimiento de su sitio de muchas maneras y muestra su puntuación con algunas métricas clave, incluido el retraso en la primera entrada.

Recuerde, el retardo de la primera entrada requiere un evento de entrada real. Pero siempre que su sitio haya tenido interactividad de usuario recientemente, debería poder encontrar su puntuación en PageSpeed Insights. Google indica esta puntuación como datos de campo porque se basa en la interacción real del usuario, no en pruebas de laboratorio.

Simplemente ingrese la URL de su sitio en el campo de texto y haga clic en Analizar .

Una vez que la herramienta haya terminado de analizar su página, se le mostrarán los resultados. Su sitio obtiene una puntuación general, pero es la sección de Datos de campo en la que desea centrarse.

Esto muestra cómo los usuarios reales experimentan su sitio y es donde encontrará la métrica de retardo de la primera entrada (FID) .

Luego, vaya a Oportunidades para ver sugerencias para optimizar su página y mejorar sus puntuaciones.

Consola de búsqueda de Google

También puede utilizar el informe Core Web Vitals en Google Search Console (GSC) para medir el FID.

Abra GSC y vaya al menú Experiencia, luego haga clic en "Core Web Vitals".

Puede elegir medir FID para usuarios móviles o de escritorio; simplemente seleccione entre los informes "Móvil" o "Escritorio".

El informe le muestra todas las páginas que tienen problemas similares.
‍

Optimización de FID

Una vez que haya medido el retraso de la primera entrada de su sitio, ¿cómo puede optimizarlo?

Eche un vistazo a las siguientes tácticas. Muchas de estas optimizaciones significan que es necesario optimizar el código JS manualmente, lo que requiere desarrolladores web capacitados en la mayoría de los casos. Pero las mejoras en el rendimiento valen la pena y su experiencia de usuario mejorará mucho.

Optimice y minimice el código CSS y JavaScript

Comience por comprimir y optimizar su código CSS y JavaScript. Esto elimina caracteres, espacios y saltos de línea innecesarios, por lo que tiene un tamaño de archivo más pequeño. A su vez, esto reduce la cantidad de procesos que debe manejar un navegador, lo que aumenta la capacidad de respuesta y la velocidad de la página.

¿El resultado? Un retardo de primera entrada más bajo.

Una forma rápida y sencilla de minimizar su código es utilizar una herramienta en línea como Minify Code o pedir ayuda a su desarrollador web.

Divida tareas largas de JavaScript

El problema con las tareas largas de Javascript es que pueden bloquear el hilo principal, impidiéndole procesar la entrada del usuario y, por lo tanto, comprometiendo la capacidad de respuesta de su sitio.

La solución es dividir estas tareas en otras más pequeñas para que la entrada del usuario pueda procesarse entre ellas. Intente mantener sus tareas por debajo de 50 ms.

La mejor manera de lograrlo es mediante la división de código, que es donde se divide y se cargan fragmentos de código más pequeños y necesarios a la vez, en lugar de un archivo grande todo junto. Herramientas como Webpack te permitirán hacer esto.

Reducir el impacto del código de terceros y scripts no críticos

Demasiados scripts de terceros, como etiquetas y análisis, pueden retrasar la ejecución de los datos propios de su sitio.

Por lo tanto, en un intento por optimizar su puntuación de retardo de la primera entrada, reduzca el impacto del código de terceros, elimine los scripts de terceros que no sean críticos y posponga aquellos que no pueda eliminar.

¿Cómo decides qué guiones son los más importantes?

Considere qué scripts juegan un papel importante en la UX de su sitio. Priorice cargar primero lo que ofrezca mayor valor a los usuarios.

Comience eliminando o retrasando anuncios o ventanas emergentes que no sean necesarias. Además, consulte la sección Oportunidades de su informe PageSpeed Insights para obtener recomendaciones. Enumerará archivos y tareas específicos que podrían estar bloqueando su hilo principal.

Utilice async o diferir para que JavaScript se ejecute solo cuando sea necesario.

Usar inactivo hasta que sea urgente

Concebido por Philip Walton de Google, Inactivo hasta que sea urgente proporciona una forma inteligente de evaluar su código para que el retraso en la entrada sea mínimo.

La estrategia combina dos enfoques populares para la evaluación de código:

• Evaluación ansiosa: todo el código se ejecuta de inmediato, lo que da como resultado una página que se carga durante mucho tiempo hasta que es completamente interactiva y luego se ejecuta sin problemas.
• Evaluación diferida: su código se ejecuta solo cuando es necesario.

Inactivo hasta que sea urgente le permite ejecutar código durante períodos completamente inactivos para utilizar el hilo principal en la mayor medida posible. Pero también garantiza que cualquier código que se necesite con urgencia se ejecute de inmediato.

Esta es una excelente manera de mejorar el retardo de la primera entrada. Debido a que la ejecución del código solo ocurre durante los períodos de inactividad, está minimizando el tiempo de bloqueo del hilo principal.

Lea este artículo de Philip Walton para obtener más información sobre este enfoque.

Utilice trabajadores web

Los trabajadores web le permiten ejecutar scripts en segundo plano sin afectar el hilo principal.

Mover las operaciones que no son de interfaz de usuario a un hilo en segundo plano es una buena práctica para los desarrolladores web.
‍

Conclusión

Una primera impresión positiva es de gran ayuda para los visitantes de su sitio web y solo tiene una oportunidad de hacerlo bien. Invertir algo de tiempo y esfuerzo en medir el retraso de la primera entrada de su sitio y optimizar su puntuación le ayudará a mejorar su experiencia de usuario a largo plazo.

Si obtiene más de $2000 en ingresos publicitarios mensuales, contáctenos hoy para obtener más información sobre cómo Publift puede ayudarlo a aumentar sus ingresos publicitarios y optimizar mejor el espacio publicitario disponible en su sitio web o aplicación.