Core Web Vitals : Qué son y cómo mejorarlos de 5 formas sencillas

Los Core Web Vitals son marcadores de interacción de página que cuantifican la experiencia de usuario de un sitio web. En pocas palabras, estas indicaciones señalan la rapidez con la que los consumidores podrán interactuar con su sitio web y el tipo de resultado que obtendrán. Estas métricas también indican lo sencillo que es para los usuarios navegar por el sitio web.

Sus puntuaciones de experiencia de página mejorarán si mejora su experiencia del usuario y mejorar su sitio web en general.

¿Cuáles son las tres métricas principales de Core Web Vitals?

Hay tres parámetros en el conjunto Core Web Vitals:

1. Pintura de mayor contenido (LCP)

El tiempo de renderización de los trozos más grandes mostrados a una población es una medida de Core Web Vitals que los administradores de sitios pueden utilizar para evaluar la experiencia del usuario y determinar si una página le resultará beneficiosa.

Para ofrecer una experiencia de usuario agradable, los propietarios de sitios web necesitan que sus páginas se carguen rápidamente. El tiempo de carga de una página no sólo es importante para ofrecer una buena experiencia al usuario, sino que, además, una página que responda con rapidez tiene más posibilidades de ocupar una posición más alta en Google. Además, en comparación con una página con tiempos de carga deficientes, se ha demostrado que los tiempos de carga rápidos afectan a la notoriedad y el compromiso.

¿Cómo mejorar LCP en Core Web Vitals?

• Empiece a eliminar cualquier script innecesario de terceros: Según nuestro reciente estudio sobre pagespeed, cada script de terceros ralentiza una página 34 milisegundos.
• Actualice su servicio de alojamiento web: En general, un mejor alojamiento equivale a tiempos de carga más rápidos (incluido LCP).
• Establecer carga lenta: La carga lenta impide que las imágenes se carguen hasta que el usuario se desplace por la página. Como resultado, podrá alcanzar LCP mucho más rápido.
• Considere la posibilidad de eliminar los elementos grandes de la página: Google PageSpeed Insights puede indicarte si un elemento de tu página está ralentizando el LCP.

2. Desplazamiento de disposición acumulativo (CLS)

Para aumentar la participación y las ventas, los operadores de sitios deben facilitar al máximo la interacción de los visitantes con los hipervínculos e iconos de sus páginas. Cumulative Layout Shift es una estadística que reconoce los enlaces o botones que se desplazan después de que se haya cargado una página web, e indica lo difícil que será para los usuarios interactuar con los elementos de su sitio una vez que se haya renderizado la página.

Una experiencia de usuario sólida requiere una UX y un diseño buenos, y un cliente se agitará si el sitio web de una empresa cambia de elementos mientras lee. CLS ayuda a los programadores a determinar si las imágenes o los hipervínculos de un sitio web cambian de posición, lo que permite a los titulares de derechos de autor mejorar la accesibilidad, aumentar el porcentaje de clics e incrementar las ventas online.

CLS compara los puntos de inicio de los componentes en la ventana visible a través de dos marcos visualizados. Este indicador, en términos sencillos, ayuda a los propietarios de sitios web a determinar si material como texto, iconos y anuncios se desplazan mientras una persona lee el contenido de una página determinada.

¿Cómo mejorar la FID en Core Web Vitals?

• JavaScript debe ser mínimo: A los visitantes les resulta casi imposible interactuar con una página mientras el navegador está cargando JS. Por eso, para FID, es fundamental minimizar o posponer la carga de JS en su sitio web.
• Elimine cualquier script de terceros que no sea absolutamente necesario: Los scripts de terceros (como Google Analytics, mapas de calor, etc.) pueden tener un impacto negativo en FID, al igual que en FCP.
• Utiliza el alijo de tu navegador: Esto acelera la carga de contenido en su página. Esto hace posible que el navegador de su usuario complete las tareas de carga JS aún más rápido.

3. Retardo de la primera entrada (FID)

Los consumidores desean páginas que se carguen rápidamente y con las que sea fácil interactuar en Internet. First Input Delay es una métrica que analiza las latencias de interacción (la cantidad de tiempo que necesita un componente de un sitio web para reaccionar a la entrada de un usuario) con el fin de descubrir páginas que puedan frustrar a su audiencia.

Para ofrecer material a sus espectadores, los sitios web modernos emplean diversas soluciones emergentes y widgets de asignación dinámica. Aunque esta forma de material puede aumentar la entrega de contenidos, también puede provocar retrasos, obligando a los usuarios a esperar a que su navegador responda a sus peticiones.

Para potenciar el compromiso y la usabilidad en todo el sitio, los desarrolladores deben limitar el tiempo que los clientes pasan esperando a que un sitio web responda a su actividad.

¿Cómo minimizar el FID en Core Web Vitals?

• Para cualquier medio (vídeo, fotos, GIF, infografía, etc.), utilice las siguientes dimensiones de propiedad de tamaño establecido: De este modo, el navegador del usuario sabrá exactamente cuánto espacio ocupará el componente en la página. No se modificará sobre la marcha hasta que la página esté completamente cargada.
• Asegúrese de que todos los elementos del anuncio tengan un espacio dedicado: De lo contrario, pueden aparecer inesperadamente en el sitio web, desplazando la información a la izquierda, a la derecha o a los lados.
• Debajo del pliegue, añada nuevos elementos de interfaz de usuario: De este modo, no empujan hacia abajo contenidos que el usuario "espera" que permanezcan en su sitio.

Formas de mejorar el Core Web Vitals

Debería realizar una breve evaluación de la monitorización del rendimiento en Internet para ver cómo funciona su sitio web en términos de indicadores vitales clave. Puede hacerlo con herramientas de Google como Search Console y Page Speed Insights, así como con herramientas independientes como GTmetrix.

Además, la aplicación de pruebas de control de calidad de extremo a extremo ayuda a validar que las optimizaciones de rendimiento son efectivas en diferentes dispositivos y navegadores, garantizando que las mejoras de Core Web Vitals se traducen en una mejora real de la experiencia del usuario.

Merece la pena comparar datos y actualizar su página de forma más económica si realiza informes de rendimiento con varias herramientas.

1. Aumente la productividad con la que su servidor responde

"Cuanto más tarde un navegador en obtener información del controlador de dominio, más tardará en generar todo lo que aparece en pantalla", añade Google. Cada una de las métricas de la página, incluido el LCP, mejora directamente con un tiempo de respuesta del servidor más rápido".

Y lo que es más importante, un tiempo de respuesta prolongado del servidor puede perjudicar no sólo a su SEO, sino también a su experiencia de usuario.

Además de mejorar la respuesta del servidor, es fundamental tener en cuenta las prácticas básicas de SEO. Garantizar una estructura adecuada del sitio, tiempos de carga rápidos y contenido optimizado mejorará tanto la experiencia del usuario como la clasificación en las búsquedas. Además de estas medidas imprescindibles, el uso de las herramientas SEO adecuadas puede facilitar mucho el proceso: herramientas como Ahrefs, Manngools y Semush son opciones excelentes. Para quienes busquen alternativas, existen varias Herramientas SEO similares a Semrush que pueden ayudar a realizar un seguimiento del rendimiento y mejorar las clasificaciones de forma eficaz.

Utilice el tiempo hasta el primer byte (TTFB) para determinar el tiempo de respuesta del servidor. Esta métrica determina cuándo el navegador web del usuario obtiene el primer byte de la salida de su publicación.

No obstante, recopile estadísticas sobre el rendimiento actual de su servidor antes de empezar a comprender su rendimiento. He aquí algunos puntos a tener en cuenta cuando haya completado el informe:

• Examine la velocidad del alojamiento de su sitio.
• Utilice un red de distribución de contenidos (CDN) para su sitio web.
• Examine sus plug-ins. ¿Por qué? Porque cada extensión añade más peso a tu página, lo que podría ralentizar la velocidad de tu sitio web. Queda sólo lo esencial.

El tiempo de respuesta de un servidor debe ser inferior a 600 milisegundos, según Google.

De obligada lectura: Cómo el diseño web puede aumentar sus ventas

2. Optimización y compresión de imágenes

¿No le parece evidente? Las imágenes, por otra parte, son los elementos más importantes de muchos sitios web. Por ello, es fundamental optimizarlas, ya que pueden aligerar considerablemente la página, aumentar el tiempo de carga, la puntuación LCP, la UX y el posicionamiento en los motores de búsqueda.

Al reducir las fotos con micro jpg y aumentar el rendimiento de su LCP, puede minimizar el tamaño de toda la página. Quizá pueda creer que la compresión de imágenes reduce la calidad de las mismas o disminuye su resolución. Aparentemente, la diferencia sólo es visible cuando se espía o si la instantánea se guarda en el formato incorrecto. Intente guardar preferentemente las fotografías de paisajes en formato jpg y los gráficos en formato png. También se pueden utilizar formatos de última generación como JPEG 2000, JPEG XR y WebP, aunque recomendamos investigar un poco antes.

Además de comprimir, también es fundamental activar la red de distribución de contenidos (CDN) para las fotografías. Una red de distribución de contenidos (CDN) es una red global de servidores que almacena en caché tu material. Como los servidores están repartidos por todo el mundo, las fotos se pueden procesar más rápidamente desde el host más cercano a los usuarios.

3. Implantar la carga diferida

Si utilizas fotos en tu sitio web, es imprescindible que utilices lazy loading para proteger la UX y la puntuación core web vitals de tu sitio. El apilamiento perezoso permite mostrar las imágenes en el momento preciso en que los visitantes se desplazan por la página, lo que preserva la velocidad de carga del sitio web y garantiza una puntuación LCP de primera categoría.

Otras ventajas de la carga lenta son:

• La funcionalidad de su sitio web mejorará.
• Esto establecerá un límite en la cantidad de ancho de banda que se puede utilizar.
• Esto puede ayudar a la optimización de su sitio para los motores de búsqueda.
• Esto hará que los clientes permanezcan más tiempo en el sitio web y reducirá la tasa de rebote.

¿Va a beneficiarse su sitio web de la carga lenta? Según HubSpotLa carga retardada es necesaria para páginas con muchos gráficos, animaciones o vídeos (denominados elementos pesados). Sin embargo, no existen criterios rígidos y rápidos sobre qué páginas deben utilizar la carga diferida. Si la puntuación LCP de su sitio es baja, puede plantearse implantar la carga lenta e informar sobre el rendimiento antes y después.

4. Reducir la ejecución de JavaScript (JS)

Si su contenido FID es bajo, sugiere que su página interactúa con los usuarios durante más de 300 milisegundos. Puedes plantearte optimizar y minimizar la ejecución de JS. Esto reduce el tiempo necesario para que el navegador ejecute el código JS y muestre la página.

También es vital consumir la menor cantidad de memoria posible. ¿Por qué? Cuando el código de su sitio hace una petición al navegador, crea un nuevo bloque de memoria, lo que desactiva JavaScript y puede hacer que la página se cargue lentamente.

Retrasar el JS superfluo, según Google, es un método para reducir el tiempo de procesamiento.

Siga los pasos que se indican a continuación para comprobar si su sitio web tiene JavaScript sin utilizar:

• Para empezar, vaya a su sitio web, haga clic con el botón derecho y seleccione "Inspeccionar".
• A continuación, vaya a 'Fuentes' y busque en la parte inferior los tres puntos. Debería incluir una herramienta llamada 'Cobertura'. Una vez que la hayas insertado, dale al botón de cargar.
• Cuando se complete la carga, podrás comprobar cuánto JavaScript no se utiliza en tu página.

Cuando hayas calculado cuánto JS te sobra, deberías empezar a reducirlo. Puedes hacerlo de varias maneras, una de las cuales es la división del código. Esto significa separar un paquete JavaScript (archivos combinados en un solo paquete) para evitar tener que hacer demasiadas peticiones HTTP para cargar una página.

5. Asegúrate de que tus imágenes e incrustaciones tienen el tamaño adecuado

Una puntuación CLS superior a 0,1 se considera deficiente, y suele deberse a elementos del archivo CSS que carecen de dimensiones, como fotos, anuncios o incrustaciones. Las dimensiones sí importan si quiere aumentar su puntuación CLS. Poder establecer la anchura y la altura permite al navegador dejar el espacio adecuado en el sitio mientras se carga el contenido.

Por ejemplo, si las proporciones de una imagen son incorrectas, lo normal es que aparezca más tarde en una página. Cuando un usuario está consumiendo el material, éste puede caer repentinamente debido a que una imagen que no estaba correctamente dimensionada se carga con demasiada lentitud. En este caso, el navegador no ha sido capaz de determinar el espacio necesario para esa imagen concreta.

Para evitar este desplazamiento de la imagen, puede apartar con antelación un lugar donde se mostrará el visual. Si se carga fuera de la pantalla, esta operación evitará la migración del arreglo.

Asegúrate de que has establecido las dimensiones correctas para las incrustaciones, como cuando incrustas vídeos de YouTube en tu sitio. El vídeo puede parecer normal en la parte trasera, pero puede aparecer excesivamente grande o totalmente estropeado en la parte delantera. Si esa es la circunstancia, hay un problema con las especificaciones, y deberías modificarlas con herramientas como FlexClip.

A continuación encontrarás una guía paso a paso para descubrir cómo incrustar un vídeo de Youtube. Aprenda a ajustar las dimensiones para que el vídeo que ha elegido tenga un aspecto fantástico en su sitio web.

• Abra el vídeo de YouTube que desea insertar en su sitio. 
• A continuación, localice el botón Empezar a compartir y seleccione la opción Incrustar.
• Después, se mostrarán todos los datos, incluidas las medidas. Ahora debe pegar el código en el backend de su sitio web y ajustar la anchura y la altura a sus necesidades.

Conclusión

Aunque los Core Web Vitals no se implantarán hasta dentro de tres meses, es fundamental que empiece a trabajar en ellos ahora. Dado que los datos vitales son accesibles, utilice las herramientas mencionadas para evaluar los datos de su sitio antes y después de corregir los errores.

Recuerde que el back-end de su sitio web interactúa con el front-end, así que asegúrese de que el back-end está optimizado para ofrecer la mejor experiencia de usuario en términos de velocidad de procesamiento, estabilidad estética y compromiso. Esto ayudaría si recordaras las señales de búsqueda existentes de Google, como la facilidad de uso para móviles, la navegación segura, HTTPS y los estándares intersticiales invasivos.