1. ¿Qué son las Core Web Vitals?
Las Core Web Vitals son un factor más de posicionamiento de tu web en el ranking de los resultados de búsqueda de Google.
Están compuestas de 3 métricas (LCP, FID y CLS) y Google busca con ellas mejorar la usabilidad y rapidez en la experiencia de usuario.
2. ¿Cómo afectan al SEO?
Google saca un índice que mide los aspectos esenciales que debe tener una web en cuanto a la velocidad de carga y la experiencia de usuario. Cuanta mejor sea esa nota, mejor posicionará en los resultados de búsqueda.
Si la estructura de una página y la calidad del contenido tienen un impacto en el SEO, estas nuevas métricas son otro factor muy importante a tener en cuenta.
3. LCP (Largest Contentful Paint)
Esta métrica mide cuánto tiempo tarda en cargarse el contenido principal de la ventana gráfica o “viewport” de tu sitio web. Es decir, lo que visualiza el usuario en la pantalla antes de hacer scroll (en el móvil y en la versión escritorio)
El tiempo promedio de LCP para ser considerado bueno debe estar por debajo de los 2,5 segundos
- Bueno: 2,5 segundos o menos
- Necesita mejorar: menor o igual a 4.0 segundos
- Malo: más de 4.0 segundos
4. ¿Cómo mejorar el LCP?
– Contrata un buen hosting: Google incluye el tiempo de respuesta del servidor en el tiempo de carga de la web
– Utiliza un CDN: la web se cachea en un conjunto de servidores y se sirve al usuario desde el más cercano
– Optimiza las imágenes: reduce el peso y utiliza formatos webP y VSG
– Optimiza la carga de los javascripts y css
– Elimina lo innecesario
– Cachea
– Minifica el código
– Comprime
– Asincroniza
– No uses Lazy Load en el LCP
– Precarga el LCP
5. FID (First Input Delay)
Esta métrica mide el tiempo mínimo en el que el usuario interactúa con la página, es decir, cuánto tarda el navegador en responder a la acción del usuario.
El tiempo promedio de FID para ser considerado bueno debe estar por debajo de los 100 milisegundos.
- Bueno: menos de 100 milisegundos.
- Medio: entre 101 y 300 milisegundos.
- Malo: más de 300 milisegundos.
6. ¿Cómo mejorar el FID?
El factor de medición es el Total Blocking Time (TBT), el tiempo que está bloqueada una página descargando recursos y no puede atender la petición del usuario. Por lo tanto, cualquier optimización del TBT mejorará el FID.
– Reduce el impacto del código de terceros
– Reduce el tiempo de ejecución de Javascrip
– Minimiza el trabajo del hilo principal
– Haz cuantas menos peticiones y de menor peso posible
¿Cómo?
– Preconect: Preconecta los recursos de terceros de tu website (Youtube, Facebook, Google Fonts, Google Analytics, Tag Manager…)
para ahorrar tiempos de revisión de DNS, negociación de TLS y establecimiento de conexiones TCP.
– Preload: adelantar la descarga de los recursos de tu web: imágenes, fuentes, JavaScript, CSS, scripts, vídeo, etc, cualquier recurso cacheable.
– Prefetch: indica al navegador que vaya cargando la siguiente página que creas que será necesaria mostrar cuando el usuario siga navegando.
7. CLS (Cumulative Layout Shift)
Esta métrica mide la estabilidad visual de tu página web. Es decir, el desplazamiento de los elementos visuales de la página en el momento de visualización de los mismos.
Principales problemas que afectan al CLS:
– Imágenes sin dimensiones: en el diseño web “responsive” las imágenes no tienen una dimensión fija, se adaptan dependiendo del dispositivo. El navegador no sabe el espacio que necesita hasta cargar la imagen y tendrá que desplazar elementos para dejarle espacio cuando se cargue.
– Anuncios
– Incrustaciones, embebidos, iframes sin dimensiones
– Contenido inyectado dinámicamente?
– Fuentes web causando FOIT/FOUT (texto invisible y texto sin estilo)
– Acciones del servidor
Para tener un buen puntaje de CLS, la página debería mantener los elementos lo más estables posibles mientras se está cargando.
Cuanto más arriba de la página está el elemento que se mueve, empuja a más elementos y empeora la métrica.
Una puntuación menor o igual a 0,1 segundos significa que el contenido de la página es completamente estático durante su ciclo de vida.
- Bueno: menor o igual a 0,1 segundos
- Necesita mejorar: menor o igual a 0,25 segundos
- Malo: más de 0,25 segundos
8. ¿Cómo mejorar CLS?
Evitando los problemas que afectan al CLS:
– Imágenes sin dimensiones: utilizar el atributo srcset y establecer unos set de imágenes para diferentes dispositivos.
– Anuncios: reserva espacio en la página para tus anuncios
utilizando cuadros de relación de aspecto CSS.
– Incrustaciones, embebidos, iframes sin dimensiones: especifica las dimensiones en el HTML. Prueba a puedes especificar solo el ancho y confía en que el navegador establezca la altura.
– El contenido inyectado dinámicamente, por ejemplo, desde una API, no debe aparecer una vez que se ha cargado el sitio web.
– Fuentes web que causan FOIT/FOUT: utiliza valores font:display como auto, swap, block, fallback y optional, o precarga las fuentes usando con preload.
9. Herramientas para evaluar las Core Web Vitals
- PageSpeed Insights: entrega información de los web vitals y otras métricas que ayudan a mejorar sitios con problemas, particularmente enfocadas a la velocidad de carga de una página.
- Extensión Web Vitals para Chrome: permite acceder a los índices e ir revisando cómo varían al interactuar con el sitio.
- WebPageTest: permite configurar una variedad de condiciones para analizar un sitio.
- Google Search Console: puedes revisar los Web Vitals desde aquí
- https://requestmap.herokuapp.com
Nuevas etiquetas en los resultados de la búsqueda
Google está considerando añadir nuevas etiquetas en los resultados de búsqueda para informar a los usuarios qué páginas ofrecen una buena experiencia de usuario.
