¿Qué es el Retraso a la Primera Entrada (FID) y cómo solucionarlo?

El Retraso en la Primera Entrada (FID) es una métrica de Core Web Vitals definida por Google que mide la interactividad y la capacidad de respuesta de las páginas web.
Al calcular la puntuación PageSpeed de una URL, el valor de Retraso a la primera entrada (FID) representa el tiempo transcurrido entre la primera interacción del usuario con los elementos de la página y el momento en que el navegador web puede procesar realmente la solicitud del usuario.

Cuando un usuario hace clic en un elemento de la interfaz, como un menú, un botón, o realiza cualquier interacción que desencadene controladores de eventos JavaScript, el navegador web puede estar todavía ocupado haciendo otra cosa, como cargar y renderizando HTML, CSS, o ejecutando scripts y no pueden responder inmediatamente a la solicitud.
La latencia de entrada crea un retraso en el procesamiento del evento que se registra como valor FID, determinado por el tiempo que tarda el hilo principal en estar totalmente inactivo.

Core Web Vitals da prioridad a la interactividad en la experiencia del usuario (UX), que se ve afectada negativamente por los largos tiempos de carga de la página que disminuyen la capacidad de respuesta de los elementos de la página.
A diferencia de otras métricas de Google PageSpeed, el valor de Retraso en la primera entrada (FID) depende totalmente de los datos de campo de los usuarios.
El cálculo del FID requiere que un usuario real interactúe directamente con la página web.

¿Qué es el Retardo a la Primera Entrada (FID)?

El Retraso en la Primera Entrada (FID) es una de las tres métricas que se utilizan en la prueba Core Web Vitals.
Los otros dos factores son la Mayor Pintura de Contenido (LCP) y el Desplazamiento de Diseño Acumulativo (CLS).
El valor de Retraso en la primera entrada (FID) viene determinado por los Informes de experiencia del usuario de Chrome, que representan los datos de campo de los navegadores web que han accedido a la página históricamente.
Google se refiere a esto como Monitorización de Usuario Real (RUM).
El cálculo de la puntuación de Google PageSpeed realizado por Lighthouse no incluye explícitamente los datos de campo del FID, sino que proporciona la estimación del TTI a partir de los datos de laboratorio.

El Retraso en la Primera Entrada (FID) se estableció para medir la primera impresión que reciben los usuarios al interactuar con una página web.
La métrica es un indicador primario de la capacidad de respuesta de los elementos de la página y de la usabilidad general de la interfaz.
Los elementos de la interfaz gráfica de usuario, como menús, botones, casillas de verificación, campos de texto y enlaces, pueden mostrarse visiblemente al usuario, pero su capacidad de respuesta puede retrasarse mientras el navegador descarga otros archivos HTML, CSS y JavaScript.
El FID mide este tiempo de retardo.
La métrica Tiempo hasta interactividad (TTI) es similar, pero no registra ninguna actividad de eventos del usuario.

La primera entrada se define como eventos de interacciones del usuario, como clics del ratón, pulsaciones de pantalla y actividad del teclado.
El retraso se calcula midiendo el tiempo transcurrido entre el momento en que el usuario registra el primer evento de entrada y el momento en que el hilo principal está totalmente inactivo o el navegador puede procesar la solicitud.
Ten en cuenta que éste es el tiempo que tarda el navegador en empezar a procesar la petición, y no la respuesta interactiva en sí.
En el ejemplo del uso de un menú desplegable, no se registra como el tiempo necesario para que el navegador abra el desplegable, sino el tiempo que tarda el navegador en ser capaz de «comprender» que el visitante ha hecho clic en él.

Experiencia de usuario (UX)

La puntuación PageSpeed de una página web se calcula a partir de métricas estadísticas que miden la velocidad de carga percibida, la capacidad de respuesta de carga, la capacidad de respuesta en tiempo de ejecución, la estabilidad visual y la fluidez de la experiencia del usuario (UX).
El modelo RAIL divide el ciclo de vida de una aplicación web en las categorías de respuesta, animación, inactividad y carga para el análisis del rendimiento.
Estos factores permiten estandarizar la experiencia del usuario para su evaluación en SEO.

No toda la información de Core Web Vitals se incluye en el cálculo de la puntuación de PageSpeed.
Las dos pruebas están diseñadas para complementarse.
El objetivo principal de Core Web Vitals es evaluar si una URL entrega su contenido y se vuelve interactiva en un tiempo inferior a 5 segundos en producción.
Las métricas de rendimiento clave de la evaluación están relacionadas con la experiencia del usuario (UX).
Google recomienda que una página web ofrezca una respuesta visible en 100 ms, anime un fotograma en 10 ms y procese los eventos de entrada del usuario en 50 ms.

En la práctica, los informes Core Web Vitals y PageSpeed deben utilizarse ambos para el SEO a la hora de evaluar la experiencia del usuario (UX), ya que las mejoras realizadas en uno se trasladarán al otro de forma beneficiosa.
Sin embargo, los profesionales deben reconocer que no son estándares idénticos.
Google da prioridad a la experiencia del usuario (UX) para la clasificación en los motores de búsqueda, combinando el análisis de la UX con factores relacionados con el contenido, las palabras clave, la estructura de la URL, los títulos, etc. en su sistema de ponderación del algoritmo.
Las páginas web deben optimizar todos estos factores para posicionarse favorablemente en las SERP.

¿Qué mide el FID?

El Retraso en la Primera Entrada (FID) mide la capacidad de respuesta de una página Web cuando se carga en el navegador.
En concreto, representa el intervalo de tiempo entre que se recibe por primera vez un evento de entrada del usuario y el hilo principal que carga todos los elementos necesarios de la página y ejecuta los scripts queda inactivo.
Si un navegador aún está cargando los archivos HTML, CSS y JavaScript necesarios para la visualización y funcionalidad o realizando otras tareas largas en el hilo principal, no puede procesar eficazmente la entrada del usuario procedente de clics o toques de pantalla en la GUI hasta que termine.
El FID se utiliza para evaluar estos retrasos.

Retardo de la primera entrada vs. Tiempo hasta interactivo

La métrica Retraso en la Primera Entrada (FID) representa el tiempo medio que tardan las vistas de escritorio y móvil en ser totalmente receptivas en una página web, incluyendo el acceso del usuario por diferentes dispositivos finales y velocidades de conexión.
Los grandes retrasos de primera entrada suelen producirse entre la renderización de la Primera Pintura de Contenido (FCP) y el Tiempo hasta la Interactividad (TTI), principalmente porque la página web ha descargado parte de su contenido de pantalla e interfaz gráfica, pero aún no es interactiva de forma fiable para los usuarios.

Para ilustrar cómo puede ocurrir esto, se han añadido FCP y TTI a la línea de tiempo para el análisis SEO.
El valor del Tiempo hasta la Interactividad (TTI) se calcula a partir de datos de laboratorio de Lighthouse y otras herramientas, midiendo el tiempo necesario para que la página se renderice visualmente, cargue completamente todos los scripts necesarios y sea capaz de responder a las entradas del usuario mediante la inactividad del hilo principal.
A diferencia de la fórmula FID, el TTI no requiere ninguna actividad real del usuario en una página para calcularlo.

¿Qué es una buena puntuación FID?

Google define una puntuación «buena» de Retraso en la Primera Entrada (FID) como menos de 100 ms de latencia de entrada.
Una puntuación FID de 100 a 300 ms se califica como «necesita mejorar» y cualquier valor superior a 300 ms se considera «deficiente».
La media del 75% de los usuarios determina la puntuación global.
Con una latencia de entrada inferior a 85 ms, cualquier clic de un usuario en los elementos de la interfaz se experimentará como un acontecimiento en tiempo real.
Cualquier retardo de más de 100 ms se percibe como retardado.

Datos estadísticos y valor umbral

El Informe de experiencia de usuario de Chrome (CrUX) se utiliza en el cálculo de Core Web Vitals sobre la base de experiencias reales de usuarios en millones de sitios web.
Este conjunto de datos públicos incluye información sobre el tipo de dispositivo y la velocidad de conexión que utilizan los navegadores web para acceder a una URL.
Google ha determinado que la experiencia del 99% de los usuarios de ordenadores de sobremesa y del 78% de los navegadores móviles en el percentil 75 se califica como «buena» en el valor umbral de 100 ms para FID.

¿Cómo medir el Retardo a la Primera Entrada (FID)?

El valor del Retraso a la Primera Entrada (FID) se calcula a partir de los datos de campo que generan los usuarios que optan por los informes de experiencia de usuario mientras navegan por la web con el navegador Chrome.
La respuesta a la activación del control se mide registrando la actividad inicial del ratón, teclado o panel táctil introducida por los usuarios en la página y el tiempo de retardo necesario para que se procese la entrada.
Estos valores se promedian hasta el percentil 75 descartando los valores atípicos del conjunto de datos, y la media corriente de los últimos 28 días de actividad de los usuarios produce la puntuación FID de la página.

Herramientas de evaluación

La forma más fácil y habitual de evaluar una puntuación FID es introducir una URL en la interfaz de Google PageSpeed Insights y generar un informe.
Como el FID se basa en datos de campo, no siempre está disponible.
Si la página web es nueva y aún no ha tenido suficientes visitas, puede que no haya suficientes datos de referencia.
Como los datos del Informe de Experiencia de Usuario de Chrome (CrUX) son públicos, se puede acceder a ellos directamente para ver un registro detallado de los tipos de dispositivos y la velocidad de conexión de la base de usuarios.
El informe Core Web Vitals también puede generarse utilizando el servicio Search Console de Google.
Otro método para analizar la puntuación FID es instalar el programa web-vitales Biblioteca JavaScript en el servidor web con código personalizado incrustado en las páginas.

Cálculo en JavaScript

La puntuación FID puede calcularse mediante JavaScript a través de la función web-vitales o implementando código para la API de Cronometraje de Eventos (parte del proyecto web-platform-tests disponible en GitHub). En web-vitales incluye una llamada sencilla (getFID) que calculará automáticamente el valor del Retraso de la Primera Entrada de una página web y lo registrará en una consola de análisis.
Así se registran los valores para distintos usuarios y dispositivos.
Ambas soluciones se instalan en un servidor web de forma independiente y pueden utilizarse para realizar pruebas exhaustivas de rendimiento en las URL para determinar las puntuaciones de Core Web Vitals.

¿Qué afecta al Retardo a la Primera Entrada (FID)?

La puntuación FID sólo mide la primera interacción del usuario con una página web.
No tiene en cuenta el desplazamiento ni el zoom.
Si no hay actividad del usuario con los menús, enlaces o elementos de la interfaz, no se registra una puntuación FID.
El mayor problema que provoca puntuaciones FID bajas son los archivos JavaScript de terceros que deben obtenerse de un servidor remoto y tardan más tiempo en descargarse.
Los scripts de análisis, las fuentes web, el seguimiento y los botones para compartir pueden provocar grandes retrasos.

Los archivos de imagen grandes y el contenido iframe pueden requerir un ancho de banda significativo en conexiones lentas y retrasar la carga de otros elementos de la página que son necesarios para la funcionalidad.
Los Polyfills que conservan la funcionalidad de JavaScript para navegadores antiguos pueden añadir un tamaño de archivo adicional a las descargas si se sirven a usuarios que no los necesitan.
Los anuncios que se obtienen de un servidor de terceros también pueden causar retrasos en la renderización si el servidor remoto no responde con rapidez.

El bloqueo de página se produce cuando se incrustan grandes archivos JavaScript en la parte superior de una página e impiden que los elementos de nivel inferior sean plenamente funcionales hasta que el navegador web los descarga y ejecuta.
Un tiempo de respuesta del servidor remoto lento puede afectar a la puntuación FID al añadir un retraso antes de que la fuente web, el iframe y los elementos JavaScript de terceros puedan descargarse.
La mayoría de los problemas y cuestiones pueden depurarse en el informe PageSpeed Insights.

Factores contribuyentes

Los sitios web nuevos sin suficientes datos de campo de los informes de usuario sobre las URL serán difíciles de analizar para FID mediante los informes de PageSpeed Insights.
Los sitios CMS de código abierto que funcionan sin almacenamiento en caché de páginas web ni integración CDN tendrán el peor rendimiento debido a la necesidad de consultar la base de datos y ejecutar código PHP para renderizar elementos funcionales.
Los sitios CMS que funcionan con versiones antiguas de PHP también pueden ralentizar el rendimiento.
Cualquier sitio que carezca de una implementación adecuada de compresión y minificación para los archivos HTML, CSS y JavaScript, probablemente obtendrá una mala puntuación en las calificaciones de Retraso en la Primera Entrada (FID).
La interfaz gráfica de usuario y los elementos de diseño deben optimizarse siempre para la experiencia del usuario.

Ejemplos comunes

Para los sitios web que se ejecutan en servidores compartidos, VPS o dedicados, la llamada inicial a una URL va primero al servidor DNS, que hace coincidir el nombre de dominio con una dirección IP.
A continuación, el navegador web puede cargar los archivos HTML, CSS y JavaScript necesarios para la funcionalidad y visualización desde el servidor web.
Si no se implementa el almacenamiento en caché de la página web para convertir el contenido dinámico en un archivo plano o distribuirlo a través de una CDN, la necesidad de consultar una base de datos para las solicitudes de recursos añade una sobrecarga significativa al tiempo necesario para cargar una página.
El almacenamiento en caché de páginas web elimina estos pasos y simplemente sirve un archivo plano a los usuarios que, en general, puede descargarse mucho más rápidamente.

¿Cómo mejorar el Retardo a la Primera Entrada (FID)?

La puntuación del Retraso en la Primera Entrada (FID) se mejora mediante técnicas de optimización PageSpeed que reducen el tamaño total del archivo de la descarga y limitan la complejidad de los elementos de carga en el hilo principal.
Esto incluye la compresión del tamaño de los archivos HTML, CSS, JavaScript y de imagen, así como el lazy-loading de archivos de imagen, contenido iframe y vídeos.
El lazy-loading crea un marcador de posición para la visualización de imágenes y sólo descarga el archivo cuando está en la ventana gráfica activa, reduciendo el tiempo total que tarda una página web en ser responsive.
La compresión de archivos de imagen y la conversión a formatos de archivo como WebP pueden reducir el tamaño total de la imagen en más de un 50% respecto a los estándares .jpg y .png.

En la mayoría de los casos, todos los enfoques para la optimización de PageSpeed no pueden aplicarse en todas las URL.
Algunas de las técnicas SEO requieren un cambio importante de la estructura y el contenido de la página.
Para mejorar de forma fiable la puntuación FID, asegúrate de abordar los factores que se indican a continuación en cada página web:

• El análisis sintáctico de HTML y CSS
• La extracción de CSS críticos
• Minificación de archivos CSS
• El aplazamiento del CSS no crítico

JavaScript se ejecuta en el navegador web y requiere recursos locales en el dispositivo del usuario para procesarse.
El tamaño total de los archivos JavaScript puede reducirse mediante la minificación, que elimina por completo del archivo los elementos de script que no son necesarios para la visualización de la página.
Añadir compresión al archivo JavaScript minificado reduce aún más el tamaño del archivo.
Retrasar la carga de los archivos JavaScript hasta que sean necesarios para la visualización es otra técnica que puede mejorar el tiempo necesario para que una página sea interactiva.
Inyectar CSS en línea puede reducir el tiempo de carga de las hojas de estilo.

Hacer uso de las recomendaciones de «Oportunidades» proporcionadas por el informe Google PageSpeed es la mejor forma de llevar a cabo la optimización de motores de búsqueda (SEO) para Core Web Vitals.
Las técnicas más importantes para mejorar la puntuación FID consisten en reducir el tamaño total del archivo y la complejidad de la página web para que responda más rápidamente.
Algunos de los mejores métodos son reducir el impacto del código de terceros y retrasar la carga de los recursos JavaScript de terceros haciendo que no sean de bloqueo de renderizado, asíncronos y no necesarios en el hilo principal.
Ejemplos de estos elementos son los scripts de seguimiento y análisis, las ventanas emergentes de chat, etc.

El marco con el que se construye un sitio web puede tener un efecto significativo en la velocidad de carga de la página.
Los sitios construidos con plataformas CMS de código abierto como WordPress, Drupal y Joomla necesitan adoptar técnicas automatizadas para la optimización de PageSpeed mediante soluciones de plugins, módulos y back-end que apliquen las recomendaciones enumeradas anteriormente para tener éxito en la mejora de la puntuación FID.
Es especialmente importante configurar el almacenamiento en caché de las páginas web y utilizar un servicio CDN.

¿Cómo arreglar las puntuaciones FID de los sitios WordPress?

WordPress es un CMS de código abierto con una amplia variedad de plugins gratuitos y de suscripción disponibles para la optimización de Google PageSpeed.
La mayoría de ellos están diseñados para ofrecer soluciones a problemas comunes que se señalan en la auditoría del informe PageSpeed.
Una de las recomendaciones más comunes para los sitios de WordPress es «aplazar el análisis sintáctico de JavaScript».
Este método retrasa la descarga de archivos JS hasta después de que el contenido principal se haya renderizado y sea receptivo, mejorando la puntuación FID drásticamente.

El almacenamiento en caché del navegador de los elementos de la interfaz de usuario y la compresión de los archivos HTML/CSS son otras tácticas importantes que minimizan el tamaño total del archivo de descargas de una página WP. Establecer un validador de caché requiere que los administradores de WordPress añadan cabeceras cache-control con los valores last-modified y etag para que el navegador pueda determinar si el contenido se ha modificado desde la última carga de la página. Las cabeceras cache-control permiten a los sitios web declarar la cantidad de tiempo que el contenido debe permanecer en la caché antes de caducar. Puede que tengas que editar el archivo .htaccess para que la configuración de la caché se propague a través de un sitio WordPress. Asegúrate de minificar y aplazar la carga de los archivos CSS no críticos, o inyecta el código en línea para mejorar los tiempos de carga. Automatizar estas tácticas en un sitio WordPress con soporte back-end mejorará la puntuación FID en todas las páginas.

Cuando se ha establecido el sistema de almacenamiento en caché de un sitio WordPress, se puede optimizar aún más para Google PageSpeed y Core Web Vitals aplicando las técnicas de optimización indicadas anteriormente.
La táctica más importante es la compresión de archivos HTML, CSS, JavaScript e imágenes, que reduce el tamaño total de descarga.
La minificación de JavaScript, la carga perezosa de imágenes, la inyección inline de CSS y la optimización del servidor web también aumentarán el rendimiento de los sitios web WordPress.
Elimina los plugins no necesarios y los scripts de terceros que puedan provocar retrasos inesperados en la carga de las páginas para mejorar la puntuación FID.
El almacenamiento en caché del navegador acelera la carga de los elementos de la interfaz gráfica de usuario.

Potenciador 10Web

Potenciador 10Web es una solución integral de plugins para optimizar sitios web WordPress para Google PageSpeed y Core Web Vitals.
El servicio 10Web Booster implementa soluciones integrales de optimización front-end y back-end para WordPress que aplican las recomendaciones del informe PageSpeed Insights.
10Web Booster mejorará automáticamente la puntuación FID de los sitios web en producción sin necesidad de realizar complejas configuraciones en wp-admin.

10Web Booster cumple:

• Compresión + minificación de HTML, CSS y JavaScript
• Compresión de imágenes y conversión a formato WebP
• Carga perezosa de imágenes, contenido iframe y vídeos
• Entrega optimizada de CSS y fuentes web para pantallas
• Optimización del rendimiento del servidor web para CWV
• Puntuaciones garantizadas de más de 90 en Google PageSpeed Insight

Potenciador 10Web aumenta la participación del tráfico móvil en los sitios de WordPress, mejora la velocidad de carga de las páginas para mejorar la retención de los usuarios y aumenta las tasas de conversión del comercio electrónico en producción.
Los editores web pueden registrarse para empezar a utilizar 10Web Booster de forma gratuita, pudiendo elegir entre una optimización completa del front-end para Google PageSpeed que se ejecuta en tu solución de alojamiento actual o un soporte de back-end de alto rendimiento que se ejecuta en Google Cloud Platform con Booster Pro.