¿Cómo optimizar el First Input Delay (FID)?

Hace unos días te mostraba qué es el First Input Delay (FID), otra métrica de Google que forma parte de los Core Web Vitals para evaluar y posicionar tu sitio web en las búsquedas de Google.

La métrica FID evalúa el tiempo de procesamiento de los eventos que ejecuta el usuario en el sitio web. Una vez que el usuario hace clic en un enlace o botón, FID empieza a evaluar el tiempo de respuesta a esa interacción. Revisemos cómo puedes evaluar y optimizar el FID en tu sitio web.

¿Cómo medir y evaluar el FID?

Como revisamos en el artículo anterior sobre First Input Delay (FID), para proporcionar una buena experiencia de usuario, los sitios web deben esforzarse por tener una puntuación FID de 100 milisegundos o menos, sitios web normalmente estáticos. Cuanto más baja sea tu puntuación, más estable será tu diseño.

A continuación revisamos algunas herramientas que pueden ser útiles para que puedas medir el FID de tu sitio web:

Medir el FID con JavaScript

También puedes medir FID agregando JavaScript a su página, utilizando la biblioteca JavaScript de web-vitals. Añadiendo el siguiente script a tu sitio web para imprimir FID por la consola:

import {getFID} from 'web-vitals';


getFID(console.log);

¿Cómo optimizar el FID?

Si el resultado de la evaluación de tu FID no es satisfactoria, es decir 100 milisegundos o menos, por lo general es una indicación de que el JavaScript o CSS no está optimizado adecuadamente.

Cómo mejorar el FID optimizando el código CSS

Los archivos CSS son esenciales, ya que deben descargarse y analizarse lo antes posible para que el navegador pueda mostrar el sitio web al usuario. Es por ello que debes optimizar, minimizar y comprimir los archivos CSS de tu sitio web, eliminando código CSS no utilizado o redundante.

Cómo mejorar el FID optimizando el código JavaScript

Las tareas de JavaScript suelen ser la principal causa, especialmente cuando hay un retraso en la carga de algún script, ya que esto bloquea el hilo principal del navegador durante un tiempo prolongado, esto en consecuencia no permite interactuar al usuario.

A continuación revisamos algunas estrategias que puedes utilizar para minimizar la cantidad de tiempo de carga de JavaScript que bloquea el hilo principal de tu sitio web:

Divide los procesos grandes en tareas más pequeñas y asíncronas.
Genera todo el contenido estático que puedas, eso liberará carga de JavaScript.
Explora las librerías y códigos de terceros, a menudo el bajo rendimiento de un tercero puede bloquear innecesariamente el hilo principal de tu sitio web. Prioriza primero la carga de los elementos que crees que ofrece mayor valor a los usuarios.
Utiliza Web Workers para delegar algunas tareas principales a subprocesos para reducir la carga de trabajo en el subproceso principal.
Aplaza el código JavaScript no utilizado, de forma asíncrona o diferida para que el JavaScript se ejecute sólo cuando sea necesario.

Conclusión

La evaluación del código CSS y JavaScript en tu sitio web, es clave para obtener las mejores puntuaciones de FID, para proporcionar una buena experiencia de usuario y posicionamiento web SEO, recuerda que debes trabajar para que la puntuación FID sea de 100 milisegundos o menos.

Photo by Zoë Reeve on Unsplash

Referencias:
· Optimize First Input Delay