El deseo de Google es optimizar y mejorar los resultados que muestra a los usuarios. En línea con estos esfuerzos, Google ha anunciado que las métricas web principales constituirán un factor de posicionamiento a partir de mayo de 2021.
En este artículo te explicaremos qué son estas métricas, cómo medirlas y cómo optimizar tu sitio web siguiendo prácticas adecuadas. Además, incluiremos nuestra experiencia en la optimización de este sitio web obteniendo los siguientes resultados:
Resultados en dispositivo de escritorio:
Resultados en dispositivo móvil:
¿En qué consisten las métricas web principales?
Las métricas web principales o Core Web Vitals son un conjunto de indicadores que evalúan la experiencia del usuario a la hora de cargar una página web en un dispositivo de escritorio o móvil.
A estas alturas, todo el mundo conoce la importancia del rendimiento de un sitio web. Cuanto más rápido, mejor, pero no basta con tener una buena puntuación en el PageSpeed Insights de Google o en GTMetrix.
Estos indicadores han sido creados para centrarse en lo más importante: la velocidad de carga de una página (LCP), el tiempo de respuesta (FID) y la estabilidad visual (CLS).
- Largest Contentful Paint (LCP): mide la velocidad de carga percibida por el usuario al calcular el tiempo que tarda en aparecer el elemento principal de la página. El valor ideal de LCP es menor a 2,5 segundos.
- First Input Delay” (FID): mide el tiempo que tarda una página en permitir la interacción del usuario. Es decir, cuánto tiempo debe esperar un lector para hacer “sroll” o clic en un elemento, como un botón. El valor ideal de FID es menor a 100 milisegundos o 0,1 segundos.
- Cumulative Layout Shift (CLS): mide la estabilidad visual o los cambios inesperados. Aquellas páginas en las que se cargan anuncios desplazando el contenido de su sitio pueden resultar molestas para el usuario a la hora de continuar la lectura o de querer hacer clic en un enlace. Este indicador también puede verse afectado por la carga de fuentes que cambian de tamaño o imágenes que no tienen las dimensiones bien definidas. El valor ideal de CLS es menor a 0,1 segundos.
¿Cómo se calculan las métricas web principales?
La forma más sencilla de medir estos indicadores es mediante el uso de PageSpeed Insights o de una extensión de Chrome. Si tienes un sitio web muy grande y quieres medir distintos tipos de páginas, puedes crear un panel CrUX, utilizar Sistrix (un rastreador de sitios web que interpreta el sitio como si fuese un usuario) o Google Analytics.
Entendiendo las métricas
La herramienta PageSpeed Insights de Google muestra toda una tabla dedicada a estas métricas. Es muy intuitiva, ya que hace uso de los colores (rojo para “malo” y verde para “bueno”).
Una vez que empieces a analizar tu sitio web, te irá haciendo sugerencias respecto a cómo optimizar cada página en concreto. Por ejemplo, en nuestro caso nos dice “elimina el CSS inútil” (“remove unused CSS”); el motivo es que utilizamos Elementor para la creación de nuestras páginas y eso añade un montón de estilos de todas nuestras plantillas de página.
Nueva extensión de Chrome
Esta extensión medirá y destacará los tres indicadores clave de las métricas web principales y te hará saber qué elementos contribuyen a los resultados y cómo arreglarlos. También registrará los elementos HTML que se movieron inesperadamente en el diseño de página. Descárgate la extensión aquí.
Crea un panel de CrUX
Te animamos a que leas el artículo de Sam Underwood acerca de cómo crear un panel de CrUX para llevar un registro de tus proyectos y los sitios web de tus clientes en Data Studio aquí.
Este es el resultado después de crear una copia de la plantilla del sitio de Key Content:
Medir con Sistrix
Añade tu dominio, accede a “Structure> Core Web Vitals” y encontrarás los resultados más recientes:
Entonces podrás observar la tendencia de evolución de tu sitio con diferentes colores, empleados para identificar con facilidad cuando algo marcha mal o cuándo la optimización está funcionando bien.
También puedes observar el rendimiento por países:
Con toda esta información será fácil crear tu propio panel para hacer un seguimiento de los resultados de:
- los sitios web de tus clientes,
- tus proyectos y
- los sitios web de la competencia.
A continuación, se muestra la competencia en el sector de la belleza:
Utilizando Google Analytics
Matteo Zambon, de TagManagerItalia, escribió una guía estupenda sobre cómo llevar un registro de las métricas web principales con Google Analytics, utilizando Google Tag Manager aquí.
En seis pasos, tú o tu desarrollador web podéis implementar el código necesario para recopilar datos de tus usuarios. Una vez que hayas empezado a obtener esta información, puedes pasar a la acción y comenzar a optimizar tu sitio web.
Cómo mejorar tus resultados en las métricas web principales de Google
Las siguientes recomendaciones te ayudarán a mejorar la velocidad de tu página, así como la experiencia final del usuario en tu sitio web:
Mejorar el indicador LCP:
- Mejora el tiempo de respuesta del servidor.
- Elimina las funciones de bloqueo de JavaScript y CSS.
- Reduce el tiempo de carga de los recursos.
- Optimiza la interpretación de elementos de “front-end”.
Optimiza el indicador FID:
- Reduce los elementos JavaScript y el tiempo de ejecución.
- Minimiza el trabajo del elemento principal de la página.
Reduce el indicador CLS:
- Incluye siempre las dimensiones exactas de las imágenes.
- Si tu sitio utiliza carga diferida para las imágenes, asegúrate de que el intercambio no moverá de sitio los elementos.
- Si tu sitio utiliza fuentes personalizadas, valora pasarte a “font-display:swap for block”.
- Si tu sitio utiliza anuncios, asegúrate de delimitar un tamaño y zona específicos para ellos hasta que se carguen.
Más información sobre cómo mejorar tus resultados en las métricas web principales desde Techbeatly.
Mejora tu sitio de WordPress con un único “plugin”
Llevo más de una década trabajando con WordPress y mejorar la velocidad de la página es muy difícil. He probado con muchos “plugins” de caché (WP Fastest Cache, WP Rocket, WP Super Cache, W3 Total Cache y muchos más), así como con servicios CDN (StackPath, Fast.io, KeyCDN, CloudFront…) y una larga lista de optimizadores de “plugin” de imagen.
Y entonces intenté con NitroPack (es una mezcla de caché avanzado, CDN, imagen y optimizador de HTML): funciona sin más. No tenemos ningún acuerdo comercial con NitroPack, simplemente es nuestra opinión más honesta.
Antes de NitroPack, nuestros resultados eran malos. Utilizamos Elementor para el diseño, que hace que el sitio web tenga buen aspecto, pero nos sale caro en términos de tiempo de carga. Estábamos utilizando cinco “plugins” para mejorar la velocidad del sitio, pero ahora los hemos eliminado todos y solo usamos NitroPack. Es gratis y funciona rapidísimo.
Conclusión
Ponte con los deberes y no esperes hasta mayo de 2021 para optimizar tu sitio web. Empieza poco a poco, mide, prueba y prioriza aquello que te pueda proporcionar mayores resultados.
Reducir los elementos JavaScript y optimizar las imágenes te puede ayudar a ganar algún segundo en velocidad y a reducir el tamaño total de la página. Elegir un servidor mejor, cambiar a contenido estático con tecnologías como Jamstack o implementar una red de distribución de contenidos (CDN por sus siglas en inglés) pueden servir de gran ayuda.
