Las Core Web Vitals son las métricas que miden la velocidad de carga de tu web de distintas formas. Hace un tiempo eran metricas orientativas, con el tiempo han cobrado mayor importancia hasta llegar a un punto que es imprescindible tenerlas muy trabajadas. Las tres métricas principales son:
Largest Contentful Paint (LCP) o pintado del contenido principal, mide la carga. ¿Cuánto tarda en cargar el contenido principal de tu página? Esto se entiende como el tiempo que tarda en cargar el contenido principal el contenido que primero ve tu visitante. Tu LCP debería estar por debajo de los 2,5 segundos.
First Input Delay (FID) o retardo hasta la primera interacción, mide la interactividad del usuario. ¿Cuánto tarda tu página en ser interactiva? O sea, cuándo un visitante puede hacer clic en un botón u otro elemento. Tu FID debería estar por debajo de los 100 ms (este número reflejará el retardo en procesar la interacción).
Cumulative Layout Shift (CLS) o cambio acumulativo de diseño, mide la estabilidad visual. ¿Cuánto cambia visualmente tu contenido a medida que se carga? Por ponerte un ejemplo, si tu contenido cambia al llegar a tu página, aparece un cambio cuando se muestra un anuncio. Tu CLS debería estar por debajo de 0.1s
Objetivo:
El principal objetivo de estas métricas es conseguir una mejor experiencia de navegación para tus visitantes, evitando errores de usabilidad. Por este motivo una de las métricas mide el tiempo que pasa entre que aparece visible la web hasta que el usuario puede hacer click en alguna parte de la web. De esta forma se evitan los botones que aparecen transcurrido un tiempo y otros pop-up. Haciendo un mantenimiento web es probable que mejores, pero antes de ponerte a ello, debes entenderla.
¿Cómo mido las Core Web Vitals?
Existen varias herramientas o páginas donde medir las métricas en tu web. Aunque cada una tiene su propia forma de analizar sus datos, vamos a empezar primero por las de Google ya que es el que nos valora.
Pagespeed Insights es una herramienta de Google que nos permite analizar la velocidad de carga de cualquier URL, tanto para ordenador como para móvil, y además nos ofrece una serie de consejos para optimizar este resultado.
En Google Search Console podrás encontrar un apartado “Métricas Web Principales”. En este apartado encontrarás las tres métricas web principales, LCP , FID y CLS agrupadas por su puntuación.
Lighthouse es una extensión que contiene datos de Page Speed Insights y analiza más datos SEO de tu página. Una visión más completa de tu web que no está de más.
GTMetrix es otra herramienta para medir la velocidad de tu web de forma avanzada. La categorización se divide en su propio ranking GTmetrix Grade: Performance y Structure
donde A es lo mejor y E es lo peor. Por otra parte mide las Core Web Vitals. ¿Qué tiene de especial esta aplicación web? En la sección de Waterfal se desglosa la carga de elementos de menor a mayor tiempo, por lo que podrás ver que archivo específico puedes mejorar.
¿Cómo mejorar las métricas webs de velocidad en WordPress?
Google en realidad no está tan preocupado en las métricas de cuánto tiempo tarda tu web en cargar del todo, que es algo en lo que todos los webmasters estamos enfocados, por lo que debemos empezar el diseño de nuestras webs.
Una vez tengamos las páginas accesibles sin problemas críticos de renderizado será cuando debamos empezar a optimizar velocidades de carga y scripts innecesarios. Entre los primeros pasos deberían estar una correcta actualización y mantenimiento de WordPress, una optimización de imágenes y por último una revisión de plugins. Son los pasos más superficiales a realizar sin entrar en aspectos más técnicos
Buenas prácticas generales
- Un buen hosting, fundamental para la carga de tu web.
- Un tema bien diseñado, consistente y optimizado.
- Solo los plugins imprescindibles para no tener sobrecarga innecesaria.
- Comprimir todo el contenido posible.
- Entregar HTML estático mediante sistemas de caché y una CDN.
- Aplazar la carga de CSS y JavaScript.
- Minimizar y optimizar todos los códigos.
- Optimizar todas las imágenes y entregar formatos de nueva generación.
- Simplificar el diseño del sitio para facilitar la navegación uniforme y consistente.
- Precargar todos los recursos posibles y eliminar los no necesarios.
Plugins para WPO en WordPress
Para tener un WordPress muy optimizado hay que meternos en su código y hacer un desarrollo prácticamente a medida. Mientras no tengas este desarrollo a medida, te sugerimos estos plugins que te harán su función temporalmente. Los dividiremos en dos:
Cómo optimizar el largest contentful paint (LCP)
Lo más óptimo para optimizar esta métrica sería tener una web estática, realizada con HTML puro y cargaría en milésimas de segundo, pero como esto es complicado, recomendamos poner los mínimos efectos posibles en tu web. Esto lo conseguirás utilizando plugins de caché o con la caché de página de CloudFlare.
·Usar una CDN
·Eliminar el CSS y JavaScript que bloquee la visualización.
·Incrustar el CSS crítico dentro del código y aplazar la carga del CSS no crítico.
·Optimiza las imágenes a la hora de subirlas o comprimirla con un plugin como smush.
·Comprimir los contenidos mediante Gzip o Brotli.
·Aligerar en la medida de lo posible el contenido de la primera mitad de la página.
OPTIMIZAR EL FIRST INPUT DELAY (FID)
Aplicar técnicas de optimización de carga, principalmente de JavaScript para poder ver la primera mitad de tu web sin ninguna interferencia de carga.
·Aplazar la carga de JavaScript.
·Comprimir el JavaScript mediante Gzip o Brotli
·Minimizar el JavaScript.
OPTIMIZAR EL CUMULATIVE LAYOUT SHIFT (CLS)
Principales problemas con el CLS suelen tener que ver con:
·Imágenes sin dimensiones especificadas.
·Anuncios o incrustados sin dimensiones especificadas.
·Carga de fuentes en la web desde el servidor.
¿Cómo se usan y aplican las técnicas de las herramientas de medición de velocidad web?
Si bien es cierto que es complicado editar todos los problemas de carga que tiene la web, si que podemos mejorarlos. Muchas métricas hacen referencia al desarrollo de los archivos de tu tema de wordpress y eso si no eres un desarrollador no lo vas a cambiar. Pero en las que hacen referencia a archivos subidos, editores de temas o plugins, sí que podemos mejorarlas.
Plugins WPO de caché
Una de las mejores formas de mejorar la velocidad de carga de nuestra web es con un plugin de caché.
WP Rocket: Este plugin permite, con pocas y muy sencillas configuraciones, reducir al máximo los tiempos de carga. Además de su sencillez, WP Rocket apenas consume recursos en el servidor. La única desventaja de este plugin para WPO es que es de pago, por lo que si aún no has contemplado la opción de invertir en plugins para WordPress es posible que no sea el más indicado para ti.
WP Super Caché: Otro plugin perfecto para mejorar el WPO de una web desarrollada en WordPress. De fácil instalación y configuración, su único problema es que únicamente cuenta con función caché y CDN. A cambio, su modo ‘easy’ se encargará de configurar el plugin por ti para hacer que el sistema de caché empiece a funcionar cuanto antes.
W3 Total Caché. Aunque se trata de un plugin muy completo a nivel funcional, es igualmente complejo a nivel técnico. Así que, si no tienes experiencia en WordPress, no te recomendamos utilizar WP Total Caché.
Plugins para optimizar imágenes
No subir las imágenes comprimidas suele ser uno de los problemas más comunes en el rendimiento de un sitio web. Si las imágenes de nuestra web son demasiado grandes, la web tardará mucho en cargar (y también acabará con los megas de quienes la visitan). También es necesario que se definan las dimensiones de la web para la precarga.
Regenerate Thumbnails. Este plugin hace establecer unas dimensiones específicas en todas las miniaturas de tu WordPress. Además, avisa de aquellas miniaturas que no se están utilizando en la web para que las puedas eliminar.
Imsanity. Este plugin redimensiona en tamaño y peso de todas las imágenes, tanto si quieres cambiar su tamaño como si lo que quieres es reducir su peso. También puedes asignar manualmente unas medidas que se aplicarán a todas las imágenes subidas WordPress.
WP Smush. Este plugin aligera las imágenes, pero manteniendo la misma calidad que las originales. Además, permite comprimir tanto las imágenes alojadas en la página web como optimizar aquellas que se vayan subiendo más tarde. Permite un máximo de 50 imágenes en su versión gratuita
La experiencia de usuario no se puede analizar con una sola métrica
No es posible medir una buena experiencia de usuario solo utilizando una herramienta o una métrica, por eso cuando obtenemos los resultados de una herramienta, ya hay 3 métricas principales y otras 3 complementarias para que no dejemos pasar nada por alto.
Hay varias métricas implicadas, es cierto que lo más importante será la velocidad de carga global, mientras que en otras lo más relevante será la rápida interacción del usuario al aterrizar en la página.
Por ejemplo, nada más llegar el usuario a nuestra web queremos un LCP mínimo, para ofrecer una impresión favorable de velocidad y navegación, pero a la hora de obtener la conversión mediante un formulario o selección de productos adquirirá una mayor importancia el CLS, evitando introducir elementos que dificulten que el usuario haga clic o introduzca datos.
Valoraciones en función de “usuarios tipo”
Con la tecnología que hay hoy en día, cada usuario utiliza un dispositivo diferente, desde distintas ubicaciones, tamaños de pantalla, colores y conexiones, cambiantes a lo largo del día. Por este motivo hay que pensar que las métricas van a ser iguales para todos los usuarios pero no todos los usuarios van a ser iguales. La unificación es buena pero hay que valorar que se dan distintos escenarios.
Si mi web me carga rápido, también cargará rápido para los demás
Hilando con lo anterior, la realidad es que por muchos simuladores que usemos, la velocidad, las redes y los dispositivos que usa el equipo encargado de la creación de una web nunca serán igual que los que utilicen sus distintos usuarios. No será lo mismo un móvil con datos móviles 3G que un ordenador conectado con cable de red.
Datos con los que se manejan las diversas aplicaciones:
De laboratorio
Los datos de laboratorio son datos de rendimiento recogidos en un entorno controlado con
una configuración predefinida del dispositivo y de la red. Se pueden obtener de Lighthouse y WebPageTest
Ventajas
- Útiles para la depuración de problemas de rendimiento
- Visión global y profunda de la experiencia del usuario (UX)
- Entorno de pruebas y depuración replicable
Desventajas
- Podría no detectar los problemas que encuentra una persona humana
- No se puede correlacionar con los indicadores clave de rendimiento (KPIs) de la página en el mundo real
De campo
Los datos de campo son datos de rendimiento recogidos de cargas de páginas reales que tus usuarios están experimentando en la vida real. Estos se pueden obtener de PageSpeed Insights
Ventajas
- Captura la verdadera experiencia del usuario en el mundo real
- Permite la correlación con los indicadores clave de rendimiento de la empresa
Desventajas
- Conjunto restringido de métricas
- Capacidades de depuración limitadas
¿Qué herramienta debería usar según mi perfil técnico?
Si eres marketero o desarrollador tratando de optimizar la experiencia de Usuario y Conversiones
- Usa el Scorecard para analizar la velocidad en móviles de tu sitio en comparación con la de sus homólogos en más de 10 países. Las puntuaciones se basan en datos reales de Chrome User Experience Reported.
- Usa el Impact Calculator para evaluar las oportunidades de ingresos potenciales de la mejora de la velocidad de tu sitio móvil. El impacto se basa en los datos de referencia de Google Analytics
- Usa TestMySite para probar el tiempo de carga de tu página en dispositivos móviles junto con los puntos de referencia del sector y para saber como unas sencillas correcciones pueden acelerar tu sitio y reducir la pérdida de visitantes.
https://www.thinkwithgoogle.com/intl/es-es/feature/testmysite/
Si eres desarrollador tratando de conocer la experiencia real de usuarios y recomendaciones sectoriales
- PageSpeed Insights te ayuda a comprender el rendimiento real de tu sitio, tal y como lo experimentan los usuarios
Desarrollador que intenta comprender las prácticas óptimas de rendimiento web
- Lighthouse contiene un conjunto completo de oportunidades de mejora de rendimiento. Te proporciona una lista de oportunidades de rendimiento. Te proporciona una lista de oportunidades de rendimiento que faltan en tu página y el tiempo que se ahorra al implementar la optimización, lo que puede ayudarte a entender lo que debes hacer.
https://developers.google.com/web/tools/lighthouse
Desarrollador que busca orientaciones técnicas sobre cómo profundizar en el rendimiento de la web
- Las Chrome Developers Tools (CDT) contienen un panel de rendimientos que te permite profundizar en los problemas de rendimiento de tu sitio mediante perfiles con configuraciones personalizadas,lo que te permite rastrear los cuellos de botella de rendimiento. Puedes utilizar CDT tanto en versiones de producción como de desarrollo de una web.
- WebPageTest contiene un conjunto avanzado de métricas y visores de trazas. Te permite profundizar en el rendimiento de tu sitio en hardware móvil real con condiciones de red.
No te vuelvas loco con los números, todo esto es orientativo, pero sin olvidarte que están ahí para mejorar tu posicionamiento. Puedes hacer pruebas con tu web en busca de esa optimización, al final ganará tu usuario, Google y tú. Si ves que no puedes modificar muchas cosas en tu plantilla o no obtienes grandes resultados, siempre puedes aprovechar para hacer un rediseño web
