El rendimiento de tu sitio web no se trata solo de velocidad, sino de cómo lo perciben los usuarios. Los Core Web Vitals (CWV) son las métricas de rendimiento de Google que miden la experiencia de usuario, desde la velocidad de carga hasta la interactividad y la estabilidad visual. Mejorar los Core Web Vitals puede aumentar tus rankings SEO, las tasas de conversión y la satisfacción de los usuarios.
En este artículo, compartiremos contigo 5 trucos para mejorar los CWV:
- Retrasar JS hasta la interacción del usuario
- Lazy loading de imágenes
- Falta de atributos de tamaño en imágenes
- Eliminar JS/CSS no utilizado
- Buenas prácticas de INP
¿Qué son los Core Web Vitals?
Los Core Web Vitals (CWV) son un conjunto de métricas que miden lo rápido, responsive y visualmente estable que se percibe tu sitio web para los usuarios. Forman parte de las señales de ranking de experiencia de página de Google, lo que los convierte en un factor directo para el éxito de tu sitio en los resultados de búsqueda.
Existen cuatro métricas principales que debes conocer.
¿Qué es LCP (Largest Contentful Paint)?
LCP mide cuánto tiempo tarda en cargarse en la pantalla del usuario el elemento más visible (por ejemplo, un vídeo, una imagen o un bloque de texto). Este valor debería ser de 2,5 segundos o menos. Un LCP deficiente suele ser una señal de latencia del servidor, recursos que bloquean el renderizado o medios no optimizados.
¿Qué es FCP (First Contentful Paint)?
FCP indica el momento en el que el primer content (texto, imagen o canvas) se muestra en pantalla. Esto da a los usuarios la señal de que la página se está cargando. Cuanto antes se produzca el FCP, antes percibirán los usuarios tu sitio como rápido.
¿Qué es CLS (Cumulative Layout Shift)?
CLS mide la estabilidad visual, es decir, cuánto se mueve el content de forma inesperada durante la carga. Por ejemplo, cuando un banner o una imagen se desplaza y provoca que un usuario haga clic en el botón equivocado, algo que seguro todos hemos sufrido alguna vez. Se considera bueno un valor de CLS inferior a 0,1.
¿Qué es INP (Interaction to Next Paint)?
INP mide lo responsive que se siente tu sitio cuando los usuarios interactúan con él, por ejemplo, al pulsar un botón o desplegar un menú. Un buen INP está por debajo de los 200 milisegundos. Es una métrica nueva que sustituye a FID (First Input Delay) y ofrece una visión más completa de la interactividad del usuario.
En conjunto, estas métricas representan el rendimiento en el mundo real y la satisfacción del usuario. Optimizarlas es fundamental para el SEO y la experiencia de usuario.
Cómo comprobar los Core Web Vitals (CWV)
Antes de poder optimizar los CWV, necesitas medirlos. Afortunadamente, Google ofrece varias herramientas para hacerlo.
PageSpeed Insights
PageSpeed Insights es la herramienta estándar de Google para evaluar el rendimiento de tu sitio web. Proporciona tanto datos de laboratorio como datos de campo, lo que permite conocer cómo funciona tu web en dispositivos reales y en entornos controlados. Además, ofrece recomendaciones prácticas, que pueden suponer un gran ahorro de tiempo a la hora de solucionar problemas de rendimiento.
Chrome User Experience Report (CrUX)
Utiliza el CrUX Visualizer para acceder a datos reales de usuarios recopilados a partir de usuarios de Chrome. Podrás ver tendencias de rendimiento, así como el desempeño de tu sitio web en comparación con los estándares del sector.
Chrome User Experience Report (CrUX)
Y, por supuesto, también está Google Search Console, donde el informe de los Core Web Vitals muestra qué URLs tienen un rendimiento deficiente tanto en desktop como en mobile. El informe agrupa páginas similares que comparten los mismos problemas, lo que facilita identificar, priorizar y aplicar las correcciones necesarias.
Utilizar estas herramientas de forma periódica te permite detectar mejoras y también identificar nuevos problemas a medida que tu sitio web evoluciona. Estas herramientas son gratuitas y existen muchas más; además, hay herramientas de pago con funcionalidades más avanzadas. Elige la que mejor se adapte a tus necesidades.
1. Retrasar JS hasta la interacción del usuario
Uno de los trucos más efectivos para mejorar las métricas de los Core Web Vitals es aplazar la ejecución de JavaScript hasta que el usuario interactúe con tu página.
Muchos sitios cargan decenas de archivos JavaScript de forma inmediata, incluso antes de que el usuario haga scroll o haga clic en cualquier elemento. Esto retrasa el Largest Contentful Paint (LCP) y afecta negativamente al INP, ya que el navegador debe procesar todo ese código desde el inicio.
Al retrasar el JS no esencial hasta que se produzca una interacción (como un scroll o un clic), puedes mejorar drásticamente el tiempo de carga inicial de tu sitio.
Aplazar los scripts permite que la página renderice primero el content principal, haciendo que el sitio se perciba visiblemente más rápido tanto para los usuarios como para los crawlers de Google. A menudo, es la forma más rápida de mejorar de manera simultánea los valores de LCP, FCP e INP.
Sin embargo, ¡cuidado! Aunque este truco funciona muy bien, no es una solución permanente. Básicamente, estás ocultando el problema. El JS sigue existiendo y continúa sin estar optimizado. Para una solución a largo plazo, deberías refactorizar o eliminar por completo los scripts que no se utilizan. Pero si buscas una mejora rápida de rendimiento, esta es tu mejor opción. Ten en cuenta que algunos scripts son necesarios para que la página cargue correctamente, por lo que tendrás que identificarlos y añadirlos a una whitelist. Un entorno de pruebas puede ser un entorno seguro para experimentar con esta funcionalidad.
2. Lazy loading de imágenes
Las imágenes suelen ser uno de los recursos más pesados en cualquier página. El lazy loading permite a los navegadores retrasar la carga de las imágenes hasta que están a punto de entrar en pantalla. Esto reduce el tiempo de carga inicial de la página y el consumo de ancho de banda, mejorando tanto el LCP como el FCP. Es imprescindible en cualquier sitio web moderno y tiene un impacto muy positivo en los CWV.
En la práctica, se trata simplemente de añadir el atributo de lazy loading en las etiquetas HTML de las imágenes. Existen muchos plugins en WordPress que ofrecen esta funcionalidad.
Nota importante: no apliques lazy loading a las imágenes que aparecen above the fold (la parte visible al cargar la página inicialmente). Hacerlo retrasará su carga de forma innecesaria y, de hecho, perjudicará tu puntuación de LCP. Asegúrate siempre de probar que las imágenes principales, banners y el content above the fold se cargan de forma inmediata.
3. Falta de atributos de tamaño en imágenes
Los cambios de diseño inesperados son una de las mayores frustraciones para los usuarios y afectan directamente a tu puntuación de CLS.
Cuando una imagen no tiene definidos los atributos de ancho y alto, el navegador no sabe cuánto espacio debe reservar. Como resultado, cuando la imagen finalmente se carga, empuja el content hacia abajo o hacia los lados, provocando un cambio de layout.
Afortunadamente, esto se soluciona fácilmente asegurándote de que todas las imágenes tengan definidos sus tamaños, de modo que el navegador pueda reservar el espacio necesario y no frustres a tus usuarios.
Si tu CLS sigue siendo alto incluso después de establecer los tamaños de las imágenes, es posible que tengas que revisar otros factores, como anuncios dinámicos, animaciones o iframes incrustados.
4. Eliminar JS y CSS no utilizados
Es importante entender que cada vez que se carga una página, el navegador descarga todos los archivos CSS y JS enlazados, incluso aquellos que no se utilizan en esa página específica.
Este es un problema bastante común. Normalmente, existe una gran cantidad de código, o partes de código, que no son necesarios para renderizar una página concreta, pero que aun así se cargan y consumen recursos valiosos.
Este código innecesario aumenta el peso de la página, retrasa el renderizado y consume ancho de banda. En sitios grandes, los archivos CSS o JS globales pueden alcanzar fácilmente cientos de kilobytes, aunque una página individual solo utilice una pequeña parte de ellos.
La solución consiste en asegurarse de que solo se cargue en cada página el código que realmente es necesario. Existen diferentes plugins de WordPress que pueden ayudar con esto, pero su correcta implementación requiere paciencia y conocimientos técnicos. Aun así, es una de las estrategias más efectivas a largo plazo para mantener unos CWV saludables.
5. Buenas prácticas de INP
Como se mencionó anteriormente, el Interaction to Next Paint (INP) mide lo responsive que se percibe tu sitio cuando los usuarios interactúan con él. Básicamente, es el tiempo que transcurre desde que se hace clic en un botón hasta que este responde.
Uno de los problemas más comunes es el botón de consentimiento de cookies. Cuando un usuario acepta las cookies, muchos sitios activan de inmediato una avalancha de scripts de tracking y etiquetas de analítica que se ejecutan al instante, bloqueando el navegador durante unos momentos. Esto provoca picos en el INP y genera una mala experiencia de usuario.
Para solucionarlo, puedes plantearte retrasar los scripts que no sean necesarios de forma inmediata y añadir los atributos async o defer a los scripts externos. Por último, y lo más importante, asegúrate de que utilizas las distintas herramientas de tracking solo para fines esenciales para el negocio. Si no estás utilizando los datos, elimina la herramienta. Las herramientas de tipo heatmap, por ejemplo, son extremadamente pesadas y, aunque resultan atractivas, en realidad solo necesitas una muestra limitada para recopilar suficientes datos y sacar conclusiones.
Al gestionar cómo, cuándo y si los scripts se cargan, garantizas una interactividad más fluida y mejoras tanto el INP como la satisfacción general del usuario.
Por qué el SEO técnico es importante
Optimizar los Core Web Vitals no es solo un ejercicio técnico, sino una parte esencial de una base sólida de SEO. El SEO técnico garantiza que tu sitio web sea rápido, rastreable y accesible tanto para los usuarios como para los motores de búsqueda. Sin él, incluso el mejor content y los mejores backlinks pueden rendir por debajo de su potencial, ya que Google prioriza la experiencia de usuario como parte de su sistema de ranking.
El SEO técnico te permite aprovechar al máximo todas las demás inversiones en SEO y asegura que estás sacando partido de todo el potencial de tu content y de tus esfuerzos de link building.
Piensa en el SEO técnico como los cimientos de una casa. Si son débiles, todo lo que se construya encima, por muy bueno que sea, acabará deteriorándose con el tiempo.
Una vez que el rendimiento de tu sitio está optimizado, es el momento de amplificar tu visibilidad. Ahí es donde entra Search Royals. Un perfil de backlinks sólido combinado con un rendimiento excelente en los CWV es la receta definitiva para alcanzar los primeros puestos en los resultados de búsqueda. Contáctanos hoy mismo para empezar a construir tu autoridad y hacer crecer tu negocio.
