wdffpress.info

wdffpress.info

¿Qué es el retardo de la primera entrada (FID)? Cómo reducirlo en WordPress

Hay un nombre para ese momento incómodo cuando intentas interactuar con una página por primera vez y tarda un tiempo en responder. Eso se llama First Input Delay (FID) y es una métrica que le da una idea de qué tan buena es la experiencia del usuario (UX) de un sitio web.

Un FID bajo le indica que un sitio web está optimizado correctamente. Significa que los navegadores de sus visitantes no se atascan cargando elementos y scripts incluso después de que parezca que una página ha terminado de renderizarse. Si puede obtener su puntaje FID lo más bajo posible, hará que las visitas de los usuarios sean mucho más agradables.

En este artículo, hablaremos sobre lo que significa el retardo de la primera entrada y por qué es una métrica tan importante. Luego, repasaremos cuatro formas de reducir las puntuaciones FID en WordPress. ¡Hagámoslo!

📚 Tabla de contenido:

Qué es el retraso de la primera entrada (y por qué es una métrica importante)

Cada vez que visita un sitio web, suceden muchas cosas en segundo plano. Antes de que pueda ver una página, su navegador necesita consultar su servidor, enviar y procesar solicitudes, cargar elementos, etc. Para un sitio web moderno, puede tener docenas de solicitudes que su navegador debe cumplir antes de ver una página completamente renderizada con la que puede interactuar.

En algunos casos, sucede que una página mira listo, pero su navegador todavía está procesando solicitudes y cargando scripts en segundo plano. Cuando intentas interactuar con esa página, es posible que encuentres un pequeño retraso entre que realizas una acción y recibes una respuesta.

Por ejemplo, si hace clic en un enlace, es posible que su navegador no procese la solicitud al instante. Si presiona un botón, es posible que no haga nada a primera vista. Eso puede suceder básicamente con cualquier elemento interactivo en su sitio, y su objetivo es reducir el retraso de la primera entrada tanto como sea posible.

Idealmente, el retraso de la primera entrada de su sitio debe ser inferior a 100 milisegundos. Ese es el estándar que Google considera aceptable para los sitios web:

El primer retardo de entrada (FID)
Fuente: Web.dev

Mencionamos a Google específicamente porque FID es una de las tres métricas que utiliza para medir las experiencias positivas o negativas de los usuarios en un sitio web. Esas tres métricas se denominan Core Web Vitals y también incluyen las siguientes dos métricas:

  1. Pintura con contenido más grande (LCP): Esta métrica mide cuánto tiempo tarda en cargarse el elemento más grande de una página.
  2. Cambio de diseño acumulativo (CLS): Mide cuánto «cambia» visualmente una página a medida que se carga. Si los elementos se mueven demasiado mientras se cargan, tendrá una puntuación CLS baja. Tenemos una guía sobre cómo corregir el cambio de diseño acumulativo para WordPress.

Hay dos razones clave por las que Core Web Vitals es importante. La primera es que proporcionan una medida de qué tan bien optimizado está su sitio. Si su sitio web tiene excelentes puntuaciones, significa que se carga rápido, es visualmente estable y los usuarios no tienen que esperar demasiado para interactuar con él.

La segunda razón por la que los Core Web Vitals son importantes es que afectan la optimización del motor de búsqueda (SEO) de su sitio. Google usa estas métricas como una pequeña señal al determinar las clasificaciones. De hecho, el gigante de los motores de búsqueda ha dejado claro que Core Web Vitals importa cuando se trata de SEO, aunque no en el mismo grado que el contenido y los backlinks.

Cómo medir el retardo de la primera entrada para su sitio web

El retraso de la primera entrada puede ser difícil de medir porque necesita recopilar datos en función de los visitantes reales de su sitio, a diferencia de otras métricas de rendimiento en las que puede ejecutar pruebas simuladas con una computadora.

La forma más fácil de medir el retraso de la primera entrada para su sitio web es usar PageSpeed ​​Insights. Sin embargo, PageSpeed ​​Insights solo mostrará los tiempos de retraso de la primera entrada si su sitio tiene suficiente tráfico para ser incluido en el informe de experiencia del usuario de Chrome.

Primero hablemos sobre cómo funciona PageSpeed ​​Insights y luego compartiremos algunas alternativas que puede probar si PageSpeed ​​Insights no ofrece métricas de retraso de la primera entrada para su sitio:

La página de inicio de PageSpeed ​​Insights

Para usar PageSpeed ​​Insights, ingrese la URL de la página que desea probar. PageSpeed ​​Insights tardará unos minutos en analizarlo y luego devolverá un informe que se ve así:

Un informe de rendimiento de PageSpeed ​​Insights

En general, ese sitio web no tiene las mejores puntuaciones de Core Web Vital. Sin embargo, puede ver que lo hace muy bien cuando se trata de la métrica Retardo de la primera entrada, con un tiempo promedio por debajo de 100 ms.

Sin embargo, como mencionamos anteriormente, no todos los sitios verán esta métrica. Si tiene un sitio con menor tráfico, es posible que vea algo como esto:

Los sitios con poco tráfico no verán los tiempos de retardo de la primera entrada

En esta situación, tiene dos opciones:

  1. Simple: Puede utilizar el Tiempo total de bloqueo métrica de la Datos de laboratorio sección como un proxy aproximado para el tiempo de retardo de la primera entrada. No es una representación perfecta, pero la métrica Tiempo total de bloqueo es muy similar al Retraso de la primera entrada. Por lo general, si mejora su tiempo de bloqueo total, también verá mejoras similares en el tiempo de retardo de la primera entrada.
  2. Avanzado: Puede utilizar una herramienta de supervisión del rendimiento del usuario real, como Solicitar métricas. Con estas herramientas, deberá agregar una secuencia de comandos de seguimiento a su sitio para recopilar datos reales del usuario.

A continuación, puede ver dónde encontrar la métrica Tiempo total de bloqueo en PageSpeed ​​Insights:

Uso del tiempo de bloqueo total en lugar del retardo de la primera entrada

Ahora que sabe cómo medir FID y otros elementos fundamentales de la Web, hablemos sobre cómo mejorarlos.

Formas de reducir las puntuaciones de retraso de la primera entrada en WordPress

En esta sección, nos centraremos en las optimizaciones de WordPress que mejorarán sus puntuaciones de Retraso de la primera entrada. Algunas de estas optimizaciones también afectarán positivamente a otros Core Web Vitals, lo que los hace aún más útiles.

1. Elimine los scripts innecesarios de su sitio web.

Una de las principales razones por las que su sitio web de WordPress puede tardar demasiado en cargarse es porque necesita ejecutar una gran lista de scripts. Por scripts, nos referimos a JavaScript y CSS, entre otras opciones posibles. Si utiliza un tema de WordPress «complejo» o una amplia gama de complementos, es probable que tenga demasiados scripts ejecutándose en segundo plano.

Averiguar qué scripts son útiles y cuáles no puede ser un desafío, pero ahí es donde entra en juego PageSpeed ​​Insights. Si ejecuta una prueba para cualquiera de las páginas de su sitio, el informe de PageSpeed ​​Insights también incluirá un Oportunidades sección:

Uso de PageSpeed ​​Insights para identificar JavaScript no utilizado

Esa sección señalará qué archivos JavaScript y CSS no está usando su sitio. Eliminar esos scripts debería disminuir sus puntajes FID en consecuencia.

En muchos casos, esos scripts provienen de complementos. Eso significa que debe echar un vistazo a su lista de complementos y averiguar qué herramientas realmente no necesita. Seleccionar sus complementos es una excelente manera de mantener la carga de su sitio web lo más rápido posible.

2. Aplazar el código no crítico durante la carga

Es común encontrarse con scripts o códigos específicos que tardan demasiado en cargarse. El problema es que, en algunos casos, su navegador no podrá terminar de cargar el resto de los elementos de una página hasta que maneje esos scripts.

Si esos scripts no son «críticos», simplemente puede decirle a su navegador que los deje para el final para que no ralenticen las cosas para los demás. Eso es lo que llamamos «aplazamiento de código no crítico».

Su primera parada al determinar qué scripts puede aplazar debería ser PageSpeed ​​Insights. Una vez que genere un informe para una página, PageSpeed ​​Insights incluirá recomendaciones sobre cómo mejorar sus puntajes.

Entre esas recomendaciones, encontrará una opción que dice Elimina los recursos que bloquean el renderizado. Si hace clic en él, le mostrará una lista de scripts que puede aplazar:

Averiguar qué scripts puede aplazar utilizando PageSpeed ​​Insights

Hay dos formas de manejar los scripts de bloqueo de renderizado en WordPress. El primer método implica utilizando asincrónico. Esto permite que los navegadores sigan cargando su sitio web mientras analizan el script que especifique. Alternativamente, puede aplazar el código para que se cargue después de que los navegadores rendericen el resto del documento HTML.

Para configurar esto en WordPress, puede usar el complemento JavaScript asincrónico gratuito. O bien, muchos complementos de rendimiento de WordPress incluyen funciones para diferir el código. Si está dispuesto a pagar por un complemento premium, Cohete WP tiene características para diferir automáticamente CSS y JavaScript no críticos.

3. Utilice herramientas de minificación de CSS y JavaScript

Aunque todos estamos a favor de eliminar CSS y JavaScript no utilizados, hay algunos scripts que no querrá eliminar. Por ejemplo, no querrá deshacerse de la hoja de estilo CSS de ninguna página a menos que desee un sitio web que se sienta como si hubiera sido extraído del siglo pasado.

Por esos guiones que tu hipocresía eliminar, lo mejor que puede hacer es minimizarlos. Esto significa eliminar los espacios en blanco y los caracteres innecesarios del código para reducir el tamaño de cada script. Hay varias herramientas que automáticamente minificarán los scripts en WordPress, como Autoptimizar y Minificación de velocidad rápida:

Complementos de minificación en WordPress

En términos generales, la mayoría de los complementos de optimización y almacenamiento en caché de WordPress también incluyen herramientas de minificación de scripts. Sin embargo, algunos de ellos requieren mucho trabajo de configuración, por lo que recomendamos seguir con opciones como Autoptimize cuando se trata de minificación.

4. Utilice una red de distribución de contenido (CDN)

Usar una CDN es una excelente manera de mejorar el rendimiento de su sitio web. Con una CDN, obtiene acceso a una red de centros de datos en todo el mundo que pueden almacenar en caché el contenido de su sitio. Cuando un visitante intenta acceder a su sitio web, la CDN procesará esa solicitud y entregará una versión en caché de la misma.

En la mayoría de los casos, el uso de una CDN mejorará los tiempos de carga de su sitio web y las puntuaciones FID. Integrar WordPress con una CDN es simple y el mayor desafío probablemente radica en decidir qué servicio usar.

Si está buscando opciones de CDN gratuitas, le recomendamos que opte por una de las siguientes:

  1. Cloudflare: Este es uno de los CDN más populares del mercado. Es fácil de integrar con WordPress y ofrece un plan gratuito.
  2. Jetpack: El complemento Jetpack ofrece una función llamada Acelerador de sitios, que utiliza los servidores de WordPress.com para almacenar en caché elementos estáticos de su sitio web. Aunque Jetpack requiere una cuenta de WordPress.com, usted …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *