← Todas las guías

Navegación y velocidad de página: cómo elegir una app de menú que no perjudique los Core Web Vitals

Qué son los Core Web Vitals y por qué deberían importarte

¿Qué son los Core Web Vitals? Una explicación en lenguaje sencillo de LCP, CLS e INP, con los umbrales que Google considera buenos y por qué estas tres métricas afectan al SEO y a los ingresos de tu tienda.

Qué son los Core Web Vitals y por qué deberían importarte

Cuando empecé a vender en internet, pensaba que la velocidad de la página era un problema de los desarrolladores. Eso fue hasta que mi tienda cayó en los resultados de búsqueda aunque el contenido no había cambiado. Ahí me senté y lo aprendí desde cero. Resulta que Google tiene un conjunto de tres métricas que miden la experiencia real de tus clientes, llamadas Core Web Vitals. Entender estos tres números no es difícil, y te dice si tu tienda se siente rápida o lenta a ojos de tus clientes, y de Google.

En este artículo voy a explicar las tres métricas en lenguaje sencillo, con los umbrales “buenos” que publica Google, y luego hablaré de por qué importan para el posicionamiento y los ingresos.

Qué son los Core Web Vitals

Dicho de forma sencilla, los Core Web Vitals son tres medidas que Google usa para evaluar lo rápida y fluida que es una página web cuando la usan personas reales. No se miden en una máquina ideal de laboratorio, sino en los teléfonos y las redes reales de quienes visitan tu tienda.

Las tres métricas son LCP (¿aparece la página rápido?), CLS (¿se mueve el diseño de un lado a otro?) e INP (¿responde de inmediato cuando tocas?). Cada una corresponde a una sensación concreta que tiene el cliente al abrir la página.

Google puntúa según el percentil 75, es decir, el 75 % de las visitas, y separa el móvil del escritorio. En pocas palabras: la mayoría de tus clientes tiene que percibir la página como aceptable para que cuente como “buena”, no solo unas pocas visitas con suerte.

LCP: ¿aparece la página rápido o despacio?

LCP son las siglas de Largest Contentful Paint, el momento en que aparece el elemento más grande de la pantalla. Suele ser la imagen del banner en la parte superior de la página, la imagen principal del producto o un bloque de encabezado grande. Cuando el cliente ve eso, siente que la página ha terminado de cargar.

Según Google, el umbral bueno está por debajo de 2,5 segundos. Más de 4 segundos se considera deficiente. Cualquier valor intermedio es “necesita mejorar”.

Imagina a un cliente que toca el enlace de un producto desde un anuncio de Facebook, parado en mitad de la calle esperando ante una pantalla en blanco. Cada segundo que pasa es una porción de la probabilidad de que se vaya. Para tiendas de moda o cosmética, donde las imágenes suelen ser pesadas, el LCP es el punto donde más fácil resulta ir lento.

Lo que suele arrastrar el LANC hacia abajo: imágenes demasiado pesadas y sin comprimir, demasiadas apps ejecutándose en segundo plano al abrir la página, o un tema que carga toda clase de cosas innecesarias antes de mostrar el contenido principal.

CLS: ¿se mueve el diseño de un lado a otro?

CLS son las siglas de Cumulative Layout Shift, que mide cuánto se desplazan los elementos durante la carga. Según Google, el umbral bueno está por debajo de 0,1.

Esta es la molestia con la que todo el mundo se ha topado. Estás a punto de tocar “Añadir al carrito” y, de pronto, se cuela un banner o una imagen que carga tarde, empuja el botón hacia abajo y tu dedo acaba tocando otra cosa por error. A veces tocas un anuncio sin querer. Eso es exactamente un desplazamiento del diseño.

El menú es un culpable habitual. Si la barra de navegación carga después del contenido, puede empujar todo lo que tiene debajo justo cuando el cliente está leyendo o tocando. El cliente no sabe poner nombre a esa sensación, pero ve una página desordenada y pierde la confianza.

La forma habitual de reducir el CLS es reservar espacio de antemano para imágenes, banners y menús, de modo que, al cargar, encajen en el hueco ya apartado sin desplazar el resto. Al elegir una app de menú, conviene una que no haga saltar el contenido cuando aparece.

INP: ¿responde de inmediato cuando tocas?

INP son las siglas de Interaction to Next Paint, que mide el retraso desde que un cliente interactúa (toca, pulsa, escribe) hasta que la pantalla responde. Según Google, el umbral bueno está por debajo de 200 milisegundos.

Un detalle que vale la pena recordar: INP reemplazó oficialmente a FID (First Input Delay) en el conjunto de Core Web Vitals el 12 de marzo de 2024, según Google. El motivo es que FID solo medía la primera interacción, mientras que INP registra todas las interacciones a lo largo de toda la sesión, algo más cercano a la realidad. Si lees documentación antigua que todavía menciona FID, el número que importa ahora es el INP.

El INP está muy ligado a la sensación de “esta página va lenta”. Un cliente abre el menú hamburguesa en su teléfono, toca una vez y, medio segundo después, el menú por fin se despliega. En ese medio segundo piensa que el dispositivo se ha bloqueado, vuelve a tocar y entonces se frustra. Cuanto más código ejecuta un menú en segundo plano, peor es este retraso.

Fue entonces cuando empecé a fijarme bien en la app de menú que tenía instalada. Me pasé a Navi+ (naviplus.io) en parte porque está optimizada para no ralentizar la página. Con un menú Tab Bar en la parte inferior del móvil o un Slide Menu, lo responsivo que se siente cuando un cliente toca directamente afecta al INP, así que una app ligera hace que este número sea más fácil de mantener bajo control.

Por qué deberían importarte los Core Web Vitals: SEO e ingresos

La pregunta sin rodeos: ¿vale la pena preocuparse por estos tres números, o son solo un asunto técnico?

Sí valen la pena. Google ha confirmado que la experiencia de página, que incluye los Core Web Vitals, es un factor de posicionamiento. No es el factor más importante (el buen contenido sigue siendo la base), pero cuando dos páginas tienen un contenido igual de bueno, la velocidad puede ser el factor que ayude a Google a elegir cuál pone arriba. Una tienda lenta puede perder fácilmente frente a una página más rápida en justo las palabras clave por las que compites.

El efecto en cadena es bastante simple: una tienda lenta posiciona más abajo, una posición más baja significa menos tráfico orgánico, y menos tráfico significa menos pedidos. Para quienes venden apoyándose mucho en el SEO en lugar de pagar anuncios, esta es una fuente gratuita de clientes que no querrás dejar escapar.

La velocidad no solo afecta al posicionamiento, también a la tasa de conversión. La tasa media de abandono del carrito en ecommerce ronda el 70 %, según el Baymard Institute (una cifra recopilada a partir de 50 estudios). Hay muchas causas, pero una página que carga lento o se traba desde luego no ayuda. Cuando un cliente ya ha llegado al carrito y aún tiene que esperar, o toca lo que no es porque el diseño dio un salto, las probabilidades de que se vaya aumentan.

Lo tranquilizador es que estas tres métricas son medibles y mejorables. No tienes que adivinar. Entra en Google Search Console o en PageSpeed Insights, introduce la URL de tu tienda y la herramienta te mostrará cómo están el LCP, el INP y el CLS, y dónde están en rojo.

Un orden práctico para quien va con prisas:

  • Comprueba si las imágenes son demasiado pesadas (afecta al LCP).
  • Revisa las apps que has instalado, buscando las que ejecutan mucho código en segundo plano (afecta al INP).
  • Comprueba si los menús y banners hacen saltar el contenido al cargar (afecta al CLS).

Muchas tiendas van acumulando apps con el tiempo, y el menú aparece en todas las páginas, así que una app de navegación ligera que no desplace el diseño es una inversión que vale la pena considerar.

No hace falta que te conviertas en ingeniero. Solo necesitas entender qué dicen los tres números sobre cómo se sienten tus clientes, revisarlos de forma periódica y, al elegir herramientas (sobre todo una app de menú que aparece en todas las páginas), fijarte en si está ralentizando tu tienda.

Este artículo forma parte de la guía más amplia sobre Navegación y velocidad de página: cómo elegir una app de menú que no perjudique los Core Web Vitals.

Compartir Facebook X