Te explico la métrica esa del CLS de Google PageSpeed

Para que veas que no me guardo nada y que no te hago esperar, te lo cuento ya. El CLS mide si tu web da saltos mientras alguien la está usando, y es una de las tres métricas con las que Google valora la experiencia de tus visitantes.

Seguro que lo has sufrido como usuario, como cuando estás leyendo un artículo y de repente carga una imagen o un anuncio por encima del texto, todo se desplaza hacia abajo de golpe y acabas pulsando justo donde no querías. Eso es el CLS.

Es de esas métricas que casi todo el mundo nombra y pocos entienden realmente, empezando por su propio nombre, que despista bastante.

Así que vamos a verlo con calma para saber qué es, qué mide exactamente, cómo se mide y, sobre todo, qué cosas concretas de tu WordPress te pueden estar bajando la nota y, en consecuencia, la experiencia de navegación de tus visitantes, que es lo importante.

Qué es el CLS

CLS son las siglas de Cumulative Layout Shift, en español algo como cambio de diseño acumulativo. O como yo lo entiendo, cuánto se mueve y baila el contenido de tu página sin que tú hayas hecho nada para provocarlo.

Forma parte de las Core Web Vitals (las métricas esenciales de experiencia web que usa Google), que son tres y miden cosas muy distintas.

El LCP mide lo que tarda en aparecer el contenido principal, el INP mide cómo de rápido responde tu web cuando interactúas con ella, y el CLS mide la estabilidad visual, o sea, que las cosas se queden quietas en su sitio.

El CLS no tiene nada que ver con la velocidad de carga, mide que tu web no dé bandazos.

¿Y por qué le da Google tanta importancia?

Pues porque un salto en mal momento es de las cosas que más fastidian al navegar, te hace perder el punto de lectura o pulsar un botón que no querías, y encima la estabilidad visual es uno de los factores que Google tiene en cuenta para posicionar.

Qué mide exactamente y cómo se calcula

Un «cambio de diseño» (en inglés layout shift) ocurre cuando un elemento visible cambia de posición de un fotograma al siguiente sin que tú lo hayas pedido.

Fíjate en lo de «sin que tú lo hayas pedido», porque es clave, pues los movimientos que provocas tú, como pulsar un botón y que se despliegue un menú, no cuentan.

El CLS solo penaliza los saltos inesperados, los que el usuario no ve venir.

Cada salto puntúa según dos cosas:

• Cuánta pantalla ocupa el elemento que se mueve.
• Cuánto se mueve respecto a la zona visible.

Cuanto más grande sea lo que se menea y más lejos lo haga peor nota. Un banner enorme que empuja media página puntúa muchísimo más que un iconito que se desplaza dos píxeles.

Y aquí está la trampa del nombre, porque eso de «acumulativo» te hace pensar que se suma todo lo que se mueve en la página de principio a fin, y desde 2021 ya no es así. Lo que hace Google es agrupar los saltos en ventanas de tiempo.

Una ventana se abre con el primer salto y se cierra cuando pasa un segundo sin que se mueva nada, con un tope de cinco segundos. Tu CLS no es la suma de todas las ventanas, es el de la peor.

Piénsalo como un camarero algo torpe que durante la comida te da varios golpes a la mesa. La nota no suma todos los meneos de toda la comida, agrupa los que pasan casi seguidos y se queda con el peor momento, esa racha en la que todo bailó a la vez.

El CLS mide tu peor racha de saltos, no el total de la página.

¿Qué nota está bien? Un CLS de 0,1 o menos es bueno, entre 0,1 y 0,25 es mejorable, y por encima de 0,25 es malo y toca ponerse. Tienes el detalle fino del cálculo en la documentación oficial de Google, pero con esto te haces una idea de sobra.

Dónde te recomiendo que midas el CLS

El CLS que cuenta para Google es el de tus usuarios reales. Se recoge de la gente que navega por tu web con Chrome, se promedia a lo largo de 28 días y se mira el percentil 75 (o sea, que de cada 100 visitas 75 tienen que ir bien para que apruebes).

El CLS que importa es el que sufren tus visitantes de carne y hueso, no cálculos o estimaciones de laboratorio o con herramientas de medición genéricas.

El sitio más directo para verlo es en la Search Console, en el informe de Core Web Vitals, que te dice si tienes problema y, mejor aún, en qué páginas concretas.

Ese dato real incluye toda la visita, no solo el momento de la carga.

Tus visitantes hacen scroll, y los saltos que pasan al bajar por la página cuentan exactamente igual, como una imagen que aparece más abajo y empuja, una cabecera fija que se encoge al desplazarte o un anuncio que se carga cuando llegas a su altura.

El CLS recoge también todo lo que se mueve mientras el usuario baja por la página, no solo lo que pasa al abrirla.

Por eso tu web puede parecer estable al abrirla y arrastrar igualmente un CLS malo, porque los saltos llegan más abajo, cuando el usuario hace scroll.

Un aviso para que no te agobies es que ese dato de campo va con retraso, tarda hasta 28 días en reflejar tus arreglos. Si haces cambios hoy no esperes ver la nota bajar mañana.

Los culpables: qué le hace un destrozo al CLS en WordPress

La buena noticia es que las causas son casi siempre las mismas cuatro o cinco, y la mayoría se arreglan con la misma idea de fondo.

Reservarle el sitio a cada elemento antes de que cargue es el 90% del trabajo contra el CLS.

Si el navegador ya sabe cuánto va a ocupar algo, no tiene que empujar el resto cuando aparece. Vamos con los sospechosos habituales.

Imágenes sin dimensiones

La número uno, con diferencia, y es que cuando una imagen carga sin que el navegador sepa de antemano su tamaño, aparece de golpe y empuja todo lo que tiene debajo.

Si tus imágenes no llevan sus dimensiones, ahí tienes la mitad de tu CLS.

WordPress ya añade el ancho y el alto a las imágenes que insertas, que es justo lo que el navegador necesita para reservarles el hueco, eso hay que reconocerlo.

El problema viene en los casos donde eso falla, como imágenes metidas por shortcode, insertadas por algunos maquetadores visuales, o con la carga diferida (lazy load) mal configurada.

Si reservar todos esos huecos a mano te da pereza, parte se puede automatizar.

Mi plugin gratuito DietPress añade automáticamente las dimensiones que les falten a tus imágenes, que es justo la causa número uno del CLS, y de paso pone las fuentes de Google en display=swap.

Lo que no te va a tocar son los banners de cookies, los anuncios ni lo que inyecta el JavaScript por su cuenta, así que eso sigue siendo cosa tuya. Pero la parte más gorda, la de las imágenes, te la quita de encima sin que hagas nada.

Fuentes web (FOIT y FOUT)

El navegador necesita un rato para descargar las fuentes de tu web, y mientras tanto tiene dos opciones, las dos con su problema.

• O no enseña el texto hasta que la fuente está lista (lo que se llama FOIT, texto invisible un instante).
• O lo enseña con una fuente del sistema y lo cambia cuando llega la tuya (FOUT).

El problema del segundo caso es que, si la fuente provisional y la tuya tienen tamaños distintos, el texto se reajusta y empuja lo que tiene alrededor.

Banners de cookies, avisos y anuncios

El segundo gran culpable después de las imágenes, el típico banner de cookies que aparece un segundo después de cargar la página y lo empuja todo hacia abajo, o el bloque de anuncios que reserva su hueco tarde.

Como aparecen después del primer pintado mueven el contenido que ya estabas mirando.

Elementos que se inyectan tarde con JavaScript

Carruseles, bloques de «productos relacionados», widgets, barras de aviso en la parte de arriba. Todo lo que un script añade a la página después de que se haya pintado por primera vez es candidato a empujar el contenido.

Pasa mucho también con los embeds. la inserción en el contenido de vídeos de YouTube o de publicaciones de redes sociales, cuando no van dentro de un contenedor con una proporción fija.

WooCommerce, si tienes tienda

Las tiendas tienen sus propios saltos, como las variaciones de producto que cambian el precio y mueven el botón de comprar justo cuando vas a pulsarlo, o el panel lateral del carrito que aparece y desplaza la página.

En una ficha de producto un salto a destiempo te puede costar una venta.

¿Es difícil saber qué está jodiendo mi CLS?

Saber que tienes CLS está bien, pero lo que necesitas es saber qué elemento es el que baila. Search Console te da las páginas con problema, que es la mitad del camino.

Para encontrar el elemento concreto, pega el siguiente código en la consola del navegador (en Chrome o similares, que es donde mide Google). haz scroll por toda la página de arriba abajo y luego escribe clsReport().

Te dirá el CLS real de tu visita y, lo importante, el elemento que más ha saltado.

(function () {
  let cls = 0;             // peor ventana hasta ahora
  let sessionValue = 0;    // ventana actual
  let sessionEntries = []; // saltos de la ventana actual
  let worstShift = null;   // el salto individual más grande
 
  const observer = new PerformanceObserver(function (list) {
    for (const entry of list.getEntries()) {
      // Los saltos que provoca el usuario (medio segundo tras pulsar) no cuentan
      if (entry.hadRecentInput) continue;
 
      const first = sessionEntries[0];
      const last = sessionEntries[sessionEntries.length - 1];
 
      // Misma ventana: menos de 1 s desde el último salto y menos de 5 s desde el primero
      if (sessionValue &&
          entry.startTime - last.startTime < 1000 &&
          entry.startTime - first.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }
 
      // El CLS es el de la peor ventana, no la suma de todas
      if (sessionValue > cls) cls = sessionValue;
 
      // Guardamos el salto más grande para señalar al culpable
      if (!worstShift || entry.value > worstShift.value) worstShift = entry;
    }
  });
 
  observer.observe({ type: 'layout-shift', buffered: true });
 
  // Llama a clsReport() cuando hayas hecho scroll por toda la página
  window.clsReport = function () {
    console.log('CLS de esta visita:', cls.toFixed(4));
    if (worstShift && worstShift.sources && worstShift.sources.length) {
      console.log('Elemento que más ha saltado:', worstShift.sources[0].node);
    } else {
      console.log('No se ha podido identificar el elemento.');
    }
  };
 
  console.log('Midiendo CLS. Haz scroll por toda la página y escribe clsReport()');
})();

Hace la misma cuenta de ventanas de sesión que usa Google, así que el número se parece bastante al que verás en Search Console. La diferencia es que aquí te señala el elemento culpable al momento.

Si te manejas con las herramientas de desarrollo del navegador el panel de rendimiento también te marca los saltos, pero con esto lo tienes en un par de líneas y sin andar rebuscando.

Por dónde empezar

Si te lo quieres tomar en serio sin ir a lo loco, este es el orden que yo sigo, por si te vale, y te fías:

1. Entra en Search Console y mira el informe de Core Web Vitals para saber si tienes problema y en qué páginas.
2. Revisa primero las imágenes sin dimensiones, que suelen ser la mitad del problema casi siempre.
3. Sigue con las fuentes y con el banner de cookies.
4. Revisa lo que carga tarde por JavaScript y lo que se mueve al hacer scroll.
5. Si tienes tienda repasa los puntos concretos de WooCommerce.
6. Vuelve a mirar la nota a las cuatro semanas, que el dato real ya te he comentado que va con retraso.

Por experiencia de mantener unas cuantas webs te digo que el CLS es de esas cosas que dan mucho miedo de lejos y poco de cerca.

Una vez entiendes que casi todo se reduce a reservarle el sitio a cada cosa antes de que cargue, dejas de perseguir saltos a ciegas.

Si quieres seguir aprendiendo cosas relacionadas igual te gusta un artículo que publiqué sobre la propiedad CSS content-visibility, que va justo de esto, de reservarle el hueco a lo que aún no se ve.

Y si te atascas con alguna de las causas concretas, o te surge alguna duda, me tienes ahí abajo en los comentarios.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!