Cómo mejorar el retraso de la primera entrada (FID) en WordPress

A medida que aumenta el tráfico de su sitio, querrá asegurarse de que las cosas continúen funcionando sin problemas. Si los visitantes tienen que esperar más de unos segundos para que se cargue su página, es probable que abandonen su sitio y es posible que nunca regresen.

Afortunadamente, existen algunas pruebas simples para evaluar su rendimiento y, si se necesitan mejoras, existen soluciones que pueden mejorar casi de inmediato sus tiempos de carga.

En esta publicación, analizaremos un aspecto del rendimiento del sitio: el retraso de la primera entrada. Aprenderá qué es, por qué es importante y cómo puede medir y mejorar el puntaje FID en su sitio de WordPress.

Una introducción al primer retardo de entrada

First Input Delay (FID) es el tiempo de carga que experimenta un visitante después de interactuar con su sitio web por primera vez. Esencialmente, cuando alguien hace clic en un enlace o toca un botón, tiene que esperar a que su navegador responda. Si su sitio tiene una puntuación FID alta, los visitantes esperan períodos más largos.

FID es una de las principales métricas de Core Web Vitals. Creado por Google, este informe mide el rendimiento de las páginas web.

Estas son las tres métricas de rendimiento principales que se incluyen en el informe Core Web Vitals:

• Pintura con contenido más grande (LCP) : mide el tiempo que tarda su sitio web en cargarse después de que un usuario solicita la URL.
• First Input Delay (FID) : este es el tiempo que tarda su sitio web en responder después de que un visitante interactúa con una página.
• Cambio de diseño acumulativo (CLS) : mide todos los cambios de diseño que ocurren mientras se carga una página.

Aunque todas estas métricas evalúan la experiencia del usuario de su sitio web, su puntuación FID es una de las más importantes. Si su página no se carga rápidamente, puede dejar una mala primera impresión. De hecho, un retraso de un segundo puede disminuir la satisfacción del visitante en un 16 por ciento.

Aquí hay algunos beneficios de mejorar su puntaje FID:

• Un impulso en el tiempo promedio de sus visitantes en la página
• Una reducción en su tasa de rebote
• Un aumento en las conversiones

Posibles causas de una puntuación FID baja

Cuando ejecuta una prueba Core Web Vitals, el informe le dará una puntuación de Retraso en la primera entrada. Un FID aceptable es de 100 milisegundos o menos.

Una puntuación FID deficiente es cualquier valor superior a 300 ms. Esto puede ser causado por algunos factores diferentes.

Una de las causas más comunes de un retraso alto en la primera entrada es el código JavaScript pesado. Si un navegador tiene que ejecutar un archivo JavaScript grande, puede estar demasiado ocupado para ejecutar otras solicitudes.

Tener demasiados complementos basados ​​en JavaScript puede afectar negativamente sus tiempos de carga. De manera similar, algunos temas pueden tener archivos complejos que causan el mismo problema.

Otro factor pueden ser los scripts de terceros. Si su sitio web tiene muchos códigos y etiquetas de análisis de terceros, esto puede aumentar la latencia de su página. A veces, los navegadores pueden priorizar estos scripts, lo que retrasa la carga de otro contenido en su sitio.

Cómo medir la puntuación FID de su sitio web

Ahora que sabe qué es First Input Delay, es hora de poner a prueba su sitio web.

Hay varias herramientas de Core Web Vitals que puede usar para verificar su FID. Si recibe un informe deficiente de cualquiera de estas herramientas, puede tomar medidas para mejorar su sitio web.

1. Perspectivas de PageSpeed

Una herramienta muy conocida que puede utilizar es PageSpeed ​​Insights. Esto le permite evaluar el rendimiento de su sitio web en una variedad de factores.

Después de ingresar la URL de su sitio web, PageSpeed ​​Insights le brindará un análisis de rendimiento detallado. En la parte superior de la página, puede ver si su sitio ha superado la evaluación Core Web Vitals.

Con este informe, puede revisar la puntuación FID de su sitio web, que se medirá en milisegundos. Como mencionamos anteriormente, cualquier puntuación inferior a 100 ms pasará la prueba.

Tenga en cuenta que deberá verificar el rendimiento de su sitio para los navegadores móviles y de escritorio. Es posible que note ligeras diferencias en su puntaje FID en estos dos dispositivos.

Esta es una de las formas más rápidas de medir el retraso de la primera entrada en su sitio web. Si necesita una descripción general rápida del rendimiento de su web, esta podría ser la herramienta adecuada para usted.

2. Consola de búsqueda de Google

Similar a PageSpeed ​​Insights, Google Search Console es una herramienta gratuita que puede usar para evaluar el rendimiento del sitio. Con este servicio, puede ver los datos de tráfico de su sitio y solucionar problemas específicos como el retraso en la primera entrada.

Para comenzar a usar Google Search Console, deberá verificar la propiedad de su sitio web. Hay varias formas de hacer esto, pero describiremos el método de carga de archivos HTML. Comience ingresando su dominio o prefijo de URL.

Luego, descargue el archivo HTML que se ha generado para usted. Deberá cargar este archivo en el directorio raíz de su sitio antes de poder utilizar las funciones de Google Search Console.

Después de la verificación, podrá acceder a su panel de control. Aquí, puede navegar a la pestaña Core Web Vitals .

A diferencia de PageSpeed ​​Insights, puede llevar algún tiempo acceder a su informe si es la primera vez que utiliza esta herramienta. Además, es posible que no pueda ver un informe si su sitio no recibe suficientes visitantes.

Google Search Console puede brindarle métricas similares en su puntaje FID. Recibirá una evaluación de Pobre , Necesita mejorar o Bueno según los datos de uso del mundo real.

3. Faro

Lighthouse es una herramienta de desarrollo web que puede utilizar para auditar el rendimiento de cualquier página web. Aunque no mide directamente el retardo de la primera entrada, le dará el tiempo total de bloqueo (TBT). Puede usar esto como un proxy para FID.

En pocas palabras, TBT evalúa qué tan bien responde su sitio a la entrada del usuario. Al igual que FID, TBT mide el retraso entre la primera pintura con contenido (FCP) y el tiempo de interacción (TTI). Como son tan similares, puede usar TBT para medir su puntaje FID.

Para ver el informe de Lighthouse en su sitio web, deberá hacer clic con el botón derecho en su página web. Luego, elige Inspeccionar .

En la parte superior del código generado, busque el icono de doble flecha. Luego, haz clic en él y selecciona Faro .

En la página siguiente, verá una opción para generar un informe. Cuando haga clic en esto, Lighthouse auditará su sitio web.

Una vez completada la auditoría, puede ver análisis detallados sobre el rendimiento de su sitio. También verá informes sobre su SEO y accesibilidad web.

Luego, desplácese hacia abajo hasta que vea Métricas . En esta sección, verá su Tiempo total de bloqueo .

Aunque TBT y FID son similares, es importante tener en cuenta que FID es una métrica de campo. Dado que se basa en los usuarios en tiempo real, no se puede medir en un entorno de laboratorio.

Lighthouse es una herramienta de métrica de laboratorio, por lo que su métrica de tiempo total de bloqueo no evaluará la interactividad real. Afortunadamente, mejorar su puntaje TBT también puede mejorar su Retraso en la primera entrada.

Cómo reducir el retraso de la primera entrada en WordPress

Cuando prueba su sitio web con una de las herramientas anteriores, es posible que reciba una puntuación baja de Retraso en la primera entrada. Afortunadamente, puede mejorar su puntaje implementando algunas estrategias efectivas.

Veamos cómo reducir el retraso de la primera entrada en WordPress.

1. Instala un complemento de optimización

Una manera fácil de comenzar es instalar un complemento que se centre en Core Web Vitals. Al hacer esto, puede mejorar su Demora de primera entrada sin ningún trabajo pesado.

Jetpack Boost es un complemento potente y fácil de usar que puede usar para optimizar su Core Web Vitals. Proporciona muchas formas de aumentar el rendimiento de su web y mejorar su puntaje FID.

Después de activar Jetpack Boost, la herramienta le dará automáticamente a su sitio una puntuación de rendimiento. Puede ver qué tan rápido se cargan sus páginas tanto en la vista móvil como en la de escritorio.

Luego, puede personalizar su configuración para optimizar sus archivos para una carga rápida. Al optimizar CSS, diferir JavaScript e implementar la carga diferida, puede mejorar su puntaje FID.

Jetpack Boost es un complemento gratuito. Si ya tiene Jetpack instalado en su sitio web de WordPress, puede activar Jetpack Boost desde el panel de control.

2. Aplaza el JavaScript que bloquea el renderizado

Otra forma efectiva de optimizar su puntaje FID es diferir JavaScript que bloquea el renderizado. De manera predeterminada, todo el JavaScript en su sitio web bloquea el renderizado. Esto significa que un navegador dejará de cargar una determinada página hasta que pueda descargar y ejecutar estos scripts.

En este caso, puede diferir la ejecución de JavaScript. Esto le indicará al navegador que muestre primero el contenido más relevante.

Para identificar este JavaScript que bloquea la visualización, puede utilizar PageSpeed ​​Insights. Primero, escriba la URL de su sitio web en la barra de búsqueda.

Luego, desplácese hacia abajo hasta la sección Oportunidades . Aquí verá sugerencias para mejorar su rendimiento web. Encuentre donde dice Eliminar los recursos que bloquean el renderizado .

Cuando expanda esta sección, habrá una lista de recursos que puede diferir o eliminar por completo. En el lado derecho, PageSpeed ​​Insights le mostrará cómo estos cambios pueden afectar su tiempo de carga.

Una vez que decida diferir JavaScript no esencial en su sitio web, puede usar un complemento para simplificar este proceso. Con Jetpack Boost, puedes hacer esto en un solo paso.

En su tablero de WordPress, navegue hasta Jetpack → Boost . Luego, busque la configuración etiquetada Defer Non-Essential JavaScript .

Finalmente, active esta función. Cuando se implemente, el interruptor se volverá verde. Ahora, intente ejecutar su sitio web a través de PageSpeed ​​Insights nuevamente para ver si su puntaje FID ha mejorado.

3. Aplazar CSS no crítico

Cuando evalúa su sitio web en PageSpeed ​​Insights, también puede ver otros recursos que bloquean el renderizado. Similar a JavaScript, cierta codificación puede evitar que su página se cargue mientras el navegador la lee.

Al igual que con JavaScript, puede diferir CSS no crítico. Comience ejecutando su sitio web a través de una herramienta de rendimiento para ver si su CSS necesita optimizarse.

Luego, puede usar el complemento Jetpack Boost para optimizar su CSS. En su tablero de WordPress, navegue hasta Jetpack → Boost . Luego, busque la configuración etiquetada como Optimizar la carga de CSS .

Después de hacer clic en esta opción, el complemento generará automáticamente el CSS crítico para su sitio web. Moverá esta información importante al principio de la página, lo que puede ayudar a que su contenido se cargue más rápido.

Aplazar el CSS no crítico puede mejorar su rendimiento general. También debería mejorar su puntuación FID en PageSpeed ​​Insights.

4. Elimina JavaScript innecesario

Si instaló muchos complementos o un tema complejo, su sitio web podría estar ejecutando demasiados scripts. Si un navegador necesita ejecutar una larga lista de scripts para cargar su sitio web, puede conducir a velocidades lentas.

Se necesitan muchos scripts para mostrar su sitio web, pero es probable que tenga algunos CSS y JavaScript innecesarios. Si no está seguro de cómo notar la diferencia, puede volver a PageSpeed ​​Insights.

Al igual que hizo con los tres primeros métodos, desplácese hasta la sección Oportunidades . Esta vez, busque JavaScript y CSS sin usar.

Junto a cada secuencia de comandos no utilizada, habrá una URL que le indicará de dónde proviene. En este ejemplo, Google Analytics y Google Tag Manager estaban creando código JavaScript innecesario.

Si sabe qué tema o complementos están causando el problema, podría considerar eliminarlos. Luego, puede instalar diferentes versiones que están bien codificadas y son más livianas.

Alternativamente, puede usar un complemento como Asset CleanUp para eliminar CSS y JavaScript no utilizados. Esta herramienta puede eliminar los recursos que bloquean el procesamiento para disminuir la cantidad de solicitudes HTTP de su sitio.

Una vez que haya instalado y activado la Limpieza de activos en su sitio, vaya a Limpieza de activos → Administrador de CSS/JS en su tablero. En esta página, puede seleccionar diferentes elementos de su sitio web para ver su CSS y JavaScript.

Por ejemplo, puede hacer clic en Página de inicio y mostrará todos los archivos cargados en esta página.

Esta información se enumerará según la ubicación. Puede desplazarse hacia abajo en la página para ver los scripts de sus complementos, temas, software principal y fuentes de terceros.

Hay dos formas de eliminar un fragmento de secuencia de comandos. Puede descargarlo en esta página específica o en todo el sitio.

Una vez que elimine los scripts no utilizados, haga clic en Actualizar . Después de esto, puede borrar su caché para aplicar inmediatamente estos cambios.

5. Minificar CSS y JavaScript

Aunque puede eliminar fácilmente los scripts de su sitio, solo querrá deshacerse de los que no esté utilizando. Para CSS y JavaScript necesarios, simplemente puede minimizarlos en su lugar.

Una manera fácil de hacerlo es instalando el complemento Autoptimize. Esta es una herramienta gratuita que puede minimizar automáticamente sus archivos CSS y JavaScript después de un proceso de configuración simple.

Después de la instalación, vaya a Configuración → Optimizar automáticamente . En Opciones de JavaScript , puede marcar la casilla junto a Optimizar código JavaScript .

Luego, deberá hacer lo mismo para las Opciones de CSS . Al personalizar esta configuración, la herramienta minimizará automáticamente el CSS y el JavaScript existentes en su sitio web.

Cuando haya terminado, guarde los cambios. También tienes la opción de vaciar tu caché después de este proceso.

6. Retrasar el tiempo de ejecución de JavaScript

Para optimizar aún más su JavaScript, puede retrasar su tiempo de ejecución. Esto implica decirle al navegador que solo cargue JavaScript después de que un usuario interactúe con su contenido. A menos que un visitante se desplace hacia abajo en la página o haga clic en un botón, estos scripts no se procesarán.

Para hacer esto, puede usar un complemento como Flying Scripts. Con esta herramienta, puede retrasar la ejecución de archivos JavaScript hasta que haya actividad de visitantes en su sitio.

Después de activar Flying Scripts, vaya a Configuración → Flying Scripts . Esto abrirá la página de configuración del complemento, donde puede comenzar a implementar retrasos de JavaScript.

Comience escribiendo palabras clave que identifiquen los scripts que desea retrasar. Por ejemplo, puede usar "gtag" para una secuencia de comandos de Google Tag Manager.

Luego, puede implementar un tiempo de espera. Esencialmente, esto ejecutará JavaScript cuando no haya habido actividad durante un cierto período de tiempo. Puede configurar un temporizador de hasta diez segundos. Una vez que haya terminado, haga clic en Guardar cambios.

7. Implementar una red de entrega de contenido

Otra opción eficaz para mejorar el retardo de la primera entrada es utilizar una red de entrega de contenido (CDN). Este es un grupo de servidores conectados que pueden distribuir su contenido en línea a usuarios de todo el mundo.

Al usar un CDN, puede disminuir la distancia entre su servidor y los visitantes en línea. Esto se debe a que cuando alguien visita su sitio, el contenido se entrega desde el servidor más cercano a su ubicación. Si solo tiene un servidor en una ubicación, puede llevar mucho tiempo enviar datos a usuarios internacionales.

Afortunadamente, los sitios que utilizan Jetpack ya vienen con un CDN gratuito. Si navega a Jetpack → Configuración → Rendimiento , puede 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 tarifas mensuales adicionales o un proceso de gestión complicado.

Preguntas frecuentes sobre el retardo de la primera entrada

Hasta ahora, hemos analizado cómo funciona First Input Delay y cómo puede mejorar su puntuación. Ahora, veamos algunas preguntas comunes sobre FID.

¿Cómo puedo medir la puntuación FID de mi sitio de WordPress?

Puede medir fácilmente la puntuación del retraso de la primera entrada de su sitio web utilizando una herramienta para Core Web Vitals. PageSpeed ​​Insights es una opción fácil de usar. Todo lo que tiene que hacer es ingresar la URL de su sitio y la herramienta generará un informe detallado sobre el rendimiento de su sitio.

Google Search Console funciona de manera muy similar. Después de verificar que posee un sitio web, puede ver su informe FID basado en datos de visitantes del mundo real.

También puedes usar Faro. Esta herramienta le brinda el tiempo total de bloqueo (TBT) de su sitio. Aunque esto no mostrará resultados de visitantes reales, puede brindarle una mejor comprensión de la capacidad de respuesta de su página.

¿Qué es una buena puntuación FID?

En pocas palabras, su sitio caerá en uno de los tres puntajes:

• Bueno : 100 milisegundos o menos
• Necesita mejorar : oscila entre 100 ms y 300 ms
• Pobre : ​​más de 300ms

Después de medir su puntaje FID, cualquier resultado superior a 100 milisegundos requerirá algunos ajustes.

¿Cómo puedo optimizar fácilmente mi puntaje FID?

Puede mejorar su puntaje FID optimizando los scripts en su sitio web. Por lo general, los archivos complejos de JavaScript y CSS harán que un navegador deje de cargarse hasta que los procese. Al eliminar, aplazar o minimizar las secuencias de comandos, puede aumentar la velocidad de su sitio.

Aunque puede usar diferentes herramientas para este proceso, Jetpack Boost puede ayudarlo a implementar varias soluciones a la vez. Con este complemento, puede optimizar su estructura CSS y diferir JavaScript no esencial.

Mejora tu primera impresión

Cuando un nuevo visitante interactúa con su sitio web, espera que su navegador responda rápidamente. Si su sitio tiene un retraso de primera entrada (FID) alto, puede hacer que los usuarios abandonen la página sin leer su contenido. Al centrarse en el tiempo de respuesta de su sitio, puede mejorar la experiencia del usuario y retener a más visitantes.

Su sitio web puede tener un puntaje FID bajo debido a la codificación JavaScript y CSS pesada e ineficiente. Afortunadamente, puede identificar fácilmente estos problemas con una herramienta como PageSpeed ​​Insights de Google. Luego, puede instalar un complemento como Jetpack Boost para minimizar o diferir CSS y JavaScript.