Skip to toolbar

Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas
WEB-VITALS-DESTACADA Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

Google ha introducido tres nuevas métricas web principales ( Core Web Vitals ) 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 cargarse 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.).
  • Optimizado para móviles . 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 -amistoso.

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 optimizar WordPress paso a paso – Guía completa

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. En la guía sobre cómo optimizar WordPress paso a paso, se explica cómo usar ambas, incluido un vídeo sobre cómo medir la velocidad de un sitio web con GTMetrix.

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 Rápido o lento .

E incluso, si lo que se pretende es tomar una foto muy cercana a la realidad, 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 certera 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 nuestras nuestras métricas web principales incluyen conceptos quizá demasiado técnicos para la mayoría de los mortales.

Vamos a explicarlo a continuación para que todo el mundo lo pueda entender 😉

Las tres nuevas métricas web (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 cara 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 para 2020 se centra en tres aspectos de la experiencia del usuario: carga , interactividad y estabilidad visual , e incluye las siguientes métricas ( y sus derechos umbrales).

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

Mide el tiempo de carga del contenido. Para proporcionar una buena experiencia de usuario, el LCP debe estar dentro de los 2.5 segundos posteriores al inicio de la carga de la página. El concepto es muy parecido a lo que siempre hemos entendido como velocidad de carga.

A continuación, un documento para muy entendidos: Optimizar la pintura con contenido más grande .

Para los mortales, hay que tratar de optimizar imágenes, eliminar en la medida de lo posible llamadas a recursos externos y ahorrar elementos poco relevantes siempre que se pueda (vídeos incrustados, sliders, widgets, gifs, etc.) métricas web principales es, quizás, sobre la que más se puede actuar para optimizar el rendimiento.

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

Mide la interactividad . Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos .

Por interactividad se entiende el tiempo transcurrido entre que el usuario interacciona (por ejemplo, un clic) hasta que el navegador da respuesta a esa interacción.

Aquí el documento para expertos para optimizar el FID: Optimizar el primer retardo de entrada

Sin complicarte la vida, la causa principal de un FID deficiente es la ejecución pesada de JavaScript . Optimice la forma en que JavaScript analiza, compila y ejecuta en su página web reducirá directamente el FID. Si tienes en cuenta que normalmente un sitio web ejecuta mucho JavaScript, entenderás que va a ser difícil disminuir esta métrica. Sin ir más lejos, si nos fijamos en la página home de Blogpocket que está muy optimizada; en el 85% de las cargas de esta página, el valor de la métrica FID (interactividad) es inferior a 100 ms, lo que indica que tiene un buen rendimiento. Esto significa que, por lo general, un buen resultado en GTMetrix [la home de Blogpocket arroja A (92%) / A (92%)] implicará también, en general, un buen FID.

Hay dos acciones que están contempladas en el Método Blogpocket y que reducen la cantidad de JavaScript ejecutado en una página web:

  • Minificar y comprimir archivos JavaScript
  • Aplazar JavaScript no utilizado

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

Mide la estabilidad visual . Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0.1.

Este defecto afecta directamente en la usabilidad y se produce cuando los elementos de una página van cambiando de sitio a medida que el contenido va apareciendo en la pantalla. Es muy molesto y provoca a menudo errores porque se hace clic en enlaces que no querías.

Hay una imagen muy reveladora de este problema en el siguiente documento para entendidos: Optimizar el diseño acumulativo Mayús .

Para la gente corriente, solo hay que entender que es probable que se pueda hacer poco para mejorar esta puntuación, sobre todo si usamos constructores visuales o temas de WordPress mal codificados. Y también si añadimos imágenes sin dimensionar y widgets externos que pueden provocar una mala estabilidad visual.

En general, las siguientes son las causas principales que provocan este problema:

  • Imágenes sin dimensiones.
  • Anuncios, incrustaciones e iframes sin dimensiones
  • Contenido inyectado dinámicamente

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

En primer lugar, es necesario aclarar que la información de las Web Vitals que muestra Google PageSpeed ​​Insights correspondiente a los datos de campo de los últimos 30 días y así se evalúa 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 URL 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 indica 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 una URL que posee los dos problemas LCP y CLS; es decir que -a grandes rasgos- tiene un mal rendimiento en velocidad y hay problemas de cambios en el diseño mientras se carga la página. Vamos a pasar primero GTMetrix a dicha URL (ver imagen siguiente) aunque ya se puede adelantar que tiene un buen número de imágenes y un gif animado, lo que probablemente afecte a la carga y a la estabilidad visual.

 gtmetrix-web-vitals-1-1024x599 Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

De lo que sabemos por el Método Blogpocket, de este análisis se desprende de las siguientes optimizaciones:

  • Hay una imagen que está redimensionada en el HTML o el CSS desde 900 × 305 a 350 × 119. Si se sirve la imagen ya escalada se obtendrá un 84% de reducción.
  • Hay problemas de apalancamiento del almacenamiento en caché del navegador porque se usan dos recursos externos: Cookiebot y Google Analytics.
  • 64,1 KB de JavaScript se analiza durante la carga inicial de la página. Sería bueno aplazar el análisis de JavaScript para reducir el bloqueo de la representación de la página. Pero este problema se da por el uso del recurso externo Cookiebot.
  • Google Analytics no especifica un valor o de caché y no se puede actualizar de manera eficiente. Especificar las instrucciones necesarias para habilitar la validación de caché para este recurso redundaría en una mejorar de la puntuación.
  • Minificar el CSS reduciría el tamaño de ciertos recursos un 2% pero estos recursos tienen que ver con las fuentes de Google.
  • Minificar archivos javascript reduciría algunos recursos un 1% pero estos recursos están relacionados con Google Analytics, los emojis de WordPress y Cookiebot.
  • Hay un par de imágenes que se pueden mejorar consiguiendo un 3% de reducción en el peso de KBs.

Vámonos ahora a PageSpeed ​​Insights y veamos qué valores de Core Web Vitals obtenemos.

 PageSpeed-web-vitals-2-1024x517 Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

Una vista de pájaro (ver imagen superior) se observa que la página tiene margen de mejora, sobre todo en el apartado de CLS. En el 46% de las cargas de esta página, el valor de la métrica «Cambios de diseño acumulados» (CLS) es superior a 0,25, lo que indica que tiene un rendimiento deficiente.

La velocidad de carga es buena y la interactividad aunque no es óptima se puede considerar aceptable.

Pero hay que fijarse en la sección de «Oportunidad» (ver imagen siguiente).

 PageSpeed-web-vitals-3-1024x622 Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

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

  • 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 interruptor 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 Cookiebot y Google Analytics son necesarios, lo resumimos así:

De esta manera, volvemos a evaluar en GTMetrix el estado del rendimento y vemos lo siguiente (ver imagen siguiente).

 gtmetrix-web-vitals-2-1024x577 Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

El nivel de mejora es mínimo pero apreciable, en el nuevo informe de GTMetrix, tras las optimizaciones realizadas.

Y, finalmente (ver imagen siguiente), vemos un porcentaje total mucho mejor del rendimiento, debido a las mejoras realizadas.

 PageSpeed-web-vitals-5-1024x618 Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

Y como se indicó anteriormente, los valores de las métricas no han cambiado porque son sobre los últimos 30 días. Habría que esperar 30 días para ver los cambios correspondientes.

Otras Web Vitals

Existen otras métricas vitales, además de las vistas anteriormente. En concreto, la FCP también aparece en los Datos de campo de PageSpeed ​​Insights y representa el primer renderizado con contenido. FCP mide el tiempo desde el momento en que la página comienza a cargarse hasta que cualquier parte del contenido de la página se muestra en la pantalla. Para esta métrica, «contenido» se refiere a texto, imágenes (incluidas imágenes de fondo), elementos SVG o elementos no blancos.

Conclusiones sobre métricas web principales

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 tres variables que ha denominado «Métricas web principales» (Web Vitals) y en resumen:

  • Las nuevas métricas web son: Carga, Interactividad y Cambios de diseño acumulados.
  • Junto a esas, está también el primer renderizado con contenido FCP.
  • Search Console te descubre las URLs con problemas en alguna de las tres métricas web principales.
  • 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 puesta en marcha de un paquete de complementos que conlleva la gran mayoría de las optimizaciones necesarias. Además, debes optimizar imágenes y eliminar recursos externos con código incrustrado, widgets, sliders, gifs animados, etc. Y activa la carga diferida de imágenes.

Hemos incluido los enlaces 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.

¿Estás buscando hosting?

SiteGround es el hosting en el que está alojado Blogpocket . Consigue un alojamiento web de alto rendimiento, seguridad y optimización para WordPress .

BIG-SHOES-PODCAST Introducción a las nuevas métricas web principales de Google (Core Web Vitals) y cómo optimizarlas

Related Articles