First Input Delay is an essential metric to track and improve on your web page.
Delivering a fast user experience to your website visitors is critical to your site’s success. But how do you know whether your site is achieving the right speeds?
Ahí es donde entra en juego el retardo de la primera entrada (FID).
In this post, we’ll explain what FID is, how to measure it and what a good FID score is. We'll also reveal some ways you can optimise your FID for better results.
Let's dive in.
¿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.
Think of it like measuring the time from when you ring someone’s doorbell to them answering the door.
El important thing to know about FID is that Google uses it as a ranking factor. It’s one of the Core Web Vitals, which are the metrics Google uses to determine the quality of your site’s user experience and, in turn, its page rank.
More than that, improvements to site performance and user experience generally lead to increased conversions, sales, and ad revenue. By addressing your FID, you can overcome that feeling of frustration that users may experience while your page is loading.
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.
There are a few things that are matter when measuring First Input Delays.
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.
To summarise, user input includes clicks not scrolls.
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
Time to Interactive (TTI) is another helpful web performance metric and can be confused with First Input Delay.
TTI measures the time it takes for a page to be fully interactive, i.e. when there’s useful content already rendered on the page, user interaction is processed within 50ms and event handlers are registered for most page elements.
First Input Delay no es lo mismo. FID se utiliza para realizar un seguimiento de la entrada del usuario que se produce 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 First Input Delay le permite capturar esas interacciones tempranas.
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
Heavy JavaScript bundles are the main cause of long first input delays - both initial payload and ongoing execution.
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.
The good news is you can control the size and complexity of the web pages, and more specifically, you can control how much JavaScript your website uses.
JavaScript de larga duración
Long first input delay times also occur even after all JavaScript has been loaded.
Why? Because any long running task in JavaScript runs on the main thread, and user inputs are blocked until the task finishes and the main thread is free to handle the input.
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?
Remember that FID is measured in milliseconds (ms) of time, so the less you score, the better. You don't want long input delays.
Según los umbrales de FID en PageSpeed Insights:
- Un FID de 100 ms o menos es bueno
- Es necesario mejorar el FID de entre 100 y 300 ms
- Un FID por encima de 300 ms es deficiente.
Según una investigación de NN Group, 0,1 segundos es el límite para que el usuario sienta que el sistema está reaccionando instantáneamente. Por lo tanto, intente mantener su FID por debajo de los 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:
They all measure FID along with lots of other key metrics. So the one you choose depends on the other performance metrics you want to track, and your preferred way of measuring.
Let's talk through how to use the tools to measure 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).
The Chrome User Experience Report provides user experience metrics for how real-world users experience your website.
The 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.
To get started, go to g.co/chromeuxdash where you can provide the origin for which the dashboard will be generated.
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
One of the easiest tools to use to do an input delay test is Google's PageSpeed Insights.
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.
Remember, First Input Delay requires a real input event. But so long as your site has recently had user interactivity, you should be able to find your score on PageSpeed Insights. Google denotes this score as field data because it's based on actual user interaction, not lab tests.
Simplemente ingrese la URL de su sitio en el campo de texto y haga clic en Analizar .
Once the tool has finished analysing your page, you will be shown the results. Your site gets an overall score, but it's the Field Data section that you want to focus on.
This shows how real users experience your site, and is where you will find the First Input Delay (FID) metric.
Luego, vaya a Oportunidades para ver sugerencias para optimizar su página y mejorar sus puntuaciones.
Consola de búsqueda de Google
You can also use the Core Web Vitals report in Google Search Console (GSC) to measure 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 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?
Take a look at the below tactics. A lot of these optimisations mean you need to optimise JS code manually, which requires a skilled web developers in most cases. But the performance gains are well worthwhile and your user experience will be much improved.
Optimice y minimice el código CSS y JavaScript
Start by compressing and optimising your CSS and JavaScript code. This takes out unnecessary characters, spaces and line breaks, so you have a smaller file size. In turn, this reduces the number of processes a browser has to handle, which increases responsiveness and page speed.
¿El resultado? Un retardo de primera entrada más bajo.
A quick and simple way to minify your code is to use an online tool like Minify Code or get your web developer to help.
Break up long JavaScript tasks
The problem with long Javascript tasks is they can block the main thread, not allowing it to process user input, and therefore compromising your site’s responsiveness.
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.
The best way to this is with code splitting, which is where you break up and load smaller and necessary pieces of code at a time, rather than one large file all togeher. Tools like Webpack will let you do this.
Reducir el impacto del código de terceros y scripts no críticos
Too many third-party scripts, such as tags and analytics, can delay the execution of your site’s own data.
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.
Start by removing or delaying ads or pop-ups that aren’t necessary. Also, look under the Opportunities section of your PageSpeed Insights report for recommendations. It will list specific files and tasks that could be blocking your main thread.
Use async or defer for JavaScript to be executed only when it’s needed.
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 entusiasta: 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.
- Lazy evaluation: Your code is run only when needed.
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.
Read this article by Philip Walton for more on this approach.
Utilice trabajadores web
Web workers allow you to run scripts in the background without impacting the main thread.
Mover operaciones que no son de UI 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 genera 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.