First Input Delay (FID): cómo optimizar esta métrica

En un artículo anterior te hablamos sobre los que son las Core Web Vitals, y cómo los 3 aspectos clave que la componen son importantes para una buena salud SEO de tu sitio web.
Recuerda que el First Input Delay es la métrica de la capacidad de respuesta que tiene tu web, mide la rapidez con la que tu web responde a los clics, desplazamientos y otras acciones de los usuarios.
Básicamente se calcula como el tiempo que pasa entre la interacción del usuario en tu web y el procesamiento de la solicitud o interacción por parte del navegador.
Para que la métrica sea positiva en tu web, la repuesta debe ser inferior a los 100 milisegundos.
¿A qué se debe una mala puntuación del First Input Delay?
Si esta métrica está siendo negativa en tu web, es importante que comiences a revisar al menos tres aspectos, estos son:
• Cantidades significativas de CSS y JavaScript que podrían estar bloqueando la renderización, lo que detiene la carga de la página mientras se descarga y analiza el código.
• Scripts grandes y de gran intensidad de proceso que se ejecutan inmediatamente cuando se carga la página.
• Tareas de JavaScript de larga duración o mal optimizadas.
Ten en cuenta que por defecto los navegadores se ejecutan en un solo hilo, por tanto estos solo pueden procesar una tarea a la vez.
Entonces, si alguna función de JavaScript tarda al menos un segundo en ejecutarse, durante ese segundo los otros procesos de renderización se bloquean. Es por ello por lo que la página no reacciona a la entrada del usuario, no actualiza el DOM y no muestra durante el segundo bloqueado los elementos de la página.
Así que una revisión de tales aspectos te ayudará a mejorar esta métrica. A continuación, te presentamos también algunos consejos más específicos:
Consejos para mejorar puntuaciones del First Input Delay
En Inmedia Labs realizamos una auditoria detallada y tomamos acción para asegurarnos de que tu sitio trabaje de forma óptima.
Algunas de las acciones que implementamos para una mejor puntuación del First Input Delay, son:
• Generamos y almacenamos en caché la mayor cantidad posible de contenido HTML estático en el servidor.
• Te aconsejamos que no dependas de los frameworks JavaScript del lado del cliente para renderizar el mismo HTML para todos.
• Nos aseguramos de que el navegador sí pueda almacenar los archivos en la caché eficazmente. Asegúrate de que el navegador puede almacenar los archivos en la caché de forma eficaz.
• Implementamos técnicas de mejora progresiva, con lo que nos aseguramos de que la interfaz se pueda utilizar en HTML y CSS antes de la ejecución JavaScript.
• Aconsejamos eliminar los archivos JavaScript y CSS que no se utilizan.
• Evitamos el uso excesivo de propiedades CSS costosas como box-shadow y filter.
• Utilizamos JavaScript asíncrono, diferido o de módulo ES, para ejecutar los scripts más tarde.
• Recomendamos reducir al mínimo las solicitudes de JavaScript de terceros para análisis, widgets de redes sociales, foros de discusión, etc. Estos pueden acumular rápidamente varios megabytes de JavaScript.
Hay otras acciones que se pueden realizar y te ayudarán a contar con un buen puntaje en esta métrica tan importante. Si quieres conocer más, contáctanos.

Related posts

¿Que opinas sobre esto?