Core Web Vitals parte II: 4 Formas de mejorar el FID

Descubre cómo mejorar el First Input Delay de una página entendiendo la interactividad y capacidad de respuesta de una Web 
Core Web Vitals parte II: 4 Formas de mejorar el FID
Core Web Vitals parte II_ 4 Formas de mejorar el FID
Core Web Vitals parte II: 4 Formas de mejorar el FID

Continuamos con el Curso Core Web Vitals para periodismo digital impartido por Openhost para mostrar a periódicos digitales y webs corporativas las claves para entender los tres elementos de medición web que ha implantado Google para la mejora de los resultados orgánicos en su buscador.

 

En el anterior artículo de este Curso Core Web Vitals para periodismo digital hablamos del LCP o Largest Contentful Paint, y en esta ocasión vamos a centrarnos en la segunda de las tres métricas, el FID o First Input Delay.

Core Web Vitals parte I: Elementos que influyen en el LCP​

 

¿Qué es el FID o First Input Delay?

El First Input Delay es otra de las métricas impuestas por Google para medir la rapidez de una página al responder ante cualquier interacción del usuario.

  • El FID mide la interactividad del usuario y la capacidad de respuesta de la web.
  • Se caracteriza por ser una métrica 'directa', es decir, no se puede simular, ya que se requiere una interacción real del usuario para medir el retardo de la respuesta de la página.

La principal causa de un FID deficiente es la ejecución intensa de JavaScript. Optimizar la forma en que JavaScript analiza, compila y ejecuta en su página web reducirá directamente la FID.

Core Web Vitals en periódicos digitales: ¿Cómo afectan al SEO de un medio?​

 

Cómo optimizar el FID o First Input Delay

1. Ejecución de scripts --> Optimiza el código, fragmenta según carga

Es importante que el código JavaScript de nuestra web ejecute lo mínimo necesario para funcionar. Hay que intentar no derrochar tiempo de ejecución de los Scripts para evitar que la página tenga demasiados elementos que cargar en la primera visualización. 

Si en vez de optimizar la programación del código JavaScript, se pretende cargar todo el código de manera sincronizada (puesto sin más en la página o de forma externa sin los atributos async o defer), se podría mejorar esta métrica de manera relativamente sencilla, ya que la página no se pintará hasta que sea interactiva.

De esa forma, el FID o First Input Delay sería prácticamente cero, algo que no serviría, ya que se empeoraría a su vez la métrica LCP.

La manera óptima de hacerlo es programar el JavaScript de manera asíncrona e intentar que se ejecute en menos de 50 ms. Así, ninguna de las dos métricas se verán afectadas.

2. Cargar datos

Supongamos que en una página de nuestro medio digital tenemos una tabla con numerosos datos extraídos de otra URL diferente. 

Al cargar el contenido, es fundamental que dicha carga sea lo más rápida posible, ya que de lo contrario, en el Page Speed Insights de Google se verá reflejado este parámetro como negativo en tu página.

Cómo mejorar el engagement de AMP en tu medio digital

 

3. Scripts de terceros --> Prioriza la carga

Estos scripts están en otras URLs o en otras Webs. Cuando se usan scripts de terceros en nuestra web, siempre van a tardar más tiempo en cargar, ya que tiene que hacer una serie de 'llamadas' al servidor externo y todo esto se suma a los aspectos que intervienen en nuestra página

Muchos sitios incluyen etiquetas y análisis de terceros que pueden mantener la red ocupada y hacer que el hilo principal deje de responder periódicamente, lo que afecta la latencia de la interacción. 

Es necesario explorar la carga bajo demanda de código de terceros (por ejemplo, tal vez no haga falta cargar esos anuncios en la mitad inferior de la página hasta que se acerquen más a la ventana gráfica).

4. Reducir el tiempo de ejecución

Un consejo para intentar reducir los tiempos de carga de una página, es utilizar Scripts como 'async' o 'defer', que indican al buscador que intente cargar los elementos más pesados de una página de últimos.

Limitar la cantidad de JavaScript en una página reduce la cantidad de tiempo que el navegador necesita para ejecutar el código JavaScript. Esto acelera la rapidez con que el navegador puede comenzar a responder a las interacciones del usuario.

Para reducir la cantidad de JavaScript ejecutado en una página se pueden utilizar los anteriormente mencionados Scripts 'async' y defer':

  • Aplazar JavaScript no utilizado
  • Minimizar los 'polyfills' no utilizados
Guía completa para periodismo digital sobre cómo configurar Google Analytics 4 en tu CMS

 

¿Es recomendable utilizar un Web Worker para optimizar el FID?

Un Web Worker se compone de un script que puede trabajar paralelamente en segundo plano sin bloquear la página que el usuario está viendo, haciendo posible la interacción, y a pesar de que existan elementos que aún no responden.

La utilización de un Web Worker minimiza el tiempo de respuesta al máximo, por lo tanto, mejora la métrica de FID de manera considerable.

first-input-delay

 

¿Por qué el FID mide la primera entrada del usuario a la web?

A pesar de que un retraso de cualquier entrada de un usuario a la web puede provocar una mala experiencia de navegación, el FID principalmente se mide el retraso de la primera entrada por estas razones:

  • La primera demora en la entrada será la primera impresión del usuario de la capacidad de respuesta de su sitio, y las primeras impresiones son críticas para dar forma a nuestra impresión general de la calidad y fiabilidad de un sitio web.
  • Los mayores problemas de interactividad que se aprecian en una web ocurren durante la carga de la página. Por ello, centrarse inicialmente en mejorar la primera interacción del usuario del sitio tendrá mayor impacto en la mejora de la interactividad general de la web.

 

Core Web Vitals Plugin: La mejor extensión CWV para Google Chrome

extension CWV Google

Este plugin Core Web Vitals desarrollado por Google mide las métricas Web principales, proporcionando información instantánea sobre la carga, la interactividad y las métricas de cambio de diseño.

Es coherente con la forma en que Chrome mide estas métricas y se informa a otras herramientas de Google (por ejemplo Chrome User Experience Report, Page Speed Insights, Search Console).

Esta extensión mide las 3 métricas principales del Core Web Vitals con tan solo acceder a una Web:

  • Largest Contentful Paint
  • Cumulative Layout Shift
  • First Input Delay

Descarga aquí el Plugin Core Web Vitals

Cómo tener éxito en Google con una nota de prensa optimizada para SEO

 

Si quieres estar al día de todo lo que sucede en el blog de Opennemas, únete a nuestro canal de Whatsapp y recibe en tu móvil contenido en exclusiva y mucho más. Es gratis!CMS Opennemas periodismo

Si todavía no sabes todo lo que te ofrece el mejor CMS del mercado para periódicos digitales ¡Contacta con nosotros y sabremos darte una solución individualizada tanto si eres un nuevo emprendedor en el ámbito de los medios o buscas dar un giro a tu diario!

Y recuerda, puedes crearlo de forma totalmente gratuita haciendo click aquí.

¡CREA YA TU PERIÓDICO CON OPENNEMAS, ES GRATUITO!

banner opennemas

Comentarios
Core Web Vitals parte II: 4 Formas de mejorar el FID