Guía para principiantes: corrija el desplazamiento de diseño acumulativo en WordPress

¿Hay algún problema con el desplazamiento de diseño acumulativo de WordPress?

El sesgo de diseño acumulativo (CLS para abreviar) es una medida que se centra en la experiencia del usuario de la que forma parte.

Si alguna vez ha visto una página que salta al cargar, ha experimentado un cambio de diseño. También sé lo molestos que son los cambios acumulativos de diseño en WordPress. Sin embargo, es importante solucionar cualquier problema que ocurra en su sitio, ya que CLS no solo molesta a los visitantes, sino que también puede afectar la clasificación de los motores de búsqueda.

Afortunadamente, no es necesario ser un técnico para solucionar problemas de sesgo de diseño acumulativo. Al comprender las causas y saber cómo solucionarlas, puede reducir la cantidad de cambios inesperados en su sitio web.

Este artículo presenta la métrica de cambio de diseño acumulativo de Google y le muestra cómo identificar problemas de CLS en su sitio. Aquí hay tres formas fáciles de solucionar el problema y reducir el puntaje CLS de su sitio.

Descripción general del cambio de diseño acumulativo de WordPress

Los cambios de diseño ocurren cuando el contenido de la página se mueve sin la intervención del usuario.

Un ejemplo común es la carga lenta de anuncios que puede haber encontrado en sitios de medios. Es posible que solo haya comenzado a leer el texto de una página si el texto se ha "restringido" por un anuncio que aparece después de que la página ya se haya cargado.

Aquí hay algunas imágenes útiles de personas deweb.dev-El usuario quería hacer clic en No, Atrás, pero accidentalmente hizo clic en Sí, Ordenar porque el cambio de diseño movió el botón después de cargar la primera página.

Ejemplo de cambio de diseño

Cambio de diseño acumulativoEs una métrica que mide todos los cambios de diseño que ocurren en una página y los combina en una puntuación general. Hablaremos de anotar pronto. Sin embargo, en general, una puntuación alta indica una gran cantidad de cambios de diseño (malos) y una puntuación baja indica una pequeña cantidad de cambios de diseño (buenos). Además, una puntuación de 0 significa que está bien cambiar el diseño de su sitio. Esto es perfecto.

Como puede imaginar, las compensaciones de elementos pueden ser un dolor de cabeza para los usuarios. Esto puede dar lugar a clics o compras accidentales en partes de la página, como se muestra en el ejemplo anterior.

Muchos cambios de diseño pueden resultar visualmente molestos, incluso si no tienen un efecto directo. Junto con el hecho de que los tiempos de carga pueden ser lentos, este problema aparentemente pequeño puede tener un impacto serio en el espectador.

Desafortunadamente, ese no es el único problema con los puntajes de cambio de diseño acumulativos altos. Los cambios de diseño acumulativos también forman parte de la nueva iniciativa Google Core Web Vitals. Desde la actualización de Google Page Experience, Core Web Vitals del sitio se ha convertido en un pequeño factor de clasificación SEO. Esto puede conducir a problemas de CLS.

Cómo identificar problemas de desplazamiento de diseño acumulativo en WordPress

Para obtener una estimación acumulativa de los cambios de diseño de su sitio e identificar el problema, recomendamos utilizar:Estadísticas de velocidad de página.. Esto le da una puntuación CLS general para su sitio, pero va más allá y marca los cambios de diseño específicos que están causando el problema.

Para comenzar, escriba la URL en el cuadro y haga clic en Analizar. Este proceso solo toma unos minutos. Cuando vea los resultados, desplácese a las secciones Datos de laboratorio o Datos de campo para encontrar el puntaje de cambio de diseño acumulativo de su sitio.

Cómo encontrar puntajes de cambio de diseño acumulativos en WordPress

Desde aquí, puede determinar el rendimiento de su sitio en esa área. En general, hay tres rangos posibles para una puntuación CLS.

  • bien, 0.1 o menos
  • OK, 0,1-0,25
  • malo, 0,25 o más

Este indicador tiene un impacto directo, por lo que debe apuntar a la puntuación más baja posible. Para obtener consejos más específicos sobre cómo hacer esto, desplácese hacia abajo hasta la sección Diagnóstico y consulte Cómo evitar cambios de diseño grandes. Esta sección enumera los cambios de diseño individuales para su sitio.

Instrucciones de PageSpeed ​​​​Analytics sobre cómo evitar eventos CLS.

Esta información ayuda a señalar áreas específicas del sitio que pueden requerir trabajo. Una vez que haya identificado el problema, puede aplicar algunos métodos simples para resolverlo.

Cómo corregir los cambios de diseño acumulativos en WordPress (3 formas)

Veamos tres formas efectivas de resolver el problema CLS. Estos métodos son más efectivos cuando se usan juntos, por lo que es recomendable probar cada enfoque.

1. Agrega tamaño a imágenes, videos y anuncios

Si su sitio web tiene muchos medios, cada imagen y video pueden tener un tamaño diferente. No importa qué sitio uses, esto puede ser inevitable.

Básicamente, esta diferencia no afecta directamente la puntuación CLS. Sin embargo, esto sigue siendo una amenaza. Si no especifica las dimensiones del artículo, pueden surgir problemas.

Es necesario agregar dimensiones para proporcionar al navegador pasos de carga importantes. La información de dimensión ayuda al navegador 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, el diseño puede estar desalineado después de que se cargue la página. Los mismos principios se aplican a la publicidad del sitio y al material incrustado.

Afortunadamente, la última versión de WordPress resuelve este problema de manera significativa. Cuando inserta una imagen usando, WordPress determinará automáticamente su tamaño. Puede ver los resultados seleccionando los medios.

Un ejemplo de las dimensiones claras de la imagen.

Sin embargo, si agrega la imagen manualmente usando un código o un complemento, debe asegurarse de que el tamaño de la imagen exista.

Un problema aún mayor con CLS en WordPress es la publicidad. En ese caso, debe reservar espacio para estos anuncios para evitar CLS.

min-heightUna forma de hacer esto es aplicar la propiedad CSS al contenedor que también contiene la declaración.min-widthdivGoogle tiene una gran guía sobre cómo hacer esto...

Por ejemplo div, si está mostrando un anuncio con un ID de 300 x 250 píxeles en el interior, in-content-adpuede usar el siguiente código para reservar espacio.

Haga clic aquí para divINSERT código de promoción / div

Algunas herramientas promocionales también pueden tener herramientas para ayudar con esto. Por ejemplo, si es así, Google le proporcionaráeditor de anunciosPor favor, ayúdame con esto.

2. Precarga la fuente

Al igual que los archivos multimedia, su sitio probablemente use muchas fuentes diferentes. Esto significa que pueden ocupar diferentes cantidades de espacio. Sin embargo, a diferencia de multimedia, el tamaño de fuente no se puede configurar con precisión.

La solución es precargar estos activos. Precargar una fuente le dice al navegador que debe ser una de las primeras en generarse para una página en particular. Al incluir fuentes en primer lugar, no tiene que cambiar las modificaciones después del hecho.

Este método puede ser especialmente importante si está usando mucho. El tamaño puede ser significativamente diferente de las fuentes normales. Así que este simple cambio puede marcar una gran diferencia. Sin embargo, incluso los sitios independientes de fuentes pueden mejorar su puntaje CLS al menos ligeramente.

Muchos complementos incluyen opciones para precargar fuentes. Por ejemplo, Autoptimize, Asset CleanUp, Perfmatters, WP Rocket.

Para la mayoría de las personas, usar uno de estos complementos es la solución más fácil para precargar las fuentes de WordPress.

Sin embargo, los usuarios avanzados también pueden usar sus propios fragmentos de código para precargar las fuentes. Para agregar este código, debe editar header.php. Para editar este archivo, vaya a la parte superior del tema Editor de temas de apariencia para su sitio de WordPress.

Una sección transversal del encabezado del tema que se puede personalizar para reducir la posibilidad de sesgo de diseño acumulativo.

Después de editar el archivo en el tema secundario, header.phpdesplácese hacia abajo en la página, copie y pegue la siguiente línea de código roboto.woff2y reemplace la referencia a la fuente de muestra (en este ejemplo) con la referencia de fuente real. Archivos utilizados en el sitio:

link rel="preload" href="roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/

Cuando esté listo, haga clic en Actualizar archivo para guardar los cambios. Eso es todo lo que necesita hacer: ahora las fuentes de su sitio web tienen prioridad cuando se cargan en su navegador.

3. Optimiza el contenido dinámico

Finalmente, hablemos del contenido dinámico de su sitio. El contenido dinámico, como los consejos de instalación de aplicaciones, puede cambiar los diseños y hacer que sea necesario reconfigurar el navegador después de que la página ya casi se haya cargado.

Sin embargo, esto se aplica solo al contenido dinámico que no se desencadena por la interacción del usuario. Por ejemplo, cargar una barra de notificación automática para saludar a los usuarios en su página de inicio puede reducir su puntaje CLS.

Hay dos formas de arreglar esto.

  1. Ejecuta contenido dinámico solo después de la interacción del usuario. Esto no afecta la puntuación CLS. Por ejemplo, en lugar de mostrar el formulario de suscripción de correo electrónico inmediatamente, puede activarlo cuando el usuario hace clic en un botón para crear una suscripción de dos pasos.
  2. Use CSS para reservar espacio para elementos dinámicos, como se describe anteriormente. Por ejemplo, si usa CSS para reservar espacio para la barra de notificaciones en la parte superior de la página, aún puede cargar esa barra sin causar un desplazamiento del diseño.

Arreglar permanentemente el desplazamiento de diseño acumulativo de WordPress

Si desea crear una excelente experiencia de usuario y mejorar su puntaje en Core Web Vitals, es importante tener un puntaje de sesgo de diseño acumulativo bajo. Afortunadamente, este molesto problema se puede prevenir fácilmente. Con unos pocos ajustes simples, puede solucionar un problema de carga del sitio web.

En este artículo, describí tres formas de corregir y reducir el sesgo de diseño acumulativo en WordPress.

  1. Asegúrese de que todos los medios y tamaños de anuncios estén claramente definidos. WordPress procesa automáticamente las imágenes que incrusta en el editor, pero es posible que deba cambiar manualmente el tamaño de los anuncios y las imágenes que agrega fuera del editor.
  2. Precarga las fuentes para evitar ajustes de última hora.
  3. Preste atención a cómo implementa el contenido dinámico. Requiere interacción del usuario o reserva espacio para elementos dinámicos.

¿Tiene alguna pregunta sobre cómo mejorar el desplazamiento de diseño acumulativo en WordPress? ¡Cuéntanos en los comentarios!

Guía gratuita

5 consejos importantes para acelerar su sitio de WordPress

Simplemente siga algunos consejos simples y podrá reducir el tiempo de descarga en un 50-80%.

Descarga la guía gratuita

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir

Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información