Update Google verano 2021, Core Web Vitals

Los CORE WEB VITALS son unas métricas que nos ayudan a mejorar la experiencia del usuario, te explicamos como mejorarlo

Core Web Vitals
19 Ago 2021

Sin lugar a dudas Google este verano ha vuelto a poner todas las SERPS calentitas, en esta ocasión sigue centrando sus optimizaciones en mejorar la experiencia de usuario, para ello ha sacado una serie de métricas basadas en los Core Web Vitals.

El update de Google tuvo lugar en mayo, aunque Google ha confirmado que se extenderá hasta finales de Agosto, por lo que el movimiento será constante durante estos meses, recordar que los CORE WEB VITALS es un factor más de ranking y no el único, pero si indispensable trabajarlo técnicamente, ya que actualmente existen más de 200 factores SEO que afectan al ranking de una página web.

A veces lo más simple es la mejor solución

Al final la forma de clasificar que tiene Google las páginas se basan en patrones de la forma que tienen los usuarios de interactuar en nuestra web, estos patrones, pueden ser positivo o negativos. Pongamos un ejemplo de patrón negativo, si un usuario llega a nuestra web y se va al instante, sin hacer scroll, sin interactuar, sería negativo.

¿Qué son los CORE WEB VITALS?

Como os hemos explicado, los CORE WEB VITALS son factores que condicionan la experiencia en la página, Google en Mayo de 2020 anunció su lanzamiento para 2021 como un factor de posicionamiento web.

Los 5 factores de ranking que evalúan la experiencia del usuario serían:

  • Compatibilidad total con dispositivos móviles.
  • HTTPS
  • Navegación segura.
  • Navegación sin elementos emergentes.
  • Core Web Vitals

Los core Web Vital se dividen en varias métricas:

  • LCP, carga del elemento principal.
  • FID, tiempo hasta que en la web se puede interactuar.
  • CLS, elementos que no se muevan durante la carga.
Métricas de Core Web Vitals en Search Console
Métricas de Core Web Vitals en Search Console

Estas métricas las podemos ver en SEARCH CONSOLE en la sección de Métricas Web Principales, ahí nos aparecerá todas las urls indexadas y Google nos las clasificará en función de si necesitan mejora o están bien, de esta forma podremos encontrar patrones y poder corregir las deficiencias.

¿Por qué son importantes los Core Web Vitals?

El motivo más obvio por lo que debes trabajar estos factores es que mejorará tus resultados en las SERPS, el otro igual o más de importante es que tus usuarios tendrán una experiencia de usuario más placentera, y si lo enfocamos en comercio electrónico podremos comprender que cada mejora en experiencia de usuario tiene un efecto inmediato en las ventas.

LCP, First Contenful Paint

La métrica LCP tiene que ver con la velocidad de la página web, la velocidad con la que carga el elemento principal, ya sea imagen o texto. Es el tiempo que tarda la página web en cargar hasta que el usuario puede interactuar con la página web.

Google nos indica varios tiempos que son con los que nos dá la puntuación:

  • Menor a 2.5 segundos-> El sitio carga rápido, gráfica verde, nos dará la máxima puntuación.
  • Entre 2.5 segundo y 4-> Medio, en color naranja, el sitio necesita mejorar.
  • Más de 4 segundos-> Es imprescindible trabajar la web y obtener mejores resultados, veremos el resultado en rojo.

¿Cómo mejorar el LCP?

Os damos una serie de consejos imprescindibles para tratar de mejorar el LCP

Métricas Core Web Vitals
Métricas Core Web Vitals

Mejorar las imágenes

  1. Es recomendable optimizar las imágenes de la tienda online y buscar que sean lo menos pesadas posibles, tienes programas que realizan esta función o incluso librerías que se aplican en el servidor y lo hacen de forma automática.
  2. Optimizar el tamaño de imágenes y evitar el escalado, usar en cada dispositivo los tamaños que realmente se van a usar, por ejemplo un slider es recomendable cargar una diapositiva para el móvil y otra para pc.
  3. Buscar aquellos elementos que tienen una gran incidencia en el LCP, si es necesario y no es posible optimizarlos eliminarlos o buscar otras alternativas.
  4. Usar cargas asíncronas para la carga de imágenes, por ejemplo con Lazyload podemos cargar las imágenes de los productos conforme el usuario va realizando scroll.
  5. En el caso que tu web está en varios idiomas puedes considerar el uso de un CDN, de esta forma optimizarás la carga de contenidos desde el punto más cercano al usuario.

Optimizar los videos

Utilizar imágenes de portada para lo vídeos es una técnica que Google no recomienda, Google recomienda usar esta técnica.

Evitar el uso de backgrounds con imágenes

Google recomienda usar CSS para conseguir ciertas visualizaciones, antiguamente CSS no permitía realizar muchas cosas que hoy si se pueden realizar y sobre todo la mayoría de navegadores permiten.

Uso de librerías CSS

Google recomienda eliminar la carga de librerías de javascript en todas las páginas, y hacer uso de ellas solo en las páginas donde se ejecuten. Además, deberían tardar menos de 34 milisegundos, esto también se podría aplicar a los estilos de la página, las librerías CSS, este punto es bastante complejo.

En nuestro caso en muchas tiendas Prestashop, lo que hacemos es cargar en la home una CSS, en la categoría otra y en las páginas de productos otra, esto lo repetiríamos también en dispositivos móvil, en total serían 6 CSS necesarios, más otras dos para el resto de páginas, de esta forma serían más livianas las cargas, pero claro, este trabajo es muy tedioso y lleva muchas horas de trabajo. Al final lo que estamos haciendo es eliminar todos aquellos estilos que no estamos usando en esa página.

Podemos cargar las css en función del dispositivo, de esta forma en aquellos dispositivos que no sean necesarios solo se cargará una parte del total de todos los dispositivos.

Carga de librerías externas de Javascript

El otro gran problemas de la mayoría de tiendas, es la cantidad de plugins, herramientas, aplicaciones y sistemas que se conectan para marketing y sobrecargan el tiempo de carga… Google recomienda eliminar aquellas librerías de módulos de terceros que recargan la página, cosa bastante difícil.

Puedes aplazar la carga de CSS , primero que se cargue lo necesario y posteriormente que cargue los elementos que no son imprescindibles en ese primer pantallazo.

Los javascript los podríamos trabajar de la misma forma, o cargarlos de forma asíncrona o posteriormente a la primera carga más importante del contenido principal.

Actualice su Prestashop, si su tienda tiene muchos años es probable que use librerías muy antiguas, actualmente existen técnicas HTML5 y/o CSS3 que permiten conseguir los mismos resultados que las librerías javascript de hace años, por ejemplo librerías jquery antiguas.

Puede realizar cargas más rápidas de librería de terceros en el caso que se usen mediante los siguientes códigos:

<link rel = «preconnect» href = «https://example.com» />

Este método puede no ser compatible con todos los navegadores, puede usar en ese caso

<link rel = «dns-prefetch» href = «https://example.com» />

Y debe incluirlos dentro de las etiqueta HEAD.

Contratar un servidor rápido

Es importante que el servidor sea rápido, por muchas optimizaciones que realices si el servidor no funciona bien, no conseguirás reducir tiempos de carga, un consejo huye de servidores que estén masificados, genéricos o bajo coste, nuestra experiencia es que no se consiguen buenos resultados.

Usar la caché de Prestashop

Es importante si usas Prestashop que tengas activada siempre la caché y que tengas minificadas las CSS y javascript que se usan en tu página como mínimo.

FID, First Input Delay

El FID es el tiempo desde que se carga la página hasta que el usuario realmente puede interactuar, por ejemplo con un menú, hacer scroll, cualquier acción que el usuario quiera realizar, generalmente viene determinado por la carga de javascripts de gran tamaño.

En este caso Google también tiene una serie de métricas para que podamos mejorar:

  • Menos a 100 milisegundo, está perfecto.
  • Entre 100 y 300 milisegundos, tenemos que aplicar mejoras.
  • Mayor de 300 milisengundos, hay que realizar mejoras sí o sí.

¿Cómo mejorar el FID?

Como os hemos dicho por norma general las malas puntuaciones vienen determinadas por cargas de javascript por lo tanto podremos:

  • Revisar las librerías de Javascript e incluirlas solo en las páginas que realmente sean necesarias.
  • Revisar las librería de terceros, módulos que usan sus propios javascripts o hacen llamadas a aplicaciones externas de la página.

CLS, Cumulative Layout Shift

El CLS es la métrica mide que el contenido no se desplace mientras la página se carga, no deben existir movimientos, o imágenes que cargan con retraso, textos que suben después de cargar una imagen, etc..

Las métricas que nos propone Google serían las siguientes:

  • 0,1 o menor, perfecto.
  • Entre 0,1 y 0,25, hay margen de mejorar.
  • Mayor a 0,25, requiere realizar mejoras.

¿Cómo mejorar el CLS?

  • Revisar que las imágenes tienen los tamaños correctos y vienen implementados en el código, si la carga de imágenes es lenta puede producir que todos los elementos se desplacen mientras se realiza la carga total de la página.
  • Si carga fuentes no estandar compruebe que se cargan lo primero para que no haya movimientos de textos, podemos realizar un preload de esa fuente.
  • Siguiendo con el tema de las fuentes, si usas fuentes de Google fonts usar máximo dos o tres estilos como mucho de una única fuente, cuando combinamos más de 3 el rendimiento cae en picado.
  • Tratar de no cargar videos de Youtube, Google Maps o redes sociales, ya que se producen unos dlays que pueden provocar movimientos en el diseño, una solución a este problema sería especificar los tamaños de esos espacios para tratar de evitarlos.

Como véis el trabajo de optimización para los CORE WEB VITALS es bastante laborioso, si usas una plantilla o tu desarrollo es bastante antiguo, es probable que haya que invertir muchas horas en realizar mejoras, en el caso que sea un desarrollo en Prestashop nuevo tienes la ventaja que vas a poder controlar todos estos elementos de un inicio.

Deja una respuesta

1 comentario
  1. Core web vitals are good thing.