30 May Core Web Vitals —> Guía fácil para no perderte ✅ [2021]

Core Web Vitals y Posicionamiento Web: Introducción

Las Core Web Vitals con un nuevo factor de posicionamiento de Google que ha entrado en vigor en mayo de 2021. Su objetivo: ofrecer una mejor experiencia de usuario a aquellas personas que usen el buscador de Google.

Y, aunque a primera vista hablar de métricas en una web parece algo engorroso y que sólo está reservado para quienes ya se mueven en terrenos técnicos, precisamente la intención de Google es simplificar las cosas y ayudar a aquellos usuarios que no saben qué métricas usar para medir la experiencia de usuario de su sitio web.

Las Core Web Vitals están constituidas por 3 métricas y cada una de ellas cubre un aspecto diferente de la experiencia de usuario. Así que, si te dan las Core Web Vitals o crees que no eres capaz de manejarte solo con estas métricas, estás en el sitio indicado porque voy a hacer que cambies de opinión.

Ahora bien, hay algo que me gustaría dejar claro: las Core Web Vitals no deben preocuparte en tanto en cuanto son “factores de posicionamiento” de Google y tienes que aplicarlas para posicionar tu web. Deben interesarte, principalmente, para ofrecer una mejor experiencia de usuario a aquellas personas que interactúen con tu web y naveguen a través de cada una de sus páginas.

Comprendiendo que las Core Web Vitals están hechas para mejorar la vida del usuario, te será más fácil entender por qué son necesarias y sabrás qué cambios aplicar en tu web.

1. Las 3 métricas de las Core Web Vitals: LCP, FID y CLS

1.1 ¿Qué es el LCP o Largest Content Paintful?

Mide el tiempo (en segundos) que los elementos de la parte superior de una  página necesitan para cargarse, son los elementos “above the fold”. Es decir, el texto, foto o vídeos más grandes que ves en la parte superior de una página sin la necesidad de hacer scroll.

Aquel que no pasa de los 2.5 segundos.

Un ejemplo de páginas que deben tener especial cuidado con la métrica LCP son los periódicos. La mayoría de los encabezados tienen una fuente grande y, por ende, que pesa mucho. Esto no significa que haya que reducir la fuente para reducir el LCP: si todos los titulares de un periódico tuviesen el mismo tamaño de fuente, supondría una fatal experiencia de usuario para sus lectores.

Sin embargo, sí es bueno mantener a raya esta métrica, no por Google, sino por los usuarios. Imagina entrar en una página donde el contenido más grande ( y seguramente, el más significativo) tarda cinco segundos en cargar. El usuario, con toda seguridad, se aburriría y abandonaría el sitio.

Ahora bien, teniendo en cuenta que es inevitable, en muchas ocasiones, tener un texto o una imagen más grande en un sitio web, ¿qué se puede hacer para mantener a raya esta métrica?

1.1.1¿Cómo reducir el CLP?

Aunque hay más formas de reducir el CLP, te presento estas tres, desde la más sencilla y que cualquier usuario que no esté versado en estos temas puede usar hasta otras soluciones más técnicas:

• Optimizar imágenes. La optimización de imágenes implica comprimir el peso de las mismas, elegir el formato adecuado (PNG o JPG o SVG) o indicar el atributo de alto y ancho.

Elegir qué formato usar en cada imagen no requiere grandes conocimientos técnicos. Existen muchos “convertidores” de formatos en internet y sólo tienes que subir la imagen en cuestión y añadir el formato que requiera. Ahora bien, ¿cuándo debes usar un formato u otro?

–El formato SVG se utiliza para aquellas imágenes compuestas de formas geométricas, como los logos.

–El formato PNG si quieres que la calidad de la imagen sea buena, aunque tengas que sacrificar la velocidad (esto iría bien para sitios de moda donde las imágenes están en el centro de la estrategia de marketing y de la experiencia de usuario).

-Si lo que te interesa es un equilibrio entre una buena experiencia de usuario en cuanto a la calidad de la imagen y la velocidad, puedes usar el formato WebP con un backup JPEG.

En lo que se refiere a comprimir imágenes, tienes bastantes herramientas gratuitas, (algunas externas como TinyPNG) y otras que son plugins (WP Smush).

Normalmente, el contenido más grande lo conforman las imágenes, por lo que este tip no está de más y te será muy útil para reducir el LCP.

• Mejorar la performance del servidor. Tener un buen o mal supone la diferencia entre tener una buena o mala velocidad de carga. Aquí entran en juego tus posibilidades económicas, pero, si te lo puedes permitir, puedes resolver problemas de carga del contenido más grande mejorando el plan de tu servidor o usando un CDN.

También puedes apostar por un plugin que almacene tus páginas en la memoria caché, como WP Rocket. Esto significa que, al estar esa página almacenada en la caché, cuando otro usuario acceda a tu web, esta se cargará mucho más rápido. Esto ocurrirá cada vez que alguien visite una página de tu web: se guardará automáticamente en la memoria caché y el próximo usuario que pase por tu URL experimentará una carga más rápida.

• Optimización del CSS y Javascript. Aquí nos metemos en terrenos más técnicos y más especializados. Antes de que el navegador pueda reproducir una página, tiene que cargar, analizar y ejecutar todos los archivos CSS y Javascript que encuentra mientras analiza el HTML. Por esta razón, tanto CSS como Javascript son “bloqueadores” por naturaleza. Si no se optimizan, harán que la página web cargue con más lentitud, cargándose tu LCP.

Una de las formas en que puedes solucionar este problema es comprimiendo y minificando los archivos de código.

La minificación elimina partes innecesarias del código como los comentarios, espacios en blanco y saltos de línea. Reduce un poco o medianamente el tamaño del archivo. Para saber si un archivo ha sido minificado, encontrarás la extensión .min en algún lugar del nombre del archivo.

Para conocer si un archivo ha sido minificado, sólo tienes que clickar en el botón derecho de tu ratón< Inspeccionar< Network (en la parte superior) y se desplegará una lista de archivos.

Si te ves capaz de minificar archivos, te dejo este artículo.

Por otra parte, la compresión usa algoritmos para reducir el volumen de los datos, siendo el volumen de esta reducción más grande que en el de la minificación. Los documentos comprimidos tienen un valor br o gzip.

Para llegar a esta parte, sólo tienes que clickar sobre el archivo minificado y aparecerá la opción “Headers”.

1.2 FID: First Input Delay 

Esta métrica se encarga de medir la interactividad y la responsividad de un sitio. También se mide en tiempo y calcula la diferencia entre el tiempo en que el usuario realiza una acción (por ejemplo, hacer click) hasta el momento en que el navegador responde a esa interacción.

Un FID óptimo se sitúa por debajo de los 0,1 segundos.

Obviamente, el FID también mide otro aspecto de la experiencia de usuario: cuánto tiempo tienes que esperar a que una página responda y te muestre el contenido que estás esperando.

El FID es una “métrica de campo” y no puede ser simulada en un entorno de pruebas. De hecho, en algunas herramientas que citaré en este artículo, directamente no aparece. Para medir la demora de la respuesta, es necesario una interacción de un usuario real.

Si tu FID es pobre, esto quizás se deba a una ejecución pobre del Javascript. Si optimizas la manera en que el código Javascript analiza, compila y ejecuta en tu propia web, reducirás el tiempo del First Input Delay.

1.3 CLS: Cumulative Layout Shift

Esta métrica mide la estabilidad visual que, una vez más, está relacionada con la experiencia de usuario.

Algunas veces ocurre que, cuando entramos a una página,  el contenido va cambiando de lugar según esta se va cargando, por lo que, en los primeros segundos, si das click en algún lugar de la página, este click no te lleva a donde querías, ya que el contenido sobre el que clickaste cambió de lugar.

Aquí puedes encontrar un mini-vídeo de ejemplo.

Esto afecta directamente a la experiencia de usuario, ya que da lugar a clicks en lugares no deseados. A nadie le gusta hacer click en un sitio donde no quería porque le hace perder tiempo (volver hacia atrás y realizarla acción que se buscaba).

En este caso, la métrica no se centra en el tiempo, sino en la magnitud y frecuencia con la que se dan los cambios en la página. Cada vez que tiene lugar una modificación en la página, se le da un valor. Una vez que la página ya está estable, se suman cada uno de los valores y esa sería la puntuación del CLS.

Cuanto menos “movimientos” haya, menor será el valor. El valor del CLS no debe ser superior a 0,1. Si el CLS se encuentra entre 0,1 y 0,25, es que necesita mejoras. Si supera el 0,25, es pobre.

Para mejorar esta métrica, debes tener que cuenta que, cuando surgen estos “movimientos” inesperados del contenido de la página es porque los recursos están cargándose de forma asíncrona. El culpable quizás sea una imagen o un vídeo que tiene dimensiones desconocidas, o un anuncio o un widget que se redimensiona a sí mismo.

Para calcular el LCP, el navegador se fija en el tamaño de la ventana gráfica y en el movimiento de los elementos inestables. El LCP es el resultado de la multiplicación de dos medidas de movimiento: “la proporción del impacto” y “la proporción de la distancia”.

El fraccionamiento del impacto mide cómo todos los elementos inestables impactan el área de la ventana gráfica entre dos marcos.

La unión de todas las áreas visibles de los elementos inestables del marco previo y del marco actual – como una proporción del área total de la ventana gráfica- es el “fraccionamiento de impacto” para el marco actual.

Es decir, “la proporción de impacto” es la suma entre la posición que ocupa el contenido desde el principio más el lugar al que se desplaza el contenido después.

Por ejemplo, en la siguiente imagen, “la proporción de impacto” sería la suma entre el espacio que ocupa el primera conjunto de las palabras “Core Web Vitals” y el segundo.

La “proporción de distancia”, por otro lado, es la diferencia entre el lugar que ocupaba la imagen al principio y el que termina ocupando.

Si quieres avanzar más en el tema del CLS y ver más ejemplos, los vas a encontrar aquí.

2. LCP, FID y CLS en Pagespeed Insights, GTMetrix y Lighthouse

Las tres herramientas de las que voy a hablar a continuación son herramientas que miden la experiencia de usuario y que nos permiten hacernos una idea de lo bien o mal que está nuestra página con respecto a este aspecto.

Estas herramientas no han sido lanzadas debido a las Core Web Vitals: hace tiempo que Google está dando importancia a la UX y por eso lanzó Page Speed Insights o Lighthouse.

Son herramientas bastante intruitivas, pues sólo necesitas introducir tu URL y comenzarán a disparar datos. Además, las tres son gratuitas y puedes analizar tu web en las mismas cuantas veces quieras.

2.1 Core Web Vitals en Page Speed Insights

Como puedes observar a primera vista, Page Speed Insights te muestra las métricas Largest Contentful Paint y Cumulative Layout Shift. En cuanto a la métrica FID, sólo la muestra si tiene datos de la URL en UX Report.

2.2 Core Web Vitals en GTMetrix

GTMetrix es mi herramienta favorita, sin duda, para medir el rendimiento web. También incluye el LCP y el CLS y otros datos que también son interesantes, como el tiempo para interactuar.

Cuando analices tu página en GTMetrix no olvides añadir el servidor más cercano (en el caso de que vivas en España, elige siempre el servidor de Londres) porque, si no lo haces y te quedas por defecto con el de Canadá, te dará un tiempo de carga mucho más largo.

2.3 Core Web Vitals y Lighthouse

Lighthouse es una extensión de Chrome que también analiza el rendimiento web y que incluye también las métricas LCP y CLS, pero tampoco incluye el FID.

Nota: la razón por la que FID no se muestra en Lighthouse es porque, para calcularse, es necesario ser un usuario real. Esta métrica, como se ha indicado antes, no es una métrica que pueda ser replicada en una simulación de carga, que es, precisamente, lo que hace Lighthouse.  

3. ¿Cómo afectarán las Core Web Vitals en el posicionamiento SEO?

En este punto, lo importante es no volvernos locos.  Si bien estas tres métricas son factores de posicionamiento, parece que van a ser factores de posicionamiento “para el desempate”. Es decir, que si hay dos webs que están peleándose en las SERPS y ambas tienen “la misma puntuación para posicionar”, entonces ganará aquella que tenga mejor puntuación en las tres métricas de Core Web Vitals. 

De todas formas, y aunque las herramientas son buenas para conocer si nuestra experiencia de usuario es buena, no hay que obsesionarse con los números (por supuesto, cuanto mejores sean los números, mejor), pero no vayamos a matarnos por tener un 100 en el Page Speed Insight y luego un contenido informacional muy pobre.

Y otra vez recalco, y sé que, como siempre, soy pesadita, que me gustaría que vieses esas tres métricas, no como puntuaciones que alcanzar (que también, pero no las reduzcas a eso) sino a calidad en la experiencia de usuario. Envía a tus amigos, familiares, gente de tus redes sociales, etc. tu sitio web y pregúntales si lo ven lento, lo ven estable o si se sienten cómodos navegando por la página.

Y ya si te apetece escuchar una visión más distendida sobre las Core Web Vitals, te dejo este podcast de Campamento Web con Álvaro Fontela, en el que da su visión, desde la experiencia, sobre estas métricas.

¿Y tú? ¿Ya estás obsesionado con la puntuación de las Web Vitals?