A medida que aumenta el tráfico de tu sitio, querrás asegurarte de que todo siga funcionando correctamente. Si los visitantes tienen que esperar más de unos segundos a que se cargue tu página, probablemente abandonarán tu sitio y quizá no vuelvan nunca.
Por suerte, hay algunas pruebas sencillas para evaluar el rendimiento y, si necesitas mejorarlo, hay soluciones que pueden mejorar casi de inmediato los tiempos de carga.
En esta entrada hablaremos de un aspecto del rendimiento del sitio: First Input Delay. Descubrirás qué es, por qué es importante y cómo puedes medir y mejorar la puntuación de FID en tu sitio de WordPress.
Introducción a First Input Delay
First Input Delay (FID) es el tiempo de carga que experimenta un visitante después de interactuar por primera vez con tu sitio web. Básicamente, cuando alguien hace clic en un enlace o pulsa un botón, tiene que esperar a que su navegador responda. Si tu sitio tiene una puntuación de FID alta, los visitantes esperan durante más tiempo.
FID es una de las métricas principales de Core Web Vitals. Creado por Google, este informe mide el rendimiento de las páginas web.
Estas son las tres métricas principales de rendimiento incluidas en el informe de Core Web Vitals:
- Renderizado del mayor elemento con contenido (LCP): mide el tiempo que tarda tu sitio web en cargarse después de que un usuario solicita la URL.
- First Input Delay (retraso de la primera interacción, FID): es el tiempo que tarda tu sitio web en responder después de que un visitante interactúe con una página.
- Cumulative Layout Shift (CLS): mide todos los cambios de diseño que se producen mientras se carga una página.
Aunque todas estas métricas evalúan la experiencia de usuario de tu sitio web, tu puntuación de FID es una de las más importantes. Si tu página no se carga rápidamente, puede causar una mala primera impresión. De hecho, un retraso de un segundo puede reducir la satisfacción de los visitantes en un 16 %.
Estas son algunas ventajas de mejorar tu puntuación de FID:
- Un aumento del tiempo medio en la página
- Una reducción de la tasa de rebote
- Un aumento de las conversiones
Posibles causas de una puntuación de FID baja
Al ejecutar una prueba de Core Web Vitals, el informe te proporcionará una puntuación de First Input Delay. Un FID aceptable es de 100 milisegundos o menos.
Una puntuación de FID deficiente es cualquier valor superior a 300 ms. Esto puede deberse a varios factores.
Una de las causas más habituales de un First Input Delay alto es un código JavaScript pesado. Si un navegador tiene que ejecutar un archivo grande de JavaScript, puede estar demasiado ocupado para ejecutar otras solicitudes.
Tener demasiados plugins basados en JavaScript puede afectar negativamente a los tiempos de carga. Del mismo modo, algunos temas pueden tener archivos complejos que provoquen el mismo problema.
Otro factor pueden ser los scripts de terceros. Si tu sitio web tiene muchos códigos y etiquetas de análisis de terceros, esto puede aumentar la latencia de tu página. A veces, los navegadores pueden dar prioridad a estos scripts y retrasar la carga de otro contenido de tu sitio.
Cómo medir la puntuación de FID de tu sitio web
Ahora que sabes qué es First Input Delay, ha llegado el momento de poner a prueba tu sitio web.
Hay varias herramientas de Core Web Vitals que puedes utilizar para comprobar tu FID. Si alguna de ellas te ofrece un informe deficiente, puedes tomar medidas para mejorar tu sitio web.
1. PageSpeed Insights
Una herramienta conocida que puedes utilizar es PageSpeed Insights. Te permite evaluar el rendimiento de tu sitio web en diversos aspectos.
Después de introducir la URL de tu sitio web, PageSpeed Insights te ofrecerá un análisis detallado del rendimiento. En la parte superior de la página, podrás ver si tu sitio ha superado la evaluación de Core Web Vitals.
Con este informe, puedes revisar la puntuación de FID de tu sitio web, que se medirá en milisegundos. Como hemos mencionado antes, cualquier puntuación inferior a 100 ms superará la prueba.
Ten en cuenta que tendrás que comprobar el rendimiento de tu sitio tanto en navegadores móviles como de escritorio. Es posible que notes ligeras diferencias en tu puntuación de FID en estos dos dispositivos.
Esta es una de las formas más rápidas de medir First Input Delay en tu sitio web. Si necesitas una visión general rápida del rendimiento de tu web, esta podría ser la herramienta adecuada para ti.
2. Google Search Console
Al igual que PageSpeed Insights, Google Search Console es una herramienta gratuita que puedes utilizar para evaluar el rendimiento del sitio. Con este servicio, puedes consultar los datos de tráfico de tu sitio y solucionar problemas específicos, como First Input Delay.
Para empezar a utilizar Google Search Console, tendrás que verificar la propiedad de tu sitio web. Hay varias formas de hacerlo, pero explicaremos el método de carga del archivo HTML. Empieza introduciendo tu dominio o el prefijo de URL.
A continuación, descarga el archivo HTML que se ha generado para ti. Tendrás que subirlo al directorio raíz de tu sitio antes de poder utilizar las funciones de Google Search Console.
Después de verificarlo, podrás acceder a tu panel de administración. Allí, puedes ir a la pestaña Core Web Vitals.
A diferencia de PageSpeed Insights, si eres nuevo en esta herramienta, es posible que tardes un tiempo en acceder a tu informe. Además, puede que no veas ningún informe si tu sitio no recibe suficientes visitantes.
Google Search Console puede ofrecerte métricas similares sobre tu puntuación de FID. Recibirás una evaluación de Deficiente, Necesita mejoras, o Buena basada en datos de uso reales.
3. Lighthouse
Lighthouse es una herramienta de desarrollo web que puedes utilizar para auditar el rendimiento de cualquier página web. Aunque no mide directamente First Input Delay, te proporcionará Total Blocking Time (TBT). Puedes utilizarlo como referencia para el FID.
En pocas palabras, TBT evalúa la capacidad de respuesta de tu sitio a las acciones del usuario. Mide el tiempo total durante el que el navegador está demasiado ocupado —realizando tareas como ejecutar JavaScript o analizar CSS— para responder a las acciones del usuario entre FCP y TTI.
Para ver el informe de Lighthouse sobre tu sitio web, tendrás que hacer clic con el botón derecho en tu página web. Después, selecciona Inspeccionar.
En la parte superior del código generado, busca el icono de la doble flecha. Después, haz clic en él y selecciona Lighthouse.
En la página siguiente, verás una opción para generar un informe. Al hacer clic en ella, Lighthouse auditará tu sitio web.
Una vez completada la auditoría, podrás consultar análisis detallados del rendimiento de tu sitio. También verás informes sobre tu SEO y la accesibilidad web.
Después, desplázate hacia abajo hasta que veas Métricas. En esta sección, verás tu Total Blocking Time.
Aunque TBT y FID son similares, es importante tener en cuenta que FID es una métrica de campo. Como se basa en usuarios en tiempo real, no se puede medir en un entorno de laboratorio.
Lighthouse es una herramienta de métricas de laboratorio, por lo que su métrica Total Blocking Time no evaluará la interactividad real. Por suerte, mejorar tu puntuación de TBT también puede mejorar tu First Input Delay.
Cómo reducir el retraso de la primera interacción en WordPress
Al probar tu sitio web con una de las herramientas anteriores, es posible que obtengas una puntuación baja de First Input Delay. Por suerte, puedes mejorarla aplicando algunas estrategias eficaces.
Veamos cómo reducir First Input Delay en WordPress.
1. Instala un plugin de optimización
Una forma sencilla de empezar es instalar un plugin centrado en Core Web Vitals. De este modo, podrás mejorar tu First Input Delay sin complicarte demasiado.
Jetpack Boost es un plugin potente y fácil de usar que puedes utilizar para optimizar tus Core Web Vitals. Ofrece muchas formas de mejorar el rendimiento de tu sitio web y tu puntuación de FID.
Después de activar Jetpack Boost, la herramienta asignará automáticamente una puntuación de rendimiento a tu sitio. Podrás ver la velocidad de carga de tus páginas tanto en la vista para móviles como en la de escritorio.
A continuación, puedes personalizar sus ajustes para optimizar tus archivos y acelerar la carga. Posponer JavaScript probablemente será lo más eficaz para mejorar el FID, aunque optimizar CSS también puede evitar tener que analizar algunos archivos CSS grandes en determinadas circunstancias. Activa ambas opciones y es probable que veas una mejora en tu puntuación de FID.
Jetpack Boost es un plugin gratuito. Si ya tienes Jetpack instalado en tu sitio de WordPress, puedes activar Jetpack Boost desde el panel de administración.
2. Pospón el JavaScript que bloquea el renderizado
Otra forma eficaz de optimizar tu puntuación de FID consiste en posponer el JavaScript que bloquea el renderizado. De forma predeterminada, todo el JavaScript de tu sitio web bloquea el renderizado. Esto significa que el navegador dejará de cargar una página determinada hasta que pueda descargar y ejecutar estos scripts.
En este caso, puedes posponer la ejecución de JavaScript. Esto indicará al navegador que renderice primero el contenido más relevante.
Para identificar este JavaScript que bloquea el renderizado, puedes usar PageSpeed Insights. Primero, introduce la URL de tu sitio web en la barra de búsqueda.
A continuación, desplázate hasta la sección de Oportunidades. Aquí verás sugerencias para mejorar el rendimiento de tu sitio web. Busca la opción Eliminar recursos que bloquean el renderizado.
Al expandir esta sección, aparecerá una lista de recursos que puedes posponer o eliminar por completo. En el lado derecho, PageSpeed Insights te mostrará cómo pueden afectar estos cambios al tiempo de carga.
Una vez que decidas posponer el JavaScript no esencial de tu sitio web, puedes usar un plugin para simplificar este proceso. Con Jetpack Boost, puedes hacerlo en un solo paso.
En el panel de administración de WordPress, ve a Jetpack → Boost. Después, busca el ajuste denominado Posponer JavaScript no esencial.
Por último, activa esta función. Una vez aplicada, el interruptor se volverá verde. Ahora, vuelve a analizar tu sitio web con PageSpeed Insights para comprobar si ha mejorado tu puntuación de FID.
3. Pospón el CSS no esencial
Al evaluar tu sitio web en PageSpeed Insights, también es posible que veas otros recursos que bloquean el renderizado. Al igual que JavaScript, cierto código puede impedir que se cargue tu página mientras el navegador lo lee.
Al igual que con JavaScript, puedes posponer el CSS no esencial. Empieza por pasar tu sitio web por una herramienta de rendimiento para comprobar si es necesario optimizar tu CSS.
Después, puedes usar el plugin Jetpack Boost para optimizar tu CSS. En el panel de administración de WordPress, ve a Jetpack → Boost. Después, busca el ajuste denominado Optimizar la carga de CSS.
Después de hacer clic en esta opción, el plugin generará automáticamente el CSS crítico para tu sitio web. Moverá esta información importante al principio de la página, lo que puede ayudar a que tu contenido se cargue más rápido.
Posponer el CSS no esencial puede mejorar tu rendimiento general. En determinadas circunstancias, también podría mejorar tu puntuación de FID en PageSpeed Insights.
4. Elimina el JavaScript innecesario
Si has instalado muchos plugins o un tema complejo, es posible que tu sitio web esté ejecutando demasiados scripts. Si un navegador necesita ejecutar una larga lista de scripts para cargar tu sitio web, esto puede ralentizarlo.
Muchos scripts son necesarios para mostrar tu sitio web, pero seguramente tengas algo de CSS y JavaScript innecesarios. Si no tienes claro cómo distinguirlos, puedes volver a PageSpeed Insights.
Al igual que hiciste con los tres primeros métodos, desplázate hasta la sección Oportunidades. Esta vez, busca JavaScript y CSS sin utilizar.
Junto a cada script sin usar habrá una URL que te indicará de dónde procede. En este ejemplo, Google Analytics y Google Tag Manager generaban JavaScript innecesario.
Si sabes qué tema o plugins están causando el problema, puedes plantearte eliminarlos. Después, puedes instalar versiones diferentes, bien programadas y más ligeras.
Como alternativa, puedes utilizar un plugin como Asset CleanUp para eliminar CSS y JavaScript sin utilizar. Esta herramienta puede eliminar recursos que bloquean el renderizado para reducir el número de solicitudes HTTP de tu sitio.
Una vez que hayas instalado y activado Asset Cleanup en tu sitio, ve a Asset CleanUp → Administrador de CSS/JS en tu panel de administración. En esta página, puedes seleccionar distintos elementos de tu sitio web para ver su CSS y JavaScript.
Por ejemplo, puedes hacer clic en Página de inicio, y se mostrarán todos los archivos cargados en esta página.
Esta información se mostrará según la ubicación. Puedes desplazarte hacia abajo por la página para ver los scripts de tus plugins, temas, el software del núcleo y fuentes de terceros.
Hay dos formas de eliminar un fragmento de script. Puedes desactivarlo en esta página concreta o en todo el sitio.
Cuando hayas eliminado los scripts que no utilizas, haz clic en Actualizar. Después, puedes vaciar la caché para aplicar estos cambios inmediatamente.
5. Minifica CSS y JavaScript
Aunque puedes eliminar fácilmente scripts de tu sitio, solo querrás deshacerte de los que no utilizas. En el caso de CSS y JavaScript necesarios, puedes limitarte a minificarlos.
Jetpack Boost facilita este proceso, con interruptores que solo tienes que activar. Después de instalar y activar el plugin, ve a Jetpack → Boost en tu panel de administración de WordPress.
A continuación, activa las opciones Concatenar JS y Concatenar CSS. Estas herramientas agruparán tu código y lo minificarán para lograr un rendimiento óptimo.
6. Retrasa el tiempo de ejecución de JavaScript
Para optimizar aún más tu JavaScript, puedes retrasar su tiempo de ejecución. Esto consiste en indicar al navegador que cargue JavaScript solo después de que el usuario interactúe con tu contenido. A menos que un visitante se desplace hacia abajo por la página o haga clic en un botón, estos scripts no se procesarán.
Nota: Esto podría tener potencialmente el efecto contrario (aunque ayudaría a mejorar tu puntuación de LCP), así que quizá quieras probar primero otros consejos de este artículo. Si decides hacerlo, comprueba tu puntuación de inmediato y determina si ha mejorado antes de continuar con otras tareas de optimización.
Para ello, puedes utilizar un plugin como Flying Scripts. Con esta herramienta, puedes retrasar la ejecución de los archivos JavaScript hasta que haya actividad de los visitantes en tu sitio.
Después de activar Flying Scripts, ve a Ajustes → Flying Scripts. Esto abrirá la página de ajustes del plugin, donde puedes empezar a implementar retrasos de JavaScript.
Empieza escribiendo palabras clave que identifiquen los scripts cuya ejecución quieres retrasar. Por ejemplo, puedes utilizar «gtag» para un script de Google Tag Manager.
Después, puedes establecer un tiempo de espera. Básicamente, esto hará que JavaScript se ejecute cuando no haya habido actividad durante cierto tiempo. Puedes configurar un temporizador de hasta diez segundos. Cuando hayas terminado, haz clic en Guardar cambios.
7. Implementa una CDN
Otra opción eficaz para mejorar tu First Input Delay es utilizar una Red de distribución de contenido (CDN). Se trata de un grupo de servidores conectados que puede distribuir tu contenido en línea a usuarios de todo el mundo.
Al utilizar una CDN, puedes reducir la distancia entre tu servidor y los visitantes en línea. Esto se debe a que, cuando alguien visita tu sitio, el contenido se entrega desde el servidor más cercano a su ubicación. Si solo tienes un servidor en una ubicación, enviar datos a usuarios internacionales puede llevar mucho tiempo.
Por suerte, los sitios que utilizan Jetpack ya incluyen la CDN gratuita. Si navegas a Jetpack → Ajustes → Rendimiento, puedes activar el Acelerador del sitio.
Jetpack optimizará tus imágenes y archivos estáticos. A diferencia de otros proveedores de CDN, no hay límite de archivos. Además, no tendrás que preocuparte por cuotas mensuales adicionales ni por un proceso de gestión complicado.
Preguntas frecuentes sobre First Input Delay
Hasta ahora, hemos visto cómo funciona First Input Delay y cómo puedes mejorar tu puntuación. Ahora, veamos algunas preguntas frecuentes sobre FID.
¿Cómo puedo medir la puntuación de FID de mi sitio de WordPress?
Puedes medir fácilmente la puntuación de First Input Delay de tu sitio web utilizando una herramienta para Core Web Vitals. PageSpeed Insights es una opción fácil de usar. Solo tienes que introducir la URL de tu sitio y la herramienta generará un informe detallado sobre el rendimiento de tu sitio.
Google Search Console funciona de forma muy similar. Después de verificar que eres el propietario de un sitio web, puedes consultar tu informe de FID basado en datos de visitantes reales.
También puedes utilizar Lighthouse. Esta herramienta te proporciona el Total Blocking Time de tu sitio (TBT). Aunque no muestra resultados de visitantes reales, puede ayudarte a comprender mejor la capacidad de respuesta de tu página.
¿Cuál es una buena puntuación de FID?
En pocas palabras, tu sitio tendrá una de estas tres puntuaciones:
- Buena: 100 milisegundos o menos
- Necesita mejorar: entre 100 ms y 300 ms
- Deficiente: más de 300 ms
Después de medir tu puntuación de FID, cualquier resultado superior a 100 milisegundos requerirá algunos ajustes.
¿Cómo puedo optimizar fácilmente mi puntuación de FID?
Puedes mejorar tu puntuación de FID optimizando los scripts de tu sitio web. Normalmente, los archivos complejos de JavaScript y CSS harán que el navegador deje de cargarlos hasta que los procese. Al eliminar, aplazar o minificar scripts, puedes aumentar la velocidad de tu sitio.
Aunque puedes utilizar distintas herramientas para este proceso, Jetpack Boost puede ayudarte a implementar varias soluciones a la vez. Con este plugin, puedes optimizar la estructura de CSS y aplazar el JavaScript no esencial.
Mejora la primera impresión
Cuando un nuevo visitante interactúa con tu sitio web, espera que el navegador responda rápidamente. Si tu sitio tiene un First Input Delay (FID) alto, puede hacer que los usuarios abandonen la página sin leer tu contenido. Si te centras en el tiempo de respuesta de tu sitio, puedes mejorar la experiencia del usuario y conservar a más visitantes.
Tu sitio web puede tener una puntuación de FID deficiente debido a un código de JavaScript y CSS pesado e ineficiente. Por suerte, puedes identificar fácilmente estos problemas con una herramienta como PageSpeed Insights de Google. Después, puedes instalar un plugin como Jetpack Boost para minificar o aplazar CSS y JavaScript.
Jetpack 