#46 Core Web Vitals de Google

Podcast (episodios): Reproducir en una nueva ventana | Descargar

Suscríbete: Spotify | RSS | Más

En este episodio hablamos de las Core Web Vitals de Google. Esto es el numerito, las puntuaciones y los colores que aparecen en Google Pagespeed Insights, por ejemplo, cuando hacemos un test de velocidad de nuestra página web. Se trata de una serie de métricas basadas en la experiencia de usuario, y que sirven para desempatar entre dos webs cuando éstas están en igualdad de condiciones a la hora de posicionar.

Las Core Web Vitals, un factor desempatante para el posicionamiento

Aunque se trata de un concepto ligado al rendimiento de la web (web performance optimization o WPO), pero que puede ser determinante para el posicionamiento web. Ojo, hay que tener en cuenta que, si tenemos una web con un contenido pésimo, ya puede cargar la web antes de que hagamos clic en el enlace, que nuestra web no posicionará nunca.

Sin embargo, es fácil que nos encontremos una web con un rendimiento horrible, que va a pedales, pero que, como satisface las intenciones de búsqueda por tener un contenido adecuado, estará ahí en las primeras posiciones de los resultados de búsqueda de Google.

¿Cómo se calculan las Core Web Vitals?

En el episodio te contamos como se calculan. Aunque resumiendo mucho, puedes echar un vistazo a la Lighthouse Scoring Calculator, que es una calculadora que nos permite ver qué papel juega cada uno de los factores de experiencia de usuario en el valor final de puntuación.

Los parámetros que conforman las Core Web Vitals son los siguientes:

• First Contentful Paint (FCP): Mide lo que tarda el navegador en renderizar el primer elemento de contenido desde que el usuario entra en la web. Es uno de los tres factores vitales para la puntuación final, y supone un 15% de ésta.
• Speed Index (SI): Mide la rapidez con que se visualiza el contenido durante la carga de la página, e igualmente tiene un peso del 15% en el resultado final.
• Largest Contentful Paint (LCP): Es el que tarda en renderizar la imagen o bloque de texto más grande visible en el viewport del navegador con respecto al inicio de la carga de la página. Supone un 25% de la puntuación, por lo que hay que prestarle más atención.
• Time to interactive (TTI): Tiempo que invierte la página en estar completamente interactiva. Supone un 15 % de la puntuación.
• Total Blocking Time (TBT): Tiempo total que la página está bloqueada hasta poder responder a impulsos del usuario como clics del ratón, taps en pantalla o presión de teclas. Supone un 25% de la puntuación.
• Cumulative Layout Shift (CLS): Puntúa los cambios rependinos de posición de elementos inmediatamente antes de que hagamos clic en ellos. Solamente puntúa en un 5%, pero esto irá cambiando conforme evolucione la forma de medir de los navegadores.

La ponderación de 0 a 100 de todas estas metricas dan lugar a la puntuación final que se utiliza en el Lighthouse Scoring Calculator. De modo que, finalmente, lo que vemos es:

• 0 a 50 (en rojo), cuando el resultado es pobre.
• 50 a 89 (en naranja), cuando la web necesita mejoras.
• 90 a 100 (en verde), cuando el resultado es bueno.

Los tres aspectos de la experiencia de usuario más importantes son, por tanto:

• La carga, que se mide con el LCP o Largest Contentful Paint.
• La interactividad, medida en base al FID o First Input Delay, éste se obtiene a partir del FCP, que lo vimos anteriormente.
• La estabilidad visual, medida con el CLS o Cumulative Layout Shift.

Herramientas para medir las Core Web Vitals

Google dice que las Core Web Vitals deberían poder ser medidas por todo el mundo, y para ello se han encargado de que se encuentren en prácticamente todas las herramientas que ponen a disposición de todo el mundo. Os ponemos un cuadro en el que podéis ver las herramientas que miden estas métricas.

Soluciones a los problemas de rendimiento con las Core Web Vitals

También hemos repasado cómo se puede poner solución a los problemas que surgen de rendimiento según las Core Web Vitals.

Hemos visto que, prácticamente todos, excepto algunos concretos, se pueden resolver con un plugin de caché de pago excepcional, o con la combinación de otros dos gratuitos con los que hay que hacer las cosas de una forma un poco más artesanal.

• WPRocket: Es un plugin de Caché y optimización web que cubre la práctica totalidad de las necesidades de optimización para obtener una buena puntuación en las Core Web Vitals y en Google PageSpeed Insights.
• WP Super Cache y Autoptimize: Es una combinación bastante adecuada para hacer gran parte de las tareas de optimización que se necesitan para mejorar la WPO de nuestra web, y por tanto mejorar la puntuación en cada uno de los factores que componen las Core Web Vitals.
• Imagify.io: Se trata de un plugin para optimización de imágenes, que sirve éstas también en formato moderno para aquellos navegadores que lo soporten.

Los problemas principales que se suelen encontrar son:

• Mejorar el LCP (Largest Contentful Paint): Para ello, debemos centrarnos en las tareas de cache de la web y del navegador, así como en la optimización de las imágenes. Igualmente hay que prestar atención a la optimización del código, en especial del CSS y del JavaScript.
• Mejorar el FID (First Input Delay): En este caso, es un poquito más complicado, ya que hay que hacerlo con código, pero la tarea principal consiste en romper o separar tareas largas en JavaScript que puedan bloquear el renderizado de la página en tareas más cortas que se sirvan rápido. En general se trata de optimizar la página para que esté lista antes de la interacción del usuario.
• Mejorar el CLS (Cumulative Layout Shift): Aquí prestaremos de nuevo atención a las imágenes, pero a que contengan las dimensiones definidas y no tenga que calcularlas el navegador, también tendremos cuidado con anuncios embebidos e iframes. Y mucho ojo con las webfonts.

Y si no consigues mejorar las Core Web Vitals en WordPress, entonces tendremos que pensar si necesitamos un hosting más rápido, repasar de nuevo la optimización de las imágenes, qué plugins estamos utilizando, y pensar bien qué maquetadores visuales estamos utilizando.

Nosotros recomendamos siempre utilizar los basados en Gutenberg, el editor nativo de WordPress.

Las noticias de la semana

Os dejamos los enlaces que hemos tratado en las noticias de la semana:

• Nuestra ganadora del sorteo del libro de David Ayala, «Visibilidad Online, Inmortaliza tu marca», ha sido Nerea Plumed Marco, de Madrid. ¡¡¡ ENHORABUENA NEREA !!!

Me lo pido! #SorteoNinja https://t.co/iOrtLZuRZn

— Nerea Plumed (@NerePlum) February 25, 2021

• Hablamos de WordPress 5.7, que fue lanzado el 9 de marzo de 2021 y vemos sus nuevas características que puedes ver en profundidad en la web de WordPress.
• Y como no, hablamos del incendio que se produjo el 10 de marzo de 2021 en los datacenters de OVH en Estrasburgo.

Términos del día

Y no te olvides de echar un vistazo a nuestro patrocinador: