Croquiweb

¿Qué es Core Web Vitals?

Core Web Vitals es una nueva iniciativa de Google para mejorar la velocidad de carga y la experiencia del usuario (UX) de todos los sitios web. Aunque esta apuesta parece futurista, no es ni mucho menos el primer diseño de Google en este sentido. Además de esto, están PageSpeed Insights, Mobile-Friendly Test, Lighthouse entre otros y las tendencias más generales – el formato AMP, el Chrome UX Report y el web.dev) que Google ha creado en los últimos años.

 

Core Web Vitals pretende establecer criterios sencillos y unificados sobre lo que es una buena experiencia web.

Según el anuncio oficial de Core Web Vitals en 2020, Google era consciente de que, hasta ahora, había estado trabajando con un número excesivo de parámetros. Para alguien con pocos conocimientos técnicos no era fácil de detectar dónde estaban exactamente los problemas de UX y de optimización del front-end de la web (WPO), ni cómo resolverlos así de un vistazo.

Aquí es donde nació Core Web Vitals, que literalmente significa Señales Web Esenciales – interpretadas como un subconjunto de elementos vitales de un sitio web / página web.

¿Cuáles son los tres indicadores de Core Web Vitals?

Core Web Vitals se basa en tres medidas. Cada uno de ellas toca un aspecto esencial para que una página sea rápida y ofrezca una buena experiencia al usuario.

LCP (Largest Contentful Paint)

La métrica LCP mide el tiempo de carga del contenido, marcando el momento exacto en el que la pieza más grande de contenido -imagen, vídeo, bloque de texto- por encima del pliegue (lo que se ve sin desplazarse hacia abajo) está completamente cargada. Una buena LCP no dura más de 2,5 segundos. Teniendo en cuenta las causas de un mal indicador LCP, aquí están nuestras recomendaciones técnicas sobre cómo optimizar el LCP de un sitio web.

¿Cómo mejorar el LCP?

Problema: respuesta lenta del servidor. Cuanto más tarda el servidor en leer los elementos de la pantalla, más aumentan los segundos en la métrica LCP.

Solución: cambiar a un servidor más rápido. Algunos propietarios utilizan los comandos Time To First Byte para gestionar las respuestas del servidor de la manera que quieras, por ejemplo, haciendo que el servidor cargue primero las páginas HTML en caché.

Problema: Bloqueo a nivel de CSS y JavaScript. Los algoritmos suelen analizar el sitio web utilizando el árbol DOM. Si en las ramas u hojas del marcado HTML encuentran bloqueos, como las etiquetas <script></script> o las hojas de estilo externas, puede tardar en cargar.
Solución: cancela o desactiva estas etiquetas para asegurar una carga más rápida – una acción que no afectará al rendimiento del sitio web de ninguna manera.

Problema: Los recursos (imagen, vídeo, etc.) son grandes y se cargan lentamente.
Solución: comprimir las imágenes y cargarlas en modo lazy-loading. Habilita también el almacenamiento en caché para los usuarios que regresan.

Problema: renderización del lado del usuario. Algunos sitios web se desarrollan con una lógica de JavaScript basada en el renderizado del lado del usuario, lo que significa que el usuario no podrá hacer nada en el sitio hasta que el contenido esté completamente cargado.
Solución: Eliminar el JavaScript crítico y las técnicas de pre-renderización.

FID (First Input Delay)

Basado en el marco RAIL (Response Animation Idle Load), la métrica First Input Delay mide la capacidad de respuesta de la página web. Explícitamente, es el tiempo que transcurre entre el momento en que el usuario realiza una acción, como hacer clic, y el momento en que el navegador responde a esa interacción. Probablemente hayas tenido la experiencia de hacer clic y ver cómo se carga la página hasta que te muestre el resultado de esa acción.

¿Cómo mejorar el FID?

Un buen DIF debería responder al menos en 0,1 segundos, es decir, en 100 milisegundos. Para ello, evita a toda costa utilizar Web Worker, un script JS independiente de otros scripts, que se ejecuta en el fondo de una página HTML.

CLS (Cumulative Layout Shift)

El Desplazamiento Acumulativo de la Disposición mide la estabilidad visual. A menudo, los elementos de una página se mueven de un lado a otro mientras el contenido se carga y se muestra en la pantalla, una experiencia bastante cansada y que suele llevar a hacer muchos clics en el lugar equivocado, arruinando claramente la experiencia de navegación. Los elementos del tiempo de carga de la página, como el contenido-pintura y el tiempo de inactividad, ya se han medido ampliamente con herramientas como PageSpeed Insights, pero no el desplazamiento acumulativo del diseño. De hecho, esta métrica CLS cuantifica la frecuencia y la magnitud con la que se producen estos cambios en una página.

¿Cómo mejorar el CLS?

Con una puntuación de 0 a 1 (0 significa que no hay desplazamiento y 1 significa el mayor desplazamiento), los diseñadores web podrán medir el CLS para mejorar la UX y el SEO. En resumen, un CLS bajo puede considerarse una página «agradable».

¿Dónde y cómo comprobar los Core Web Vitals?

Existen cinco herramientas principales para medir y mejorar los Core Web Vitals de una página web:

Croquiweb

Google Search Console

La declaración oficial de Core Web Vitals ha llevado a la actualización de Search Console. De hecho, Google ha introducido algunos cambios, principalmente en el informe sobre la velocidad, que ahora se desglosa en las tres métricas anteriores: LCP, FID y CLS. Google Search Console informa del rendimiento de las URLs agregadas por estado, por tipo de métrica y por grupo de páginas web similares). Si una URL no tiene datos mínimos para cualquiera de estas métricas, se excluye del informe. Una vez que una URL tiene un umbral de datos para cualquier métrica, el estado de la página es el de su métrica más baja.

Chrome User Experience Report

Las métricas del Chrome UX Report (CrUX) se basan en datos reales de los usuarios. A su vez, los resultados representan la experiencia de los usuarios reales. En comparación con las pruebas virtuales/locales en entornos definidos y simulados, el resultado captura todas las variables externas que forman y conducen a una UX final.

 

Por ejemplo, si más visitantes llegan a la web con dispositivos modernos o a través de una red potente, los resultados pueden aparecer como «más rápido», aunque el sitio web no esté optimizado.

 

En comparación, una plataforma bien optimizada que atrae a una base de usuarios más pequeña o a una comunidad de usuarios más grande en dispositivos o redes más lentos puede aparecer como «lenta».

 

Ten en cuenta que CrUX está disponible como proyecto público de Google BigQuery. Para acceder a ella, además de una cuenta de Google, necesitarás un proyecto de Google Cloud.

Page Speed Insights

Las métricas claves de la web en PageSpeed Insights son las mismas que se muestran en Search Console, excepto que sólo te permite comprobar una página a la vez. PageSpeed Insights analiza el contenido de una página web y ofrece sugerencias para mejorar la velocidad. Se ha actualizado para utilizar Lighthouse 6.0, lo que permite medir Core Web Vitals en el laboratorio.

Lighthouse

Es una plataforma de código abierto diseñada para mejorar el rendimiento de los sitios web públicos o privados. Ofrece auditorías de rendimiento, pruebas de usabilidad, auditorías de aplicaciones web progresivas y herramientas de SEO.

 

Puedes ejecutar Lighthouse desde la línea de comandos en Chrome DevTools o como un módulo de nodo. Le das a Lighthouse una URL de auditoría. Se ejecuta una serie de auditorías en la página, y luego se genera un informe sobre los resultados de la página. Utiliza las auditorías fallidas como indicadores para mejorar la página. Cada auditoría va acompañada de un documento de referencia en el que se explica por qué y cómo solucionarla.

Desventaja: Lighthouse no muestra la métrica FID.

La razón: la métrica FID no es una medida replicada en una simulación de carga o en laboratorio. Requiere un usuario real, pero el valor del Total Blocking Time está altamente correlacionado con el FID, y es medible por Lighthouse.

 

Peso de las métricas de Core Web Signals en la plataforma Lighthouse

El lanzamiento de Core Web Vitals coincidió con la llegada de Lighthouse 6.0. Como resultado, cada una de las métricas utilizadas tiene un nuevo peso en la puntuación final.

 

Esta versión distribuye la importancia de las métricas de la siguiente manera:

  • First Contentful Paint: 15%
  • Speed Inside (indice de velocidad): 15%
  • Largest Contentful Paint: 25%
  • Time to Interactive: 15%
  • Total Blocking Time (tiempo total de bloqueo): 25%
  • Cumulative Layout Shift : 5%

Comprueba por ti mismo que el tiempo que tienes que esperar mientras se cargan los recursos necesarios (TBT) y el First Contenful Paint ya mencionado tienen el mayor peso. Ten en cuenta que lo más probable es que estos pesos cambien en futuras versiones de Lighthouse.

Chrome DevTools

Chrome DevTools es un conjunto de herramientas de desarrollo web integradas directamente en el navegador web Google Chrome. Este programa te ayuda a realizar cambios rápidos en las páginas sobre la marcha cuando construye sitios web. Chrome DevTools también se ha actualizado para ayudar a los propietarios de webs a solucionar los problemas de inestabilidad visual en una página que pueden causar un desplazamiento de diseño acumulativo (métrica CLS).

 

Procedimiento: Selecciona un cambio de diseño para verlo en la pestaña Resumen. Para ver dónde se ha producido el cambio, pasea el ratón por encima del campo Mover a.

 

Chrome DevTools también comprueba el tiempo total de bloqueo (TBT), que es útil para optimizar el valor de Retraso de la Primera Entrada.

¿Qué impacto tiene Core Web Vitals para el SEO?

Los valores obtenidos de Core Web Vitals pasarán a contar en la clasificación de Google este mes, mayo de 2021. Estas señales web fundamentales se combinarán con otros elementos que ya se tienen en cuenta, como la indexación mobile-first, el uso del protocolo HTTPS o la ausencia de molestos intersticiales que impidan ver el contenido de la página a primera vista.

 

Esta combinación de señales representará la experiencia que ofrece una página web y afectará a su indexación, aunque lógicamente no sabemos todavía hasta qué punto. Los propios datos de Google sugieren que los tiempos de carga de las páginas más largos tienen efectos negativos en la tasa de rebote y en la retención de los visitantes.

 

Ejemplos:

  • Cuando el tiempo de carga de la página aumenta de 1 a 3 segundos, el porcentaje de rebote se incrementa en un 32%.
  • Si el tiempo de carga de la página aumenta de 1 a 6 segundos, la tasa de rebote se incrementa en un 106%.

Al introducir el concepto de Core Web Vitals, Google reafirma una vez más que sus motivos son animar a las empresas online a centrarse en la experiencia de usuario para optimizar el SEO. Aunque se espera que se conviertan en un factor crucial para el posicionamiento a partir de mayo, ya hemos visto indicios de la relevancia que Google quiere darles. Por ejemplo, su incorporación en Google Search Console en la sección principal de métricas web.

 

La experiencia de anteriores actualizaciones del algoritmo indica que estos cambios tienen un impacto, pero no tanto como se esperaba. Lo que está claro es que Google se centra cada vez más en la UX y la WPO, pero seguramente no serán los únicos factores relevantes para el SEO.

 

En este caso, te recomendamos que realices una auditoría completa del sitio para comprobar qué páginas deben mejorarse en relación con estos indicadores básicos, y así tener un factor de diferenciación a favor de la competencia.

En Croquiweb creamos webs tomando totalmente en cuenta la experiencia de usuario y los Core Web Vitals. 

0/5 (0 Reviews)

Deja un comentario

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

Carrito de compra
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad