¿Qué son los cambios de diseño y cómo afectan el CLS en PageSpeed Insights?

Este post de hoy está destinado a usuarios de WordPress con conocimiento avanzado. Analiza el tema del CLS y sus cambios de Diseño.

Cuando analizamos un sitio web con herramientas como PageSpeed Insights, es común encontrar el mensaje de “Cambios de diseño importantes detectados”. Esto se refiere a un problema conocido como Cumulative Layout Shift (CLS), uno de los tres factores principales de las Core Web Vitals, métricas fundamentales para evaluar la experiencia del usuario y el rendimiento de un sitio web.

Cambio de diseño acumulativo

El Cambio de Diseño Acumulativo (CLS) ocurre en WordPress cuando los elementos de la página cambian de posición mientras esta carga, generando una mala experiencia de usuario. Esto se da por:

Falta de dimensiones definidas: Las imágenes, videos o anuncios no tienen dimensiones fijas, lo que provoca que la página reajuste su diseño al cargarlos.
Carga tardía de fuentes web: Las fuentes personalizadas tardan en cargarse, causando que el texto cambie de estilo o tamaño.
Elementos dinámicos: Contenido como banners o pop-ups aparece después de que la página se ha cargado, desplazando otros elementos.

Soluciones

Dimensiones definidas: Añade tamaños fijos para imágenes, videos y anuncios en HTML o CSS (width y height).
Carga diferida optimizada: Usa atributos como lazy-loading solo para contenido fuera del viewport inicial.
Estilos seguros para fuentes: Implementa font-display: swap para evitar cambios de fuente mientras se cargan.
Reserva espacio dinámico: Usa aspect-ratio en CSS para reservar espacio para contenido que se carga dinámicamente.
Optimización del tema: Elige temas bien desarrollados, como Astra, que minimizan problemas de CLS.

Con estas prácticas, mejorarás el CLS y la experiencia de usuario en tu sitio WordPress. 😊 Ahora toca verlo todo con más detalle

En este artículo, vamos a profundizar en:

Qué es el CLS y cómo afecta la puntuación.
Problemas comunes que generan cambios de diseño.
Razones técnicas detrás de estos problemas.
Cómo corregir los cambios de diseño de forma global.
Plugins recomendados para gestionar el CLS.

¿Qué es el CLS y por qué es importante?

El Cumulative Layout Shift (CLS) mide la estabilidad visual de una página web. En términos sencillos, mide cuánto cambian los elementos en la pantalla mientras la página se está cargando. Este problema ocurre cuando un contenido visible se mueve inesperadamente, afectando la experiencia del usuario.

Ejemplo:

Un usuario comienza a leer un párrafo, pero mientras carga un banner o una imagen, el texto se desplaza hacia abajo. Esto no solo resulta molesto, sino que puede llevar al usuario a abandonar el sitio.

Impacto del CLS en SEO

Google utiliza el CLS como un factor de clasificación en los resultados de búsqueda. Una mala puntuación de CLS puede bajar tu puntuación total en PageSpeed Insights, disminuyendo la posibilidad de que tu página aparezca en los primeros resultados de búsqueda. Por ejemplo:

Una puntuación perfecta de 100 puede caer hasta 77 si el CLS es elevado.

Problemas comunes que generan cambios de diseño

Imágenes sin dimensiones especificadas
- Si no defines width y height en las imágenes, el navegador no puede reservar espacio para ellas antes de cargarlas.
Carga tardía de fuentes
- Las fuentes personalizadas pueden tardar en cargarse, lo que provoca que el texto renderizado cambie su estilo una vez cargada la fuente.
Anuncios dinámicos o widgets
- Elementos como anuncios o feeds de terceros pueden alterar el diseño al no reservar suficiente espacio en el DOM.
Videos o iframes sin dimensiones
- Similar a las imágenes, los videos sin dimensiones definidas provocan saltos visuales.
Uso incorrecto de CSS
- Clases con min-height o padding inadecuados en elementos dinámicos como menús, encabezados o pies de página.
Carga tardía de elementos dinámicos
- Elementos como sliders, galerías, o animaciones que no cuentan con espacio reservado.

Razones técnicas detrás de los cambios de diseño

Renderización no planificada
- Cuando los navegadores reciben contenido nuevo después de procesar el HTML inicial, deben reorganizar el diseño para acomodar estos elementos.
Estilos de fuentes no sincronizados
- Sin font-display: swap, el navegador espera hasta que las fuentes personalizadas se carguen por completo, lo que causa saltos de texto.
Falta de dimensiones en imágenes y videos
- Si el navegador no sabe cuánto espacio reservar para una imagen, deja el área en blanco hasta que se cargue, moviendo los elementos circundantes.
Scripts de terceros
- Elementos externos como anuncios o widgets introducen contenido que el navegador no puede anticipar.

Cómo corregir globalmente los cambios de diseño

1. Especificar dimensiones en imágenes y videos

Define el tamaño de cada imagen y video en tu sitio web utilizando width y height.

<img src="imagen.jpg" width="600" height="400" alt="Ejemplo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/example"></iframe>

2. Precargar fuentes

Precarga las fuentes personalizadas para que estén disponibles antes de renderizar el contenido.

function preload_fonts() {
    echo '<link rel="preload" href="ruta-a-tu-fuente.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
}
add_action('wp_head', 'preload_fonts');

3. Uso de estilos explícitos

Asegúrate de que elementos como encabezados, menús, y banners tengan una altura mínima para evitar movimientos.

header {
    min-height: 100px;
}

4. Implementar listeners pasivos

Mejora el rendimiento general del desplazamiento usando listeners pasivos para eventos.

document.addEventListener("scroll", () => {}, { passive: true });

Plugins recomendados para optimizar el CLS

WP Rocket
- Función: Optimiza la carga de recursos como CSS, JavaScript e imágenes.
- Configuración clave: Habilitar “Carga diferida” y “Optimización de archivos”.
Autoptimize
- Función: Minifica y agrupa CSS y JavaScript para mejorar el tiempo de carga.
Smush
- Función: Optimiza imágenes para reducir su tamaño y especifica dimensiones automáticamente.
Asset CleanUp
- Función: Desactiva scripts y estilos innecesarios en páginas específicas.
Font Awesome Plugin
- Función: Carga íconos y fuentes de forma eficiente.

Paso a paso para solucionar los problemas de diseño en WordPress

Instala WP Rocket y configura la carga diferida:
- Ve a «Settings» > «WP Rocket» y habilita la opción Lazy Load para imágenes y videos.
Añade precarga de fuentes en functions.php:
- Incluye el código para precargar fuentes y asegúrate de que estén alojadas localmente.
Configura el tamaño de imágenes automáticamente con Smush:
- Instala y activa el plugin.
- Ve a «Smush» > «Settings» y activa Resize original images.
Optimiza el CSS con Autoptimize:
- Agrupa y minifica archivos CSS desde «Settings» > «Autoptimize».
Audita tu sitio con Lighthouse:
- Realiza pruebas después de cada cambio para asegurarte de que el CLS mejora.

Códigos que puedes implementar para corregir los cambios de Diseño en un Post

Primer Fragmento de Código

// Evitar cambios de diseño (CLS) en WordPress
function optimizar_cls_wordpress() {
    // Precargar fuentes web para evitar cambios de diseño
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/assets/fonts/astra-google-fonts/lexend-normal-latin.woff2" as="font" type="font/woff2" crossorigin>';
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/assets/fonts/astra-google-fonts/plus-jakarta-sans-normal-latin.woff2" as="font" type="font/woff2" crossorigin>';

    // Asegurar que las imágenes tengan dimensiones definidas
    add_filter('the_content', 'agregar_atributos_imagenes');
}
add_action('wp_head', 'optimizar_cls_wordpress');

// Función para agregar atributos de ancho y alto a las imágenes
function agregar_atributos_imagenes($content) {
    // Usar una expresión regular para encontrar imágenes sin atributos de tamaño
    $content = preg_replace('/<img(.*?)(width|height)="(.*?)"(.*?)>/i', '<img$1$2="$3"$4>', $content);
    return $content;
}

Segundo Fragmento de Código

Este código nos solucionará el problema de los Cambios de Diseño de manera Global en todos los Posts que publiquemos, permitiendo alcanzar una buena puntuación en el PageSpeed Performance

// Evitar cambios de diseño en imágenes y videos
function fix_global_media_dimensions($content) {
    if (!is_singular()) {
        return $content;
    }

    $dom = new DOMDocument();
    libxml_use_internal_errors(true);
    $dom->loadHTML('<?xml encoding="UTF-8">' . $content);
    libxml_clear_errors();

    $images = $dom->getElementsByTagName('img');
    foreach ($images as $img) {
        if ($img->hasAttribute('src')) {
            $image_url = $img->getAttribute('src');
            $image_size = getimagesize($image_url);

            if ($image_size) {
                $img->setAttribute('width', $image_size[0]);
                $img->setAttribute('height', $image_size[1]);
            }
        }
    }

    $iframes = $dom->getElementsByTagName('iframe');
    foreach ($iframes as $iframe) {
        if (!$iframe->hasAttribute('width') || !$iframe->hasAttribute('height')) {
            $iframe->setAttribute('width', '560'); // Ajuste predeterminado
            $iframe->setAttribute('height', '315'); // Ajuste predeterminado
        }
    }

    return $dom->saveHTML();
}
add_filter('the_content', 'fix_global_media_dimensions');

// Establecer estilos CSS globales para prevenir CLS
function global_css_to_prevent_cls() {
    echo '<style>
        html {
            font-display: swap; /* Mejora la carga de fuentes */
        }
        body {
            margin: 0;
            padding: 0;
        }
        img, iframe, video {
            max-width: 100%;
            height: auto;
        }
        .site-content {
            min-height: 100vh; /* Evita saltos de altura */
        }
        .ast-flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>';
}
add_action('wp_head', 'global_css_to_prevent_cls');

// Preload de fuentes para evitar cambios visuales
function preload_fonts_for_global_site() {
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/plus-jakarta-sans-normal-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/lexend-normal-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
}
add_action('wp_head', 'preload_fonts_for_global_site');

// Añadir altura mínima al encabezado y pie de página para evitar CLS
function add_global_explicit_styles() {
    echo '<style>
        header, footer {
            min-height: 100px; /* Ajustar según diseño */
            display: block;
        }
        .ast-builder-layout-element {
            min-height: 50px; /* Establecer un mínimo para evitar saltos */
        }
    </style>';
}
add_action('wp_head', 'add_global_explicit_styles');

// Optimizar scripts y eventos dinámicos
function optimize_scripts_for_scroll_and_events() {
    echo '<script>
        // Listener pasivo para eventos de desplazamiento
        document.addEventListener("scroll", function(event) {}, { passive: true });

        // Listener pasivo para eventos táctiles
        document.addEventListener("touchstart", function(event) {}, { passive: true });
    </script>';
}
add_action('wp_footer', 'optimize_scripts_for_scroll_and_events');

Conclusión

Los cambios de diseño (CLS) son un problema crítico que puede afectar no solo la experiencia del usuario, sino también el SEO de tu sitio. Al abordar problemas como imágenes sin dimensiones, fuentes mal configuradas y elementos dinámicos, puedes mejorar significativamente tu puntuación en PageSpeed Insights y, por ende, la posición de tu sitio en los motores de búsqueda.

Para saber más acerca de los CLS te dejo esta guia sobre como optimizar el cambio de diseño acumulado.

Con estas estrategias y herramientas, tendrás un sitio más rápido, estable y optimizado para tus visitantes y para Google. ¡Empieza hoy mismo a mejorar tu CLS! 🚀