¿Tiene problemas con el cambio de diseño acumulativo en WordPress?
El cambio de diseño acumulativo, o CLS para abreviar, es una métrica centrada en la experiencia del usuario que forma parte de la nueva iniciativa Core Web Vitals de Google .
Si alguna vez ha navegado por una página que salta mientras se carga, ha experimentado un cambio de diseño y también sabe lo molesto que puede ser el cambio de diseño acumulativo alto en WordPress. Pero más allá de molestar a sus visitantes, CLS también puede afectar su clasificación en los motores de búsqueda, por lo que es importante solucionar cualquier problema que tenga su sitio.
Afortunadamente, no necesita ser un genio de la tecnología para identificar y resolver los problemas de cambio de diseño acumulativo. Al comprender sus causas y saber cómo corregirlas, puede disminuir la cantidad de cambios inesperados en su sitio web.
En este artículo, le presentaremos la métrica de cambio de diseño acumulativo de Google y le mostraremos cómo detectar problemas con CLS en su sitio. Luego, lo guiaremos a través de tres formas fáciles de solucionar problemas y reducir el puntaje CLS de su sitio.
![📚]()
- ¿Qué es el cambio de diseño acumulativo?
- Cómo identificar problemas con el cambio de diseño acumulativo
- Cómo corregir el cambio de diseño acumulativo
Una introducción al cambio de diseño acumulativo en WordPress
El cambio de diseño ocurre cuando el contenido de su página se mueve sin interacción del usuario.
Un ejemplo común son los anuncios de carga tardía, que probablemente haya experimentado en sitios web de medios. Es posible que haya comenzado a leer el texto en la página solo para que el texto sea «empujado» hacia abajo por un anuncio que se muestra después de que la página ya se ha cargado.
Aquí hay una imagen útil de la gente de web.dev : el usuario tenía la intención de hacer clic en «No, volver», pero accidentalmente hizo clic en «Sí, hacer mi pedido» porque el cambio de diseño hizo que la ubicación del botón se moviera después de la carga de la página inicial:
El cambio de diseño acumulativo es una métrica que mide todo el cambio de diseño que ocurre en su página y lo pone en una sola puntuación. Hablaremos de anotar en un segundo. Pero, en general, una puntuación alta indica muchos cambios de diseño (malo), mientras que una puntuación baja indica pocos cambios de diseño (bueno). Y una puntuación de cero significa que su sitio no tiene problemas de cambio de diseño, lo cual es perfecto.
Como puede imaginar, cambiar elementos puede ser un dolor de cabeza para sus usuarios. Puede hacer que hagan clic sin darse cuenta en alguna parte de su página o incluso que hagan una compra accidentalmente, como lo demuestra el ejemplo anterior.
Incluso si no hay consecuencias directas, muchos cambios de diseño pueden ser visualmente discordantes. Combinado con el hecho de que puede ralentizar los tiempos de carga, este problema aparentemente pequeño puede tener un impacto grave en la experiencia de usuario (UX) de su audiencia .
Desafortunadamente, los problemas con un puntaje alto de Cambio de diseño acumulativo no terminan ahí. Cumulative Layout Shift también forma parte de la nueva iniciativa Core Web Vitals de Google. A partir de la actualización de la experiencia de la página de Google, las puntuaciones de Core Web Vitals de su sitio ahora son un pequeño factor de clasificación de SEO, lo que significa que los problemas con CLS pueden afectar las clasificaciones de su sitio .
Cómo identificar problemas con el cambio de diseño acumulativo en WordPress
Para encontrar la puntuación de cambio de diseño acumulativo de su sitio e identificar problemas, le recomendamos que utilice PageSpeed Insights . Le dará el puntaje CLS general de su sitio, pero también profundizará y señalará los problemas específicos de cambio de diseño que están causando problemas.
Para comenzar, ingrese su URL en el cuadro y haga clic en Analizar . El proceso solo debe tomar unos minutos. Cuando obtenga sus resultados, desplácese hacia abajo a las secciones Datos de laboratorio o Datos de campo y busque el puntaje de cambio de diseño acumulativo de su sitio:
Desde aquí, puede determinar qué tan bien se desempeña su sitio en esta área. Como regla general, hay tres rangos potenciales en los que puede caer su puntaje CLS:
- Bueno , que es igual o menor a 0.1
- OK , que está entre 0.1 y 0.25
- Malo , que es 0.25 o más
Dado que esta métrica tiene un impacto directo en la optimización de su Core Web Vitals , debe intentar obtener la puntuación más baja posible. Para obtener consejos más específicos sobre cómo hacerlo, puede desplazarse hacia abajo hasta la sección Diagnóstico y ver Evitar grandes cambios de diseño . Esta sección enumerará los cambios de diseño individuales en su sitio:
Esta información puede ayudar a señalar áreas específicas de su sitio que podrían necesitar un poco de trabajo. Una vez que haya identificado el problema, puede aplicar algunos métodos simples para resolverlo.
Cómo corregir el cambio de diseño acumulativo en WordPress (3 formas)
Veamos tres formas efectivas de resolver los problemas de CLS. Estos métodos son más poderosos cuando se usan juntos, por lo que lo alentamos a que pruebe cada enfoque.
1. Agregue dimensiones a sus imágenes, videos y anuncios
Si tiene muchos medios en su sitio web, es probable que cada imagen y video tengan dimensiones diferentes. Podría decirse que esto es inevitable sin importar qué tipo de sitio ejecute.
En esencia, esta variación no afecta directamente su puntaje CLS. Sin embargo, todavía representa una amenaza: si no especifica las dimensiones del artículo, puede comenzar a tener problemas.
Agregar dimensiones es esencial porque brinda instrucciones de carga vitales a los navegadores. La información de dimensión ayuda a los navegadores a reservar la cantidad correcta de espacio para ese activo.
Si el navegador no puede hacer esto, puede predecir la cantidad de espacio incorrecta. Como resultado, puede haber correcciones después de que se haya cargado la página, lo que lleva a un cambio de diseño. El mismo principio se aplica a los anuncios o cualquier material incrustado en su sitio.
Afortunadamente, las versiones recientes de WordPress solucionan en gran medida este problema. Si inserta una imagen a través del editor de WordPress, WordPress se encargará automáticamente de definir sus dimensiones por usted. Puede ver los resultados seleccionando cualquier elemento multimedia:
Sin embargo, si alguna vez agrega imágenes manualmente con código o mediante un complemento, querrá asegurarse de que las dimensiones de la imagen estén ahí.
Un problema mucho mayor con CLS en WordPress son los anuncios. Si está colocando anuncios en su contenido , deberá asegurarse de reservar espacio para esos anuncios para evitar CLS.
Una forma de hacerlo es aplicando las propiedades CSS min-heighty min-widthal
Por ejemplo, si muestra un anuncio de 300×250 px dentro de un divcon la identificación in-content-ad, podría reservar espacio usando este código:
COLOQUE EL CÓDIGO DEL ANUNCIO AQUÍ
Algunas herramientas publicitarias también pueden ofrecer herramientas para ayudarlo a lograr esto. Por ejemplo, si está utilizando Google Ads , Google proporciona un editor de anuncios para ayudarlo con esto.
2. Precarga tus fuentes
Al igual que con los medios, su sitio probablemente use muchas fuentes diferentes. Esto significa que también pueden ocupar cantidades variables de espacio. Sin embargo, a diferencia de los medios, no puede establecer exactamente las dimensiones de las fuentes.
La solución es precargar estos activos en su lugar. Precargar sus fuentes indica a los navegadores que debería ser una de las primeras cosas que genera para cualquier página determinada. Al incluir las fuentes a primera hora, elimina la necesidad de un cambio correctivo después del hecho.
Este método puede ser particularmente crítico si usa muchas fuentes personalizadas de WordPress . Estos pueden variar drásticamente en tamaño de las fuentes normales, lo que significa que este simple cambio puede tener un gran impacto. Sin embargo, es probable que incluso los sitios que dependen menos de las fuentes experimenten al menos una mejora menor en la puntuación CLS.
Muchos complementos de rendimiento de WordPress incluyen opciones para precargar fuentes. Por ejemplo, Autoptimize, Asset CleanUp, Perfmatters y WP Rocket.
Para la mayoría de las personas, usar uno de estos complementos es la solución más sencilla para precargar las fuentes de WordPress.
Sin embargo, para usuarios más avanzados, también puede precargar fuentes con su propio fragmento de código personalizado. Para agregar este fragmento de código, deberá editar el header.phparchivo de su tema secundario . Puede editar este archivo yendo a Apariencia > Editor de temas > Encabezado de tema en su sitio de WordPress:
Una vez que esté editando el header.phparchivo en su tema secundario, desplácese hasta la parte inferior de la página, luego copie y pegue la siguiente línea de código, asegurándose de reemplazar el enlace de fuente de ejemplo, roboto.woff2en este ejemplo, con el enlace real a la fuente. archivo que está utilizando en su sitio:
Cuando esté listo, haga clic en Actualizar archivo para guardar los cambios. Eso es todo lo que tiene que hacer: las fuentes de su sitio web ahora tendrán prioridad de carga en los navegadores.
3. Optimiza tu contenido dinámico
Finalmente, hablemos del contenido dinámico de su sitio. El contenido dinámico, como los formularios de registro de boletines informativos, las indicaciones de instalación de aplicaciones, los avisos del RGPD , etc., pueden causar cambios en el diseño al hacer que el navegador se reajuste después de que la página ya esté casi cargada.
Sin embargo, esto solo se aplica al contenido dinámico que no se desencadena por la interacción del usuario. Por ejemplo, si está cargando una barra de notificación automática para saludar a las personas en su página de inicio, esto podría dañar su puntaje CLS.
Hay dos formas de arreglar esto:
- Solo active el contenido dinámico después de la interacción del usuario, lo que no afectará su puntaje CLS. Por ejemplo, en lugar de mostrar el formulario de suscripción de correo electrónico de inmediato, tal vez lo active cuando un usuario haga clic en un botón para crear una suscripción de dos pasos.
- Use CSS para reservar espacio para los elementos dinámicos, similar a lo que discutimos anteriormente. Por ejemplo, si usa CSS para reservar espacio para la barra de notificación en la parte superior de su página, aún puede cargar esa barra sin causar un cambio de diseño.
Arreglar el cambio de diseño acumulativo en WordPress para siempre
Si desea crear una buena experiencia de usuario y mejorar su puntaje en Core Web Vitals, es importante tener un puntaje de cambio de diseño acumulativo bajo. Afortunadamente, prevenir este molesto problema no tiene por qué ser difícil. Puede corregir los problemas de carga de su sitio prestando atención a unas pocas configuraciones simples.
En este artículo, cubrimos tres formas de corregir y reducir el cambio de diseño acumulativo en WordPress:
- Asegúrese de que todos sus medios y anuncios tengan dimensiones claramente definidas. WordPress manejará automáticamente las imágenes que incrustes en el editor, pero es posible que debas definir manualmente las dimensiones de los anuncios y cualquier imagen que agregues fuera del editor.
- Precargue sus fuentes para evitar ajustes de última hora.
- Preste atención a cómo implementa el contenido dinámico, ya sea solicitando la interacción del usuario o reservando espacio para cualquier elemento dinámico.
¿Todavía tiene alguna pregunta sobre cómo mejorar el cambio de diseño acumulativo en WordPress? ¡Cuéntanos en los comentarios!
