A la hora de optimizar nuestro SEO On Page nos fijamos en muchas cosas, pero, a veces, se nos olvida atender a lo más básico… ¡A lo que dice Google! Y Google ha dicho muy claramente en varias ocasiones que las Core Web Vitals son fundamentales en el SEO On Page.
Por supuesto, no es el único elemento importante para optimizar una web y conseguir que posicione correctamente, hay muchos otros. A nivel técnico, las Core Web Vitals son aquello en lo que más deberíamos centrarnos si queremos que Google ame nuestra web.
¿Cómo? ¿Que no sabes que son las Core Web Vitals?
¡Tranquilo! Te cuento todo lo que debes saber sobre ellas, cómo medirlas y optimizarlas para que tu web suba como un tiro, además de algunas herramientas para que puedas analizarlas.
¿Qué son las Core Web Vitals?
Las Core Web Vitals son un conjunto de métricas específicas que Google considera cruciales para la experiencia del usuario en una página web. Estas métricas se centran en aspectos de velocidad, capacidad de respuesta y estabilidad visual de la página.
Las Core Web Vitals son unas métricas que han sido creadas por Google para determinar la calidad de un sitio web a nivel técnico. Es decir, en lo que a su diseño y desarrollo web se refiere. Las principales métricas de Core Web Vitals son: Largest Contentful Paint (LCP), First Input Delay (FID) y el Cumulative Layout Shift (CLS), que pasaremos a describir en el siguiente apartado.
Estas métricas son fundamentales porque Google las usa como parte de sus criterios para clasificar las páginas web en los resultados de búsqueda, buscando así proporcionar una mejor experiencia de usuario.
Google es dueño de Google Chrome, y más del 70% del tráfico utiliza este navegador. Y Google lo aprovecha para recoger datos de experiencia del usuario.
Así que tiene una cantidad ENORME de datos para determinar si tu web cumple o no cumple con los Core Web Vitals. Y, además, como utiliza sus propios datos obtenidos a través del navegador, no podemos engañarle.
¿Qué importancia tienen las Core Web Vitals?
Las Core Web Vitals de Google tienen una gran importancia por varias razones, tanto para los propietarios de sitios web como para los usuarios. Aquí algunos puntos clave sobre su relevancia:
- Mejora de la Experiencia del Usuario: Están diseñadas para medir aspectos críticos de la experiencia del usuario, como la velocidad de carga, la interactividad y la estabilidad visual. Mejorar estas métricas ayuda a asegurar que los usuarios tengan una experiencia más rápida, fluida y agradable en el sitio web.
- Posicionamiento en Motores de Búsqueda (SEO): Google utiliza las Core Web Vitals como parte de su algoritmo de clasificación. Los sitios que ofrecen una mejor experiencia de usuario tienden a clasificarse mejor en los resultados de búsqueda. Esto puede llevar a un aumento en el tráfico orgánico.
- Tasa de Retención y Conversiones: Un sitio web que carga rápidamente y responde bien a las interacciones de los usuarios es menos probable que tenga altas tasas de rebote, lo que mejora las conversiones.
- Competitividad: Los sitios que se optimizan para las Core Web Vitals pueden tener una ventaja competitiva significativa.
- Reducción de Costos: Optimizar las Core Web Vitals es probable que reduzca costos de servidor, disminuya el consumo de ancho de banda y mejore la eficiencia general del sitio.
En resumen, las Core Web Vitals son fundamentales no solo para mejorar la experiencia del usuario, sino también para mantener y mejorar la visibilidad en los motores de búsqueda, incrementar la retención de usuarios y conversiones, y mantener una ventaja competitiva en el mercado digital.
Métricas más importantes de las Core Web Vitals en tu web
La verdad es que tiene sentido que los hayan aglutinado de esta forma y hayan creado estas tres grandes métricas. Y, ahora que Google las ha creado y explicitado, a nosotros nos resulta mucho más fácil trabajarlas.
Repasamos, las principales métricas de Core Web Vitals que debemos medir para comprobar el estado de nuestra web son: Largest Contentful Paint (LCP), First Input Delay (FID) y el Cumulative Layout Shift (CLS)
A continuación, te presento las diferentes Core Web Vitals y qué significa cada una de ellas:
LCP (Largest Contentful Paint): ¿Qué es, qué mide y para qué sirve?
El LCP se utiliza para medir el rendimiento de carga de una página web. Específicamente, el LCP mide el tiempo que tarda en cargarse y mostrarse el contenido más grande visible dentro de la ventana de visualización (viewport) desde el momento en que el usuario inicia la carga de la página.
La definición es medio rara, pero lo es por un motivo: LCP no mide cuánto tarda la página en cargar, sino la percepción que tiene el usuario de cuánto tarda la página en cargar.
¿Qué se considera una buena velocidad de carga en LCP?
- Bueno: 2.5 segundos o menos.
- Necesita Mejorar: Entre 2.5 y 4 segundos.
- Pobre: Más de 4 segundos.
Por ejemplo: Es mejor una web que tarda 2.5 segundos en cargar, pero que muestra algo funcional al usuario en el segundo 0.5 que una web que tarda 1.5 segundos en cargar pero que se muestra en blanco hasta que está completamente cargada.
Un dato importante, los scripts no entran en el análisis que hace Google del LCP.
¡Por cierto! El LCP se basa en la aparición del contenido en el above the fold. Es decir, si lo que hay más abajo (al hacer scroll) tarda más en aparecer, da igual, eso no se tiene en cuenta. Lo importante es lo que tarda el usuario en ver algo. Lo primero.
FID (First Input Delay): ¿Qué es, qué mide y para qué sirve?
El First Input Delay mide el tiempo de respuesta que tiene la página para la primera acción que el usuario lleva a cabo en ella. Es el tiempo que tarda la web en responder al primer clic, al primer “tap” o a la primera tecla pulsada por el usuario en la web (siempre que, con ello, se deba obtener una respuesta, claro).
En general, este tiempo es muy reducido, pero, a la mínima que se hace un poco más largo de la cuenta, empieza a ser muy molesto para el usuario. Por lo tanto, Google quiere que lo reduzcamos al mínimo posible.
¿Qué se considera una buena optimización del FID?
- Bueno: 100 milisegundos o menos.
- Necesita Mejorar: Entre 100 y 300 milisegundos.
- Pobre: Más de 300 milisegundos.
En general, se considera que un FID por debajo de 100ms está bien, siempre y cuando este FID se mantenga bajo ese valor en, al menos, un 75% de las veces que se carga la página (recuerda, estos datos Google los obtiene “sobre el terreno”, desde Google Chrome).
Optimizar el FID en Core Web Vitals y WPO es esencial para proporcionar una experiencia de usuario positiva y mejorar el rendimiento de la página en los resultados de búsqueda.
CLS (Cumulative Layout Shift): ¿Qué es, qué mide y para qué sirve?
El Cumulative Layout Shift (CLS) es una métrica clave dentro de las Core Web Vitals de Google que mide la estabilidad visual de una página web. El CLS cuantifica cuánto se mueve el contenido visible de la página mientras se carga, proporcionando una medida de cuán molesto puede ser para los usuarios cuando los elementos en la página cambian de posición inesperadamente.
¿Qué se considera un buen CLS?
- Bueno: 0.1 o menos.
- Necesita Mejorar: Entre 0.1 y 0.25.
- Pobre: Más de 0.25.
Te pongo un ejemplo que seguro que te resulta familiar: ¿Alguna vez has accedido a una web, has ido a hacer clic en un botón mientras ésta cargaba, y has acabado haciendo clic en otro sitio porque, al cargar otro nuevo elemento, el botón se ha desplazado?
Pues eso es el Cumulative Layout Shift. Ese movimiento tan molesto. Si no lo arreglamos Google no nos va a amar tanto como podría y nuestro SEO On Page no será tan bueno.
¿Qué causa estos layout shifts inesperados?
- Imágenes sin dimensionar
- Mal uso de fuentes
- Anuncios, iframes y embebidos sin dimensionar
- Contenido inyectado dinámicamente
Lo cierto es que para determinar la métrica del CLS influyen diferentes factores y es una ecuación un tanto complicada en la que no nos vamos a meter. Lo que te interesa saber es que deberías estar por debajo de 0.1, aunque tienes cierto margen hasta 0.25.
¿Cómo mejorar las Core Web Vitals principales?
Otros artículos que pueden interesarte:
- 🥇5 Herramientas para Saber las Visitas de una Página Web
- ▷ Guía de Metricool: Herramienta Profesional para Redes Sociales
- EDIT: Qué es, Cómo funciona y Ventajas [Review + Sorpresa]
- Screaming Frog: La guía definitiva para aprender a usar ScreamingFrog
- 🥇Google Search Console 2024: Da de Alta tu Web [Tutorial]
Ahora que sabemos qué es cada cosa y cuál es su importancia relativa, podemos pasar a hablar de cómo mejorar estas métricas de Core Web Vitals:
¿Cómo mejorar el Largest Contentful Paint (LCP)?
Para mejorar el LCP tenemos, básicamente, que optimizar la velocidad de carga. Si optimizamos la velocidad de carga y nuestro WPO en general, optimizaremos el LCP en particular.
Tengo una buena guía sobre WPO y optimización de la velocidad de carga de las imágenes que te recomiendo visitar para saber más al respecto. En cualquier caso, te menciono aquí, también, algunos trucos y consejos para optimizar el LCP:
Optimiza tamaño de las imágenes
En primer lugar, deberías optimizar el tamaño y el peso de tus imágenes. Al final, lo que más pesa en casi cualquier página es el conjunto de imágenes que se utilizan en ella. Así que, si quieres que se muestren rápidamente al usuario, tienes que reducir su peso.
Tu theme te recomendará las mejores dimensiones para tus imágenes y, además, puedes recurrir a diferentes herramientas y plugins para reducir su peso.
Usa un CDN de imágenes
Utilizar un CDN siempre es una buena idea, pero, en el caso de las imágenes, lo es especialmente. Los CDNs de imágenes permiten obtener velocidades de carga sustancialmente mayores.
Esto lo consiguen sirviendo las imágenes apropiadas en función de la localización del usuario, el dispositivo que está utilizando, etc. De esta forma, la carga de imágenes es aún más rápida, incluso si el usuario te está visitando desde la otra punta del mundo.
Evita la carga de imágenes vía JavaScript
Como bien sabes, JavaScript es un poco porculero a la hora de cargarse. Si cargas tus imágenes vía JavaScript, es muy probable que se ralentice la velocidad de carga total. Por tanto, conviene evitar este tipo de carga.
Usa un buen hosting
No hace falta decir que algo que influye de forma muy importante en la velocidad de carga de cualquier elemento de tu web es el hosting que tengas. Te lo digo ya: Cambia de hosting a uno que sea bueno.
Puedes ganar fácilmente 0.3-0.6 segundos de velocidad de carga si apuestas por un hosting de calidad correctamente configurado. Quizá para un micronicho no te haga falta. Pero, si tienes una web seria, conviene hacerlo.
Cachea y minifica
Por último, minifica y cachéalo todo.
Cachear todos los recursos de tu web y minificarlos te permitirá obtener una velocidad de carga mucho más rápida, tanto de aspectos relativos al LCP como de aspectos no relativos al mismo.
Y es tan fácil como instalar un par de plugins y configurarlos.
¿Cómo mejorar el First Input Delay (FID)?
Optimizar el FID no es tan fácil como optimizar el LCP. Pero, por suerte, para usuarios de WordPress, no suele ser tan necesario optimizarlo. Lo normal es que la plantilla de WordPress que uses ya tenga un FID dentro de los límites aceptables.
En cualquier caso, si quieres mejorar el FID, debes saber que lo primero es tener una web con un buen UX. Cuanto más sencillo y ligero sea tu diseño, más probable será que tu FID esté por debajo de 100ms.
Eliminar los JavaScripts innecesarios también es una buena idea, puesto que el procesamiento de mucho JavaScript es la principal causa de un FID elevado. Esto se debe a que JavaScript sobrecarga el navegador, y el navegador lidia con ello pasando el problema al usuario, que ve aumentado el tiempo de respuesta a sus acciones.
¿Cómo mejorar el Cumulative Layout Shift (CLS)?
Lo que debes hacer es identificar los elementos que tienen un alto CLS (cosa que puedes hacer desde la herramienta DevTools de Chrome) y corregir los problemas que veas en ellos.
La mayor parte de los problemas de CLS vienen por no haber marcado las dimensiones de imágenes o iframes o similares. Si especificamos esas dimensiones, la página cargará directamente dejando el hueco adecuado para ellos y, cuando se carguen, no desplazarán otros elementos.
Piensa que el CLS ocurre porque se cargan unos elementos y después otros, y los segundos desplazan a los primeros en el tiempo en que el usuario está intentando interactuar con la página.
Lo que deberías hacer es arreglar el CLS haciendo que la web cargue de una forma más razonable y ordenada. Pero, si además aplicas este truquito, mejor que mejor.
Otras métricas de rendimiento que hay que comprobar
Ahora vamos a pasar a definir otras métricas interesantes a tener en cuenta en nuestro análisis y optimización de las core web vitals:
Speed Index (SI)
El Speed Index mide qué tan rápido se muestra el contenido visible de la página durante la carga.
Representa la velocidad con la que se va llenando el contenido visual, proporcionando una idea de cuán rápido los usuarios pueden ver algo útil en la página.
Por qué es importante:
- Experiencia del Usuario: Un SI bajo indica que los usuarios pueden ver el contenido rápidamente, mejorando la percepción de la velocidad de la página.
- Optimización: Ayuda a identificar cuellos de botella en la carga de contenido visible.
First Contentful Paint (FCP)
El First Contentful Paint mide el tiempo desde que el usuario inicia la carga de la página hasta que cualquier parte del contenido (texto, imágenes, etc.) se muestra en la pantalla.
Es un indicador de cuán rápido se carga el contenido inicial.
Por qué es importante:
- Primera Impresión: Un FCP rápido asegura que los usuarios vean contenido en poco tiempo, mejorando la primera impresión.
- Interacción Temprana: Ayuda a evaluar y mejorar la rapidez con que los usuarios pueden comenzar a interactuar con la página.
Time to Interactive (TTI)
El Time to Interactive mide cuánto tiempo tarda la página en volverse completamente interactiva, es decir, cuando la mayoría de los elementos de la página están visibles y listos para la interacción del usuario.
Por qué es importante:
- Usabilidad: Un TTI rápido asegura que los usuarios pueden interactuar con la página sin retrasos.
- Rendimiento Global: Indica cuándo la página está completamente funcional y lista para el uso.
Total Blocking Time (TBT)
El Total Blocking Time mide la cantidad de tiempo total entre el FCP y el TTI durante el cual el hilo principal estuvo bloqueado el tiempo suficiente para evitar la respuesta de entrada. Un TBT bajo indica que la página es más responsiva.
Por qué es importante:
- Interactividad: Un TBT bajo mejora la responsividad de la página.
- Fluidez: Reduce los retrasos que pueden frustrar a los usuarios al interactuar con la página.
Time to First Byte (TTFB)
El Time to First Byte mide el tiempo que tarda el navegador en recibir el primer byte de respuesta desde el servidor. Un TTFB bajo indica que el servidor está respondiendo rápidamente a las solicitudes.
Por qué es importante:
- Rendimiento del Servidor: Un TTFB bajo indica un servidor rápido y eficiente.
- Velocidad de Carga: Afecta directamente la velocidad inicial de carga de la página.
Interaction to Next Paint (INP)
El Interaction to Next Paint mide la latencia de la entrada del usuario, es decir, el tiempo que tarda el navegador en procesar cualquier interacción del usuario y pintar el siguiente cuadro.
Por qué es importante:
- Responsividad: Un INP bajo asegura que las interacciones del usuario se manejen rápidamente.
- Experiencia de Usuario: Mejora la fluidez de la interacción, haciendo que la página se sienta más rápida y reactiva.
¿Cómo medir la situación de mis Core Web Vitals?
Tienes varias herramientas para medir tus Core Web Vitals, pero debes entender una cosa: Estas métricas Google las obtiene a través de estudios de campo. Es decir, extrayendo datos en masa de Google Chrome. Tú no tienes esa posibilidad.
Así, en la mayoría de las herramientas (incluso las oficiales), lo que obtendrás es una aproximación.
La única forma de obtener los datos REALES tal y como los obtiene Google, es acudiendo a Search Console cuando tu web ya tenga suficiente tráfico como para que Google haya podido obtener datos de muestra.
Es por ello que, en algunas ocasiones, te encontrarás con que las métricas te dicen una cosa y Search Console te dice otra. Esto se debe a la discrepancia entre la simulación y los datos de campo reales.
Para ello, te dejo por aquí los Conceptos básicos sobre las Métricas web principales y los resultados de búsqueda de Google y un Informe de «Métricas web principales».
Herramientas para medir las Core Web Vitals
SEARCH CONSOLE
Google Search Console proporciona informes detallados sobre el rendimiento de las Core Web Vitals para las páginas de un sitio web que están indexadas por Google.
En la sección de «Experiencia de la página» puedes encontrar información sobre LCP, FID y CLS.
Cómo usarlo:
- Inicia sesión en Google Search Console.
- Selecciona la propiedad de tu sitio web.
- Ve a la sección «Experiencia de la página» o «Core Web Vitals».
- Revisa los informes que muestran las métricas de las páginas agrupadas por estado (bueno, necesita mejora, pobre) y recibe recomendaciones para mejorar.
PAGESPEED INSIGHTS
PageSpeed Insights analiza el contenido de una página web y proporciona sugerencias específicas para mejorar la velocidad de carga y la experiencia del usuario. Esta herramienta mide LCP, FID y CLS, ofreciendo tanto datos de laboratorio como datos de campo.
Cómo usarlo:
- Visita PageSpeed Insights.
- Introduce la URL de la página web que deseas analizar.
- Revisa el informe que muestra las métricas de rendimiento y Core Web Vitals, junto con recomendaciones para mejorar.
WEBPAGETEST
WebPageTest permite realizar pruebas detalladas del rendimiento de una página web desde diferentes ubicaciones y navegadores. Proporciona información sobre LCP, FID y CLS, además de otras métricas de rendimiento.
Cómo usarlo:
- Accede a WebPageTest.
- Introduce la URL de la página web que deseas probar.
- Configura las opciones de prueba (ubicación, navegador, conexión).
- Ejecuta la prueba y revisa los resultados detallados, incluyendo las Core Web Vitals.
GTMETRIX
GTmetrix ofrece un análisis detallado del rendimiento de la página web, incluyendo las Core Web Vitals.
Proporciona recomendaciones específicas para mejorar las métricas de rendimiento y la experiencia del usuario.
Cómo usarlo:
- Visita GTmetrix.
- Introduce la URL de la página web que deseas analizar.
- Revisa el informe que muestra las métricas de rendimiento, Core Web Vitals, y sugerencias para optimización.
Lighthouse
Lighthouse es una herramienta automatizada de auditoría que se ejecuta en Chrome. Mide el rendimiento, accesibilidad, SEO, y otras métricas, incluyendo las Core Web Vitals.
Cómo usarlo:
- Abre Google Chrome y visita la página web que deseas analizar.
- Presiona F12 para abrir las DevTools y selecciona la pestaña «Lighthouse».
- Configura la auditoría según tus necesidades y haz clic en «Generate report».
- Revisa el informe que incluye las Core Web Vitals y otras métricas.
Chrome UX Report
El Chrome User Experience Report (CrUX) es una base de datos pública de métricas de experiencia de usuario recogidas a partir de usuarios reales de Chrome.
Proporciona datos de campo sobre las Core Web Vitals.
Cómo usarlo:
- Accede a la documentación de CrUX para obtener detalles sobre cómo consultar los datos a través de BigQuery.
- Utiliza la API de CrUX para obtener informes personalizados sobre las Core Web Vitals para tu sitio web.
Chrome DevTools
Chrome DevTools es un conjunto de herramientas de desarrollo integradas en el navegador Chrome que permite a los desarrolladores inspeccionar y optimizar el rendimiento de una página web.
Cómo usarlo:
- Abre Google Chrome y visita la página web que deseas analizar.
- Presiona F12 para abrir las DevTools.
- Ve a la pestaña «Performance» para grabar una sesión de rendimiento y analizar las Core Web Vitals.
- Revisa los resultados para identificar problemas relacionados con LCP, FID y CLS.
Extension Web Vitals para Chrome
La extensión Web Vitals para Chrome permite medir las Core Web Vitals en tiempo real mientras navegas por cualquier página web.
Cómo usarlo:
- Instala la extensión Web Vitals desde la Chrome Web Store.
- Una vez instalada, visita cualquier página web y haz clic en el icono de la extensión para ver las métricas LCP, FID y CLS en tiempo real.
- Utiliza esta información para identificar y solucionar problemas de rendimiento.
Estas herramientas son esenciales para evaluar y mejorar el rendimiento de las Core Web Vitals, asegurando una mejor experiencia de usuario y un mejor posicionamiento en los resultados de búsqueda de Google.
Como puedes ver, las Core Web Vitals son fundamentales en el SEO On Page de cualquier web. Conviene que las trabajemos y consigamos pasar todos los tests que Google pone a nuestra disposición en sus diferentes herramientas.
¡Es la mejor forma de conseguir el mejor SEO On Page a nivel técnico!
Un comentario
Excelente artículo,
Ahora ando aprendiendo todo lo que es mejorar la velocidad de la web, por eso valoro el tiempo que te has dedicado en brindar esta valiosa información, y lo mejor, que encontré tu blog en google 🙂