Webinar optimizar TTFB - 24/06/21, 18h ¡Optimiza tu TTFB!

Cómo optimizar el CLS o Cumulative Layout Shift en WordPress

Optimizar CLS WordPress

El CLS o Cumulative Layout Shift en WordPress, es una cifra de Core Web Vitals que indica la estabilidad visual de la web.

Y con estabilidad visual me refiero a que todos los componentes de la web se deben de cargar en su respectivo orden y sin cambios estéticos bruscos y esto afecta ATF o Above The Fold, que es la parte de la web que se ve sin hacer scroll.

Esta parte es la que debes de optimizar al máximo, así que es a la que debes de prestar más atención.

Te explico lo que debes saber para optimizar e CLS en WordPress.

P.D. Puedes aprender a optimizar WordPress gratis como WPOptimizers y recibir cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

¿Qué errores da el CLS?

Los errores que da el CLS, más allá de PageSpeed, los puedes ver en Search Console.

Además de los típicos consejos de SEO, te da consejos sobre la experiencia de página, puesto que esta también afecta al SEO.

Puedes ver si tu web tiene errores de CLS yendo a Search Console - Mejoras - Métricas web principales y haciendo clic en el informe móviles u ordenador.

Si hay URLs pobres o URLs que necesitan una mejora, seguro que tienes algún aviso.

Tienes que tener claro que la versión que importa es la móvil y te recomiendo leer mi guía de WPO en WordPress, para conocer los motivos.

Métricas web principales - Search Console

¿Cómo analizar CLS en WordPress?

Puedes analizar el CLS de WordPress con PageSpeed, pero te recomiendo hacerlo con SpeedWP, porque de paso te da consejos sobre qué mejorar.

En la primera casilla puedes ver el CLS o Cumulative Layout Shift en WordPress.

Para que tengas una idea, las cifras en móvil son:

  • Buena: 0.1 segundos o menos.
  • Necesita mejora: Entre 0.1 y 0.25 segundos.
  • Mala: Más de 0.25 segundos.
SpeedWP 2.0

SpeedWP todavía no indica qué contenido es el CLS, pero puedes analizar tu web con PageSpeed y que te lo indique.

Evitar cambios de diseño importantes PageSpeed

La mejor forma de verlo, además del consejo que te da PageSpeed, es ver las capturas en la que te muestra en la forma en la que se carga la web.

Podrás ver en cada paso el orden de los componentes de la web y cuáles no se cargan cuando o cómo deberían.

CLS Pagespeed

Te pongo casos comunes de CLS:

  • El menú móvil se muestra abierto.
  • Un título cambia de tamaño.
  • La imagen de fondo carga después que el texto que tiene debajo.
  • Un botón carga antes que el texto que va después.

Recuerda que lo que muestra PageSpeed sobre el CLS en el Origin Summary es eso, un historial de los últimos 28 días, así que no es la métrica actual de la web.

¿Cómo optimizar el CLS en WordPress?

Te explico cómo optimizar el CLS en WordPress, porque no es cosa de una tarea, sino de muchas, algunas generales e indispensables y otras específicas.

Antes de seguir esta guía te recomiendo haber realizado todas las tareas de mi curso de optimización, puesto que esta guía es de tareas específicas.

Hazte WPOptimizer premium para ver este contenido y aprender a optimizar WordPress

Ver curso optimización

Si ya lo eres inicia sesión

¡Optimiza el CLS en WordPress!

Como has podido ver, optimizar el CLS en WordPress requiere primero aplicar muchas tareas y después algunas específicas para ello.

Espero que esta guía te sea de utilidad.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

Recibe cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

    Los comentarios están cerrados.

    Únete gratis a WPOptimizers para comentar y aprender a optimizar WordPress.

    ¡Lo quiero!

    Si ya lo eres inicia sesión