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.
Tabla de contenidos
- WPO y optimización del rendimiento
- Herramientas para medir el rendimiento de un sitio web
- Las tres nuevas métricas web (Core Web Vitals)
- Estudio de caso: optimización de Web Vitals para una página con mal resultado
- Otras Web Vitals
- Conclusiones sobre métricas web principales
- ¿Estás buscando hosting?
¿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: 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. 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. De lo que sabemos por el Método Blogpocket, de este análisis se desprende de las siguientes optimizaciones: Vámonos ahora a PageSpeed Insights y veamos qué valores de Core Web Vitals obtenemos. 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). 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). 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). 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. 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. 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. 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: 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. SiteGround es el hosting en el que está alojado Blogpocket . Consigue un alojamiento web de alto rendimiento, seguridad y optimización para WordPress .
Estudio de caso: optimización de Web Vitals para una página con mal resultado
Otras Web Vitals
Conclusiones sobre métricas web principales
¿Estás buscando hosting?
