¿Cuál es el retraso en la primera entrada (FID)?Cómo reducirlo en WordPress

Hay un nombre para ese momento extraño cuando intenta interactuar por primera vez con una página y lleva algún tiempo responder. Esto se llama First Input Delay (FID) y es un valor que le da una idea de cuán buena es la experiencia del usuario (UX). Un FID bajo le dice que un sitio web está optimizado correctamente. Significa que los navegadores de sus visitantes no están bloqueados al cargar elementos y scripts, incluso después de que parece que una página ha terminado. Si puede obtener el puntaje FID lo más bajo posible, las visitas de los usuarios serán mucho más agradables.
En este artículo, hablaremos sobre lo que se retrasa la primera introducción y por qué es una medida tan importante. Luego analizaremos cuatro formas de reducir los puntajes FID en WordPress. ¡Vamos a eso! Contenido:
¿Cuál es el retraso en la primera entrada?
Cómo medir el retraso en la primera introducción a su sitio web
Formas de reducir los puntajes de retraso en la primera introducción a WordPress
Aquí hay algunas formas probadas de mejorar la demora en la primera introducción a un sitio web #Wordpress
Haga clic para enviar en Tweet
¿Cuál es el retraso en la primera introducción (y por qué es un valor importante) cada vez que accede a un sitio web, muchos suceden en segundo plano? Antes de que pueda ver una página, el navegador debe interrogar su servidor, enviar y procesar aplicaciones, 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 parece preparada, pero su navegador aún procesa solicitudes y carga scripts en segundo plano. Cuando intenta interactuar con esa página, puede encontrar que hay un ligero retraso entre realizar una acción y recibir 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. Esto puede suceder prácticamente con cualquier elemento interactivo en su sitio y su objetivo es reducir la mayor cantidad posible de la primera introducción. Idealmente, retrasar la primera introducción de su sitio debe ser inferior a 100 milisegundos. Este es el estándar que Google considera aceptable para sitios web:
Fuente: Web.dev

Mencionamos a Google, especialmente porque FID es uno de los tres valores que utiliza para evaluar las experiencias positivas o negativas de los usuarios en un sitio web. Estos tres valores se denominan vitales web de Core y también incluyen los siguientes dos valores:
La pintura de contenido más grande (LCP): esta medición mide cuánto tiempo se carga el elemento más grande.
Cumulativo desplazamiento de diseño (CLS): mide cuánto “cambia” visualmente a medida que se carga. Si los elementos se mueven demasiado a medida que se cargan, tendrá una puntuación CLS débil. Tenemos una guía para remediar el cambio de diseño acumulativo para WordPress.
Hay dos razones clave por las cuales importa Core Web Vitals. La primera es que ofrece una medida de cuán optimizado es su sitio. Si su sitio tiene excelentes puntajes, significa que es rápido, es visualmente estable y los usuarios no tienen que esperar demasiado para interactuar con él. La segunda razón Esa Web Vitals importa es que influyen en la optimización de su sitio (SEO). Google usa estos valores como una señal pequeña al configurar las clasificaciones. De hecho, el gigante de los motores de búsqueda fue claro que la web central vital es importante cuando se trata de SEO, aunque no en la misma medida que el contenido y los vínculos de retroceso.
Cómo medir el retraso en la primera introducción a su sitio web. El retraso en la primera introducción puede ser difícil de medir, porque debe recopilar datos basados ​​en visitantes reales de su sitio, en lugar de otros valores de rendimiento donde puede ejecutar Pruebas simuladas usando una computadora.
La forma más fácil de medir la primera introducción a su sitio es utilizar PageSpeed ​​Insights. Sin embargo, PageSpeed ​​Insights mostrará el tiempo de introducción tardío solo si su sitio tiene suficiente tráfico para ser incluido en la experiencia del usuario de Chrome. Hablemos sobre cómo funciona PageSpeed ​​Insights, entonces compartiremos algunas alternativas que puede probar si PageSpeed ​​Tsights no proporciona valores para la primera introducción para su sitio:
Para usar PageSpeed ​​Insights, continúe e ingrese la URL de la página que desea probar. PageSpeed ​​Insights se tomará unos momentos en analizarlo, luego devolver un informe que se ve así: en general, el sitio no tiene los mejores puntajes web vitales centrales. Sin embargo, puede ver que está funcionando muy bien cuando se trata del primer retraso de entrada, con un tiempo promedio inferior a 100 ms. Sin embargo, como se mencionó anteriormente, no todos los sitios verán este valor. Si tiene un sitio de bajo tráfico, puede ver algo como esto:
En esta situación, tienes dos opciones:

Simple: puede usar el valor de bloqueo total de la sección de datos de laboratorio como un proxy bruto para el primer tiempo de introducción. No es una representación perfecta, pero el valor total del tiempo de bloqueo es muy similar al del primer retraso de entrada. En general, si mejora su tiempo de bloqueo total, también verá mejoras similares al primer retraso de entrada.

Avanzado: puede usar una herramienta de monitoreo de rendimiento del usuario real, como la solicitud de métricas. Con estas herramientas, deberá agregar un script de seguimiento a su sitio para recopilar usuarios reales.

A continuación, puede ver dónde puede encontrar el tiempo total de bloqueo en PageSpeed ​​Insights:
Ahora que sabe cómo medir FID y otros valores vitales básicos de la web, hablemos sobre cómo mejorarlos.
Métodos Para reducir los puntajes de retraso en la primera introducción a WordPress para esta sección, nos centraremos en las optimizaciones de WordPress que mejorarán sus puntajes con el retraso de la primera introducción. Algunas de estas optimizaciones tendrán un impacto positivo en otros vitales de la web central, lo que los hace aún más útiles. Elimine los scripts innecesarios en su sitio web. Una de las principales razones por las cuales su sitio web de WordPress podría tardar demasiado en cobrar es que tiene que ejecutar una gran lista de scripts. A través de las Escrituras, nos referimos a JavaScript y CSS, entre otras opciones posibles. Si usa un tema de WordPress “complejo” o una amplia gama de complementos, es posible que tenga demasiados scripts ejecutándose en segundo plano.
Determine qué scripts son útiles y cuáles no pueden ser un desafío, pero PageSpeed ​​Insights interviene aquí. Si realiza una prueba para cualquiera de las páginas de su sitio, el informe PageSpeed ​​Insights también incluirá una sección de oportunidades:

La sección indicará qué archivos JavaScript y CSS no usan su sitio, eliminando estos scripts si reducirá correctamente los puntajes FID. En muchos casos, esos scripts provienen de arados. Esto significa que debe echar un vistazo a la lista de complementos y darse cuenta de las herramientas que realmente no necesita. Eliminar complementos es una excelente manera de mantener la carga de su sitio lo antes posible.
2. Postpar el código necrítico durante la carga Es común cumplir con ciertos scripts o códigos 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 traten con esas Escrituras. Si esos scripts no son “críticos”, simplemente puede decirle al navegador que los deje hasta el final para que no disminuyan la velocidad para todos los demás. Esto es lo que llamamos el “aplazamiento del código no crítico”. Su primera parada cuando se da cuenta de los scripts que puede posponer debe ser una información de suministro de páginas. Una vez que genere un informe para una página, PageSpeed ​​Insights incluirá recomendaciones sobre cómo mejorar sus puntajes. Dentro de estas recomendaciones, encontrará una opción que lee elimina los recursos que bloquean la representación. Si hace clic en él, le mostrará una lista de scripts que puede posponer:

Hay dos formas en que puede manejar los scripts para bloquear la reacción en WordPress. El primer método implica el uso de async. Esto permite que los navegadores continúen cargando su sitio web mientras analiza el script que especifica. Alternativamente, puede posponer el código, de modo que se carga después de que los navegadores jueguen el resto del documento HTML. Para configurar esto en WordPress, puede usar el complemento JavaScript de Async gratuito. O muchos complementos de rendimiento de WordPress incluyen funciones de aplazamiento de código. Si está dispuesto a pagar un complemento premium, WP Rocket tiene características para posponer automáticamente CSS y JavaScript no crítico.
3. Use herramientas de minimización CSS y JavaScript Aunque todos debemos eliminar CSS y JavaScript, hay algunos scripts que no querrá eliminar. Por ejemplo, no querrá eliminar la hoja de estilo CSS de ninguna página a menos que desee un sitio web que parece haberse roto desde el siglo pasado. Para aquellos scripts que no puede eliminar, la mejor opción es minimizar. Esto significa eliminar espacios blancos y caracteres innecesarios en el código para reducir el tamaño de cada script. Existen varias herramientas que reducirán automáticamente los scripts para usted en WordPress, como la autoptimización y la velocidad rápida minifican: en general, la mayoría de los WordPress también incluyen caché también incluye mínimos de secuencias de comandos. Sin embargo, algunos de ellos requieren muchos trabajos de configuración, por lo que le recomendamos que se quede con opciones como autoptimizar cuando se trata de minimentos.

4. Use una red de entrega de contenido (CDN) El uso de un CDN es una excelente manera de aumentar el rendimiento de su sitio con un CDN, tiene acceso a una red de centros de datos en todo el mundo, que puede almacenar en caché el contenido de su Sitio Cuando un visitante intenta acceder a su sitio web, el CDN procesará esa solicitud y servirá una versión de caché. En la mayoría de los casos, el uso de un CDN mejorará los tiempos de carga de su sitio y los puntajes FID. La integración de WordPress con un CDN es simple y el mayor desafío es probablemente decidir qué servicio usar. Si está buscando opciones de CDN gratuitas, le recomendamos que opte por una de las siguientes opciones:
Cloudflare: este es uno de los CDN más populares del mercado. Es fácil integrarse con WordPress y proporciona un plan gratuito. Jetpack: Jetpack Plugin ofrece una función llamada Sitio Acelerator, utilizando servidores de WordPress.com para almacenar elementos estáticos en su sitio. Aunque Jetpack requiere una cuenta de WordPress. Com, también puede usar Es en sitios de WordPress alojados.
Sin embargo, para el mejor rendimiento, es posible que desee considerar un CDN premium, como KeyCDN, Stackpath o Bunny CDN.

Reduzca el retraso en la primera introducción de su sitio hoy
FID es uno de los tres valores web vitales básicos que buscan medir la experiencia del usuario en su sitio web.

Guía completa para mejorar los puntajes para retrasar la primera introducción a un sitio web #Wordpress
Haga clic para enviar en Tweet
La medición de algo tan abstracto puede ser complicada, por lo que cada núcleo vital se centra en una situación específica que puede afectar negativamente las experiencias de los visitantes. Todos los vitales de web centrales son esenciales, pero FID en particular puede conducir a una gran frustración si el retraso es demasiado alto. Si está buscando formas de mejorar su puntaje FID en WordPress, esto es lo que debe hacer:
Elimine los scripts innecesarios de su sitio web.
Posponga CSS y JavaScript no crítico durante la carga.
Utilice herramientas de minimización CSS y JavaScript, como la autoptimización y la velocidad rápida minimifican.
Use un CDN, como CloudFlare o Jetpack.
¿Tiene alguna pregunta sobre cómo reducir sus puntajes FID en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!