CLS

Qué se considera un salto

El CLS es la única de las tres métricas de Core Web Vitals que no mide tiempo. Mide inestabilidad: cuánto se desplaza el contenido ya visible de su sitio sin que la persona haya hecho nada para provocarlo.

La escena la ha vivido todo el mundo. Abres un artículo en el móvil, empiezas a leer el primer párrafo y de pronto el texto baja tres centímetros porque ha entrado una imagen por encima. O vas a pulsar «aceptar» y en el último instante aparece un banner que empuja el botón hacia abajo, de modo que acabas pulsando otra cosa. Eso es exactamente lo que cuenta el CLS.

La puntuación de cada salto combina dos factores: qué proporción de la pantalla se ha visto afectada y cuánta distancia se ha movido. Un desplazamiento pequeño de un bloque enorme puntúa mucho; un desplazamiento grande de un elemento diminuto puntúa poco. Los saltos se van acumulando por ventanas de tiempo y se toma la peor ventana de la sesión. Google considera bueno un CLS por debajo de 0,1 y malo por encima de 0,25.

Importante: los movimientos provocados por la persona no penalizan. Si despliegas un acordeón y el contenido de debajo baja, eso es respuesta, no salto, siempre que ocurra dentro de la ventana de medio segundo posterior a la interacción. La métrica persigue lo inesperado, no todo lo que se mueve.

Las causas, casi siempre las mismas

Las causas se repiten y son pocas. Cinco concentran casi todo lo que aparece en una web normal:

Imágenes sin dimensiones declaradas. Si el navegador no sabe cuánto va a ocupar una imagen, reserva cero espacio, coloca todo lo demás y luego mete la imagen a empujones. Declarar ancho y alto en el HTML, o reservar la proporción por CSS, resuelve el caso.

Anuncios e incrustaciones de terceros. Un bloque publicitario, un mapa, un vídeo incrustado o un widget de reseñas llegan tarde y con altura variable. La solución no es quitarlos, es reservarles un hueco fijo desde el principio, aunque a veces sobre espacio.

Fuentes tipográficas que cambian a mitad. El texto se pinta primero con una tipografía de sistema y luego se sustituye por la definitiva. Si las dos tienen proporciones distintas, todo el texto se recoloca. Se corrige ajustando las métricas de la fuente de reserva y precargando la definitiva.

Contenido inyectado en la parte superior. Avisos de cookies, barras de promoción y mensajes de envío gratuito que se insertan por encima de todo lo demás cuando la página ya se estaba leyendo. Si tienen que estar, deben ocupar su espacio desde el primer pintado, o superponerse sin empujar nada.

Animaciones mal hechas. Animar la altura o la posición de un elemento recoloca a todos sus vecinos. Animar transformaciones visuales, no.

La lección de las fuentes: precargar no basta

De esas cinco causas, la de las fuentes es la que más veces se da por resuelta antes de tiempo. En el sitio de un gabinete de logopedia lo medimos paso a paso, y la progresión es la mejor explicación que conozco.

El CLS de partida era 0,23, y venía entero de las fuentes web. Al precargarlas bajó a 0,10: una mejora grande, pero el salto seguía ahí, en el umbral. Solo desapareció del todo —0,00— cuando añadimos además una fuente de reserva con las métricas ajustadas (size-adjust y compañía) para que ocupara exactamente lo mismo que la definitiva, de modo que la sustitución no recolocara ni una línea.

La conclusión, escrita para que no se olvide: precargar la fuente no elimina el desplazamiento por sí solo; hay que combinarlo con la fuente de reserva calibrada. Nos volvió a pasar en un sitio corporativo, con una página en CLS 0,38 provocado por cinco archivos de fuente sin precargar: mismo tratamiento completo, mismo destino, 0,00.

Lo que me encuentro al auditar

Es la métrica que peor se detecta desde una silla de oficina y la que más rápido se detecta en un sofá. En el ordenador del despacho, con la caché llena y fibra, la página aparece entera de golpe y no salta nada. En un móvil con datos móviles y la caché vacía, la misma página es un baile.

Por eso mi comprobación es física: móvil real, navegación privada, y grabar la carga en vídeo. Ver el vídeo a cámara lenta es más útil que cualquier informe, porque además de decirte que hay salto te dice qué elemento lo provoca.

También reviso siempre las páginas con más tráfico de entrada, no las que el cliente considera importantes. El artículo del blog que recibe la mitad de las visitas del sitio suele ser justo el que tiene la imagen sin dimensiones y el bloque de publicidad flotante.

Y hay un detalle que se olvida: el CLS se sigue midiendo durante toda la visita, no solo en la carga. Un carrusel que rota solo, un contador de stock que se actualiza o un mensaje de «alguien acaba de comprar» pueden generar saltos veinte segundos después de haber entrado.

Por qué le importa a un negocio

Porque es la métrica que produce errores reales de la persona, no solo incomodidad. Un salto en el momento equivocado hace que se pulse el enlace equivocado, que se marque la casilla equivocada o que se cancele lo que se quería confirmar. En un proceso de compra o en un formulario, eso es dinero.

Además transmite descuido de una forma muy física. Una web que se mueve mientras la lees se percibe como poco fiable, y esa percepción cuesta mucho más de revertir que arreglar el problema técnico que la causa.

En accesibilidad el impacto es mayor todavía. Para alguien con movilidad reducida, un objetivo que se desplaza justo al pulsarlo puede convertir una tarea de dos segundos en un intento fallido tras otro. Y para quien usa mucho aumento de pantalla, un salto significa perder por completo el punto donde estaba leyendo.

La buena noticia es que de las tres métricas de Core Web Vitals es la más barata de arreglar, porque sus causas son pocas y conocidas: fuentes, imágenes sin dimensiones e inserciones tardías. No exige cambiar de servidor ni reescribir la lógica de la web: casi todo se resuelve reservando espacio en el sitio correcto.

Errores frecuentes

Creer que no hay problema porque en tu ordenador no salta. Con la caché caliente y buena conexión, todos los elementos llegan a tiempo. El CLS vive en las condiciones malas.

Reservar espacio solo en escritorio. Una imagen que ocupa 200 píxeles de alto en pantalla grande puede ocupar 400 en móvil. Si la reserva está fijada en píxeles y no en proporción, el salto sigue ahí donde más duele.

Poner el aviso de cookies empujando el contenido. Es la causa más frecuente y la más innecesaria. Un aviso superpuesto cumple igual de bien su función legal y no mueve ni un párrafo.

Quedarse en precargar la fuente. Es medio arreglo: baja el salto pero no lo elimina. Sin la fuente de reserva con métricas ajustadas, el texto se sigue recolocando al cambiar de tipografía.

Confundir salto con lentitud. Se puede tener un CLS pésimo en una web rapidísima. Son problemas independientes y se arreglan por caminos distintos.

Medir solo el primer segundo. Los carruseles automáticos, los avisos emergentes tardíos y el contenido que se carga al desplazar generan desplazamientos mucho después de la carga inicial y cuentan igual.