Retraso de la primera entrada (FID): qué es y cómo optimizar su sitio web para él

Ofrecer una experiencia rápida a los visitantes es fundamental para el éxito de su sitio. Sin embargo, hay varias formas de evaluar qué tan bien lo hace. Uno de ellos es First Input Delay (FID), que mide la cantidad de tiempo en milisegundos (ms) entre el momento en que un usuario interactúa por primera vez con su sitio y el momento en que su navegador responde a esa acción.

En esta publicación, explicaremos qué es FID y cómo medirlo. También discutiremos qué es una buena puntuación FID y le explicaremos cómo puede optimizar la suya. Finalmente, terminaremos con algunas preguntas frecuentes. ¡Empecemos!

Suscríbete a nuestro canal de Youtube

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

Como mencionamos, FID (también denominado a veces “latencia de entrada”) es la medida del tiempo en ms que ocurre entre el momento en que un visitante interactúa con su sitio y el momento en que responde su navegador. Es una métrica esencial incluida en el Informe de experiencia del usuario de Chrome. Además, es uno de los elementos fundamentales de la Web. Estas son las métricas que utiliza Google para determinar la calidad de la UX de su sitio (y, a su vez, su rango de página).

En este contexto, la entrada o la interacción pueden referirse a una amplia gama de acciones. Por ejemplo, podría incluir hacer clic en un enlace, presionar un botón o seleccionar una casilla de verificación. Sin embargo, FID no se aplica cuando un usuario se desplaza o hace zoom en una página, ya que no requieren una nueva respuesta entre su navegador y su sitio web.

Algunos factores diferentes pueden afectar esta métrica. La velocidad y la potencia de procesamiento del dispositivo del usuario pueden tener un impacto. No puedes controlar eso. Sin embargo, puede controlar el tamaño y la complejidad de la página web. Más específicamente, puede controlar la cantidad de JavaScript que utiliza su sitio web. Por ejemplo, si tiene muchas imágenes o scripts que se cargan en un orden aleatorio, puede ralentizar todo el proceso y retrasar la respuesta del usuario.

Incluso si su sitio tiene un FCP y LCP sólidos, el retardo de la primera entrada puede ser lo suficientemente largo como para hacer que reboten. Pueden sentir que su sitio no responde y es lento.

En pocas palabras, FID se usa para determinar qué tan receptiva es una página mientras se carga. Quizás, obviamente, cuanto más rápido sea este proceso, mejor. Por lo tanto, es importante saber cómo medir el FID de su sitio y cómo mejorar su puntaje.

Cómo medir la FID

Antes de comenzar a optimizar su puntaje FID, es esencial saber dónde se encuentra actualmente. Idealmente, para brindar una experiencia de usuario sólida (UX), querrá que su puntaje FID sea inferior a 100 ms.

Una puntuación de 100 ms o menos se considera buena , mientras que una puntuación entre 100 y 300 ms tiene margen de mejora. Una puntuación FID superior a 300 ms es mala .

Para medir su FID, puede utilizar Google PageSpeed ​​Insights:

Esta es una herramienta gratuita de Google que prueba el rendimiento de su sitio de muchas formas. Con él, puede observar una variedad de métricas clave, incluido el FID.

Tenga en cuenta que la FID a veces puede ser difícil de medir. Eso es porque requiere la participación del usuario. Sin embargo, siempre que haya tenido interactividad de usuario recientemente en su sitio, debería poder encontrar esta métrica a través de PageSpeed ​​Insights.

Para comenzar, ingrese la URL de su sitio en el campo de texto y haga clic en el botón Analizar . Una vez que la herramienta haya terminado de analizar su página, lo llevará a los resultados y le dará a su sitio una puntuación general:

Puede encontrar la métrica Retraso de la primera entrada (FID) en la sección Datos de campo . En la sección Oportunidades un poco más abajo, puede encontrar sugerencias para optimizar su página y sus puntajes.

También queremos señalar que Google denota estas puntuaciones como datos de campo . Esto significa que la información se basa en la interacción real del usuario, no en pruebas simuladas (que se denominan datos de laboratorio o se encuentran a través de herramientas de laboratorio ). FID es bastante subjetivo y está estrechamente relacionado con las interacciones reales del usuario, por lo que es importante asegurarse de que está utilizando datos de campo. Las simulaciones solo pueden explicar hasta cierto punto.

Cómo optimizar su puntaje FID

Ahora que comprende qué es un puntaje FID y cómo puede medirlo, es hora de ver cómo puede mejorarlo. A continuación, se muestran algunos consejos y estrategias que puede utilizar para reducir el tiempo de retardo de la primera entrada.

Optimice y minimice su código CSS y JavaScript

Una de las mejores formas de optimizar su puntuación FID es comprimiendo y optimizando su código CSS y JavaScript. Hacerlo puede reducir el tamaño de los archivos y, a su vez, mejorar la capacidad de respuesta. Al eliminar caracteres, espacios y saltos de línea innecesarios, reduce el tamaño del archivo, lo que a su vez aumenta la velocidad de la página y reduce la cantidad de procesos que debe manejar un navegador. Por lo tanto, tiene un FID más bajo.

Los usuarios de Divi también deben saber que el tema minimiza automáticamente HTML, JavaScript y CSS desde el principio. Simplemente activando el tema comprimirá todo este código para que su FID esté en una mejor posición que antes.

Si no es un usuario de Divi, tiene algunas opciones para minimizar su código. Un enfoque rápido y simple para hacer esto es utilizar una herramienta en línea como Minify Code. Copie su código de tamaño completo, péguelo en el sitio, el sitio lo minimiza y luego copia / pega los resultados en su sitio.

También puede minimizar su código manualmente usando un editor de código, aunque esto puede ser un poco más complicado. Sin embargo, si tiene experiencia trabajando con código, este método puede brindarle más control.

Otra estrategia más es utilizar un complemento como Autoptimize o W3 Total Cache (o cualquier número de otros).

Esta puede ser una solución viable para los usuarios de WordPress si no tiene experiencia con el código y desea implementar esta modificación en su sitio automáticamente. Además, estos complementos ofrecen una variedad de funciones centradas en la optimización, como el almacenamiento en caché de imágenes y contenido.

Divida las tareas largas de JavaScript en otras más pequeñas

Las tareas largas tienden a bloquear el hilo principal y pueden resultar en una saturación de JavaScript, lo que perjudica la capacidad de respuesta de su sitio. Para evitar que esto suceda y mejorar su puntuación FID en el proceso, puede intentar dividir estas tareas en otras más pequeñas y asincrónicas.

Una de las formas más efectivas de hacerlo es la división de código. En pocas palabras, esta es una técnica que se usa para dividir y cargar solo fragmentos de código más pequeños y necesarios, en lugar de un archivo grande a la vez. Puede hacer esto usando una herramienta como Webpack.

Los usuarios de Divi también obtienen un beneficio en esta área, ya que la gran actualización de rendimiento separa la gran biblioteca de JavaScript de temas y solo los carga según sea necesario. Esto debería reducir el FID en casi todos los sitios Divi. Los temas de WordPress tienden a venir con sus propias bibliotecas JS, y es posible que los usuarios no tengan la experiencia o los permisos para dividir el código y optimizarlo ellos mismos. Queríamos que eso no fuera un problema con Divi.

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

Si tiene demasiados scripts de terceros, puede retrasar la ejecución de los propios datos de su sitio. Por lo tanto, para optimizar su puntaje FID, también es una buena idea reducir el impacto del código de terceros y eliminar cualquier script de terceros que no sea crítico. Y para aplazar los que no puedes eliminar.

Al decidir qué scripts son los más importantes, pregúntese cuáles juegan un papel importante en la UX del sitio. Por ejemplo, quizás pueda eliminar o retrasar algunos anuncios o ventanas emergentes que no son muy necesarios. ¿Sus usuarios necesitan ver esa opción de correo electrónico en primer lugar, o puede retrasarla hasta que interactúen con el sitio de alguna manera?

También puede consultar la sección Oportunidades de sus informes de PageSpeed ​​Insights para obtener más información sobre cómo reducir JavaScript y CSS no utilizados:

Si hace clic para expandir cualquiera de estas secciones, se enumerarán archivos y tareas específicos que podrían estar bloqueando su hilo principal. También puede encontrar JavaScript y CSS no utilizados con Chrome DevTools.

En muchos casos, estos recursos de "bloqueo de procesamiento" impiden que la página se cargue tan rápido, lo que también afecta a su FID. Eliminarlos y / o aplazarlos no solo puede mejorar la interactividad de su sitio, sino también la capacidad de respuesta y la velocidad percibidas.

Divi tiene conmutadores para aplazar scripts no críticos como este. En las opciones del tema, puede optar por aplazar los scripts de jQuery y adoptar el aplazamiento de CSS en línea que, cuando se combina con la función de CSS crítico del tema, elimina todos los CSS que bloquean la representación. También puede alternar el aplazamiento de la hoja de estilo del editor de Google Fonts y Gutenberg. Todos estos se ven como "bloqueo de procesamiento", por lo que los miembros de Elegant Themes verán una puntuación FID mejorada casi de inmediato.

Retardo de la primera entrada (FID) Preguntas frecuentes

En este punto, probablemente tenga una comprensión sólida de lo que es FID y su importancia en la UX de su sitio web, así como también de cómo mejorarlo. Con eso en mente, queremos asegurarnos de haber cubierto todos los puntos clave. Así que repasemos algunas preguntas frecuentes sobre FID.

¿Cómo encaja FID en el rendimiento general de mi sitio web?

Básicamente, FID mide la primera interacción que los visitantes tienen con su sitio web. Es una métrica tanto cuantitativa como percibida porque impacta en la primera impresión de un usuario con su sitio. Puede ver objetivamente cuándo el sitio responde a la entrada del usuario, pero según las interacciones del usuario con el sitio, también puede ver cuándo lo perciben.

FID mide el tiempo entre la primera interacción que realiza un usuario y el tiempo que tarda el navegador en responder a esa acción. En otras palabras, la métrica evalúa qué tan receptivo es su sitio mientras aún se está cargando . Cuanto más rápido sea, mejor será la experiencia que tendrán sus visitantes.

Además, como Core Web Vital (junto con la pintura de contenido más grande (LCP) y el cambio de diseño acumulativo (CLS)), FID juega un papel importante en cómo Google clasifica su sitio web. Por lo tanto, además de la experiencia de sus usuarios, también puede afectar la optimización del motor de búsqueda (SEO) de su sitio. Muchas de las mismas estrategias para mejorar la FID también reducirán drásticamente el rendimiento general de su sitio.

¿Cómo puedo medir mi FID?

Hay algunas formas diferentes de medir su puntaje FID. El método más rápido y sencillo es ejecutar su sitio a través de Google PageSpeed ​​Insights. El informe detallará una variedad de métricas importantes, incluida la FID. También ofrecerá algunas sugerencias sobre cómo puede mejorar su puntuación.

Además, puede utilizar algunas otras herramientas para acceder a su puntuación FID. Entre ellos se incluyen el Informe de experiencia del usuario de Chrome, el Informe principal de vitalidad web de Google Search Console y la biblioteca de JavaScript de web vitals. También puede encontrar útiles herramientas como GT Metrix y Pingdom's Speed ​​Test.

¿Cómo puedo mejorar mi puntaje FID?

Mejorar su FID puede ayudar a mejorar las clasificaciones UX y SEO de su sitio. Por lo general, una puntuación FID deficiente se puede atribuir a varios factores, que incluyen:

• JavaScript pesado
• Guiones no utilizados
• Tareas largas de JavaScript
• Archivos de script largos

Para mejorar su puntuación, hay algunos pasos que puede seguir. Estos incluyen minimizar el código de su sitio, eliminar o retrasar los scripts de terceros no utilizados y dividir las tareas largas de JavaScript (y archivos CSS) en otras más pequeñas.

Conclusión

Solo tiene una oportunidad de causar una primera impresión positiva en los visitantes de su sitio web. Por eso es importante asegurarse de aprovechar todas las oportunidades que pueda para optimizar su puntaje FID. Es imperativo asegurarse de que las primeras interacciones de sus visitantes sean rápidas.

Recuerde, la puntuación FID ideal es 100 ms o menos. Si necesita mejorar el suyo y reducir ese tiempo, las diversas estrategias que discutimos anteriormente (como diferir JavaScript no utilizado, optimizar su código CSS y JavaScript y diferir / eliminar los recursos de bloqueo de renderizado) sin duda reducirán sus tiempos a donde necesitan serlo.

¿Tiene alguna pregunta sobre FID? ¡Háganos saber en la sección de comentarios!

Imagen destacada a través de wan wei / shutterstock