Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

¿Qué son Core Web Vitals o métricas web principales? Y cómo optimizarlas

WEB-VITALS-DESTACADA ¿Qué son Core Web Vitals o métricas web principales? Y cómo optimizarlas

Google introdujo las Core Web Vitals, una nuevas métricas web principales para evaluar el nivel de rendimiento y usabilidad de una página web. El propósito es tener un sitio web saludable; es decir que cargue rápido (todas sus páginas) y en el que se tenga una buena experiencia de usuario. Lee, para más información, la página oficial de Google.

En este artículo vamos a introducirte en el tema y vamos a ver qué se puede hacer para optimizar una página que, en principio, tiene una mala puntuación Core Web Vitals.

¿Qué es el rendimiento de una página web y qué hay que tener en cuenta para optimizarlo?

Cuando hablamos de rendimiento de una página web nos referimos, normalmente, a la velocidad de carga (en media) de todas sus subpáginas. Por ejemplo, podemos decir que un sitio web con una velocidad de carga media de menos de 3 segundos posee un mal rendimiento. Pero el rendimiento también tiene que ver con la usabilidad o experiencia de usuario, ya que hay muchos factores implicados que están relacionados.

Hasta ahora para optimizar el rendimiento había que tener en cuenta los siguientes elementos:

  • Rapidez de carga. Las páginas deben cargar rápido en móviles y escritorio. Cuando una página tarda más de 3 segundos en cargar, hay más probabilidades de que el usuario la abandone; y, lo que es peor, que no regrese nunca. Hay muchos factores que provocan páginas lentas. Por ejemplo, imágenes mal codificadas (con muchos KBs de peso) pero también el uso de recursos externos que requieren una carga (como, por ejemplo, las fuentes de Google; widgets de redes sociales; scripts como Cookiebot, etc.).
  • Mobile Friendly. Un sitio web estará optimizado para los dispositivos móviles, no solo cuando sea rápido cargando sus páginas; sino también si la usabilidad y experiencia de usuario son buenas. El sitio tiene que ser responsive pero además no debe tener fallo en el diseño que afecte a la usabilidad. Por ejemplo, botones demasiado grandes o el denominado «cambio de diseño acumulativo» que se explica más adelante porque es una de las métricas web principales o Core Web Vitals que ha introducido Google.
  • HTTPS. Este elemento tiene que ver con la seguridad pero también con la velocidad de carga de un sitio web. Hoy en día, un sitio web no solo debe estar optimizado en rendimiento (rapidez de carga y mobile-friendly) sino también en seguridad. Y el protocolo HTTPS es obligatorio.

La implantación de las nuevas métricas web o Web Vitals, supone añadir quizá un nuevo elemento a los tres anteriores, aunque lo que miden esas tres métricas web principales no es ni más ni menos que la velocidad de carga y el nivel de mobile-friendly.

WPO y optimización del rendimiento

Hasta ahora, lo que sabíamos, y lo que se introduce con Core Web Vitals no va a hacer cambiar demasiado el escenario, es que existen una serie de técnicas denominadas WPO (Web Performance Optimization) con las que podemos obtener un sitio web optimizado en rendimiento.

Aquí tienes una guía completa sobre cómo optimizar una web de WordPress: Cómo acelerar WordPress y optimizar el rendimiento y hacer que tu sitio web cargue más rápido en móviles y ordenador – Con el método Blogpocket.

Herramientas para medir el rendimiento de un sitio web

En el Método Blogpocket se recomienda GTmetrix y PageSpeed Insights como herramientas para medir el nivel de optimización del rendimiento de una página web.

Pero debes tener en cuenta que GTmetrix nos da una idea, bastante certera, del nivel de rendimiento de una web, aunque desde una ubicación concreta (que puedes elegir si te registras). Para obtener un resultado más exacto puedes probar Fast Or Slow.

E incluso, si lo que se pretende es tomar una foto muy cercana a la realidad, solo de la velocidad de carga, se puede usar la consola javascript en Google Chrome.

Lo que nos proporciona PageSpeed Insights, incluyendo las nuevas métricas web principales o Core Web Vitals, es una visión todavía más exacta pero relacionada más con la usabilidad que solo con la velocidad de carga.

Lo que vamos a ver, con un ejemplo, en este post es que resultados arroja GTmetrix y PageSpeed Insights para una página de ejemplo con mala puntuación en Web Vitals; y qué podemos hacer para mejorarla sin rasgarnos las vestiduras. Debes tener presente que las nuesvas métricas web principales incluyen conceptos quizá demasiado técnicos para la mayoría de los mortales.

Vamos a ver primero cuáles son esas 6 métricas Core Web Vitals.

Las nuevas métricas Core Web Vitals

Según puedes leer en documentación oficial de Google, las métricas web principales (Core Web Vitals) son el subconjunto de métricas que se aplican a todas las páginas web, deben ser medidos por todos los propietarios de sitios y aparecerán en todas las herramientas de Google. Cada una de las métricas web principales representa una faceta distinta de la experiencia del usuario, se puede medir en el campo y refleja la experiencia del mundo real de un resultado crítico centrado en el usuario.

Las métricas que forman Core Web Vitals evolucionarán con el tiempo. El conjunto actual se centra en tres aspectos de la experiencia del usuario: carga , interactividad y estabilidad visual , e incluye las siguientes métricas (y sus respectivos umbrales).

Renderizado del primer elemento con contenido (FCP o First Contentful Paint)

El primer renderizado con contenido indica el momento en el que se renderiza el primer texto o la primera imagen

Una buena experiencia de usuario es 0,9 segundos o menos.

Más información aquí y cómo mejorar esta métrica.

Índice de velocidad (Speed Index)

El índice de velocidad indica la rapidez con la que se puede ver el contenido de una página.

Una buena experiencia de usuario es de 1,3 segundos o menos menos. Aprende más.

Carga (LCP o Largest Contentful paint, renderizado del mayor elemento con contenido)

La métrica Largest Contentful Paint indica el tiempo que se tarda en dibujar el texto o la imagen de mayor tamaño.

Una buena experiencia de usuario es 1,2 segundos o menos. Aprende más.

Interactividad (FID o First Input Delay, latencia de la primera interacción)

El tiempo hasta que está interactiva es el tiempo que tarda una página en ser totalmente interactiva.

Una buena experiencia de usuario es de 2,5 segundos o menos. Aprende más.

Tiempo total de bloqueo (TBT o Total Blogcking Time)

Suma de los periodos, en milisegundos, entre FCP y Time to Interactive cuando la duración de la tarea excede los 50 ms.

Una buena experiencia de usuario es de 150 msegs. o menos. Aprende más.

Estabilidad visual (CLS o Cumulative Layout Shift, cambios de diseño acumulados)

Los cambios de diseño acumulados miden el movimiento de los elementos visibles dentro de la ventana gráfica.

Una buena experiencia de usuario es una puntuación de 0,1 o menos. Aprende más.

Estudio de caso: optimización de las Core Web Vitals para una página con mal resultado

En primer lugar, es necesario aclarar que la información de las Core Web Vitals que muestra Google PageSpeed Insights corresponden a los datos de campo de los últimos 30 días y así se evalua si una determinada subpágina supera o no la evaluación del informe. Esto es importante de subrayar porque puedes llevar a cabo algunas mejoras y subir la puntuación total en porcentaje pero no ver reflejado ningún cambio en los valores de las métricas web principales (FID, LCP y CLS).

Por otra parte, hay que saber que Google Search Console ofrece ya las subpáginas que generan una mala puntuación en las métricas web principales (Web Vitals).

Para ello, hay que acceder a la opción Métricas web principales dentro del apartado Mejoras.

Los datos proceden del informe Experiencia de Usuario de Chrome, donde se muestra información sobre el uso real que hacen de tu sitio web visitantes de todo el mundo; y está dividido en móviles y ordenador.

Las URLs se dividen en «pobres», «necesitan una mejora» y «buenas». En general, se observa que los peores resultados se dan en el apartado «móviles» ya que -como se indicó al principio- las nuevas Web Vitals se enfocan más en la usabilidad y es en los dispositivos móviles donde más se acucian problemas de interactividad y estabilidad visual.

Vamos a «abrir informe» en el apartado «móviles» y en los detalles vamos a fijarnos en las URLs «pobres».

Recordemos que aquí vamos a encontrar tres posibles tipos de problemas y que indican el estado de las tres métricas web principales.

  • LCP o carga (renderizado del mayor elemento con contenido): cuánto tarda la página en renderizar el mayor elemento visible.
  • FID o interactividad (latencia de la primera interacción): cuánto tarda la página en responder a las acciones de los usuarios.
  • CLS o estabilidad visual (cambio de diseño acumulado): cuánto cambia la interfaz de la página mientras se carga.

Haciendo clic en las filas de cada tipo de problema, encontramos las URLs que posee alguno de estos problemas; es decir que -a grandes rasgos- tiene, por ejemplo, un mal rendimento en velocidad (LCP), cambios en el diseño mientras se carga la página (CLS), etc.

Vamos a pasar primero GTMetrix a una de las URL encontradas en el apartado «pobres» (ver imagen siguiente) aunque ya se puede adelantar que si las páginas tienen un buen número de imágenes, gifs animados, vídeos, llamadas a recursos externos (como Google Analytics, etc.), eso probablemente afecte a la carga y a la estabilidad visual.

gtmetrix-web-1-1024x588 ¿Qué son Core Web Vitals o métricas web principales? Y cómo optimizarlas
Los valores de las Core Web Vitals para una URL marcada como «pobre» en Search Console.

Con el análisis de GTmetrix, en la pestaña, «performance» veremos el estado de las métricas Core Web Vitals. En principio tendríamos que atender para mejorar los apartados en naranja o en rojo. ¿Cómo sabemos el detalle de dichos problemas? Yendo a la pestaña «Structure», donde podremos fijarnos en las secciones marcadas a partir de «Med-Low» o peores con el objetivo de mejorar el grado o nivel de optimización.

gtmetrix-web-2-1024x509 ¿Qué son Core Web Vitals o métricas web principales? Y cómo optimizarlas
Detalle en la pestaña «Structure». Es aquí dónde obtendremos información concreta para actuar. Por ejemplo, optimizando imágenes o reduciendo el uso de llamadas a recursos externos.

Se deben identificar, haciendo clic en cada apartado, los recursos que no son imprescindibles para el funcionamiento de la página. Por ejemplo, un vídeo o un tweet incrustado no son imprescindibles. Google Analytics o el script para bloquear las cookies tampoco. Sin embargo, alguno de ellos puede ser necesario. Es cuestión de valorar y equilibrar funcionalidades y optimización del rendimiento. A veces, será tan simple como optimizar las imágenes. Y siempre, empezar a trabajar con una web inicial súper optimizada. Este es el fundamento del Método Blogpocket.

Los resultados de GTmetrix se deben complementar con los de PageSpeed Insights, pero teniendo en cuenta lo siguiente.

Los datos recogidos durante el anterior periodo de 28 días indican que, en conjunto, la experiencia de las páginas servidas desde el origen pueden no supera la evaluación del informe Métricas web principales. Para ver sugerencias que se ajusten a cada página, hay que analizar URLs de páginas concretas.

En el apartado de «Oportunidades» encontraremos las áreas concretas donde actuar prioritariamente.

Es aquí donde podemos encontrar puntos a optimizar, sobre todo en los puntos en los que más ahorro se puede conseguir (líneas rojas horizontales).

Por ejemplo:

  • Posponer la carga de imágenes que no aparecen en pantalla. Hay un plugin de WordPress específico para hacer esto y en SiteGround solo es preciso activar un switch dentro del plugin SG Optimizer.
  • Usar formatos de vídeo para incluir contenido animado. Significa que hay que sustituir los gifs animados por vídeos o, si dichos gifs no son estrictamente necesarios, simplemente eliminarlos.
  • Usar un tamaño adecuado para las imágenes. En este caso el recurso afectado es el mismo gif.

Hay que tener en cuenta que arreglar esos problemas nos llevará a una mejor puntuación total en PageSpeed Insights y, aún así, las métricas web principales (Web Vitals) quedarse igual.

Una vez recopilados todos los puntos en los que se puede actuar, teniendo en cuenta que habrá recursos prescindibles pero necesarios (como, por ejemplo, Cookiebot y Google Analytics), lo resumiríamos así:

Recuerda que, como se indicó anteriormente, los valores de las métricas no cambiarán inmediatamente a pesar de que apliques mejoras, porque son sobre los últimos 30 días. Habría que esperar 30 días para ver los cambios correspondientes.

Conclusiones sobre métricas Core Web Vitals

Con este post, espero que hayas comprendido lo que significa medir el rendimiento de una página web. La novedad es que Google ha introducido variables que ha denominado «Métricas web principales» y en resumen:

  • Search Console te descubre las URLs con problemas en alguna de las tres métricas web principales.
  • Las métricas web principales son: Carga, Interactividad y Cambios de diseño acumulados.
  • Para optimizar y mejorar la puntuación total del rendimiento tanto en GTMetrix como en PageSpeed Insights, aplica el Método Blogpocket WPO. En general, el Método Blogpocket WPO se basa en el uso de un buen hosting con sistema de almacenamiento en caché propio y la configuración de los plugins correspondientes que conlleva la gran mayoría de las optimizaciones necesarias. Además, debes optimizar imágenes y elimina recursos externos con código incrustrado, widgets, sliders, gifs animados, etc. Y activa la carga diferida de imágenes.

Hemos incluido los links a las guías de Blogpocket donde se explican todos los detalles, paso a paso del Método Blogpocket par optimizar el rendimiento de una página web de WordPress.

Espero tus comentarios.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de acambronero

Copia y pega esta URL (https://www.blogpocket.com/?p=63615) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

2 respuestas a «¿Qué son Core Web Vitals o métricas web principales? Y cómo optimizarlas»

  1. Edu

    Interesante artículo, pero hay algo que sigo sin encontrar explicación.

    Como es posible que mi web tenga 2000 páginas indexadas, y en el apartado de METRICAS WEBS PRINCIPALES me diga que hay 0 malas, 0 necesitan mejora, 700 buenas. ¿Donde están las otras 1300?

    1. Las 700 buenas son en realidad URLs rápidas o que cumplen un determinado criterio. El informe no tiene por qué mostrar todas las indexadas. Hay 1.300 que no cumplen los criterios. Más información: https://support.google.com/webmasters/answer/9205520#status_explanation

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido