TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

19

Google impulsa a los webmasters a implementar todas las medidas necesarias para mejorar la velocidad de carga de la página. La velocidad de carga de la página de su sitio web se mide en función de algunos parámetros, como puede ver en la herramienta Google PageSpeed ​​Insights. El cambio de diseño acumulativo (CLS) es uno de los criterios de medición de velocidad de Core Web Vital. Este es un factor importante no solo para mejorar la velocidad sino también para una mejor experiencia del usuario. En este artículo, explicaremos varias razones del problema de CLS y cómo solucionar el error de cambio de diseño acumulativo en WordPress.

¿Qué es el cambio de diseño acumulativo?

Antes de seguir leyendo, es necesario comprender qué es CLS. En términos simples, se trata de un cambio en el diseño del contenido que provoca una mala experiencia del usuario. Por ejemplo, está a punto de hacer clic en un botón en una página y, de repente, se carga una imagen de banner arriba y presiona el botón hacia abajo. En última instancia, terminará haciendo clic en la imagen sin querer, lo que puede llevarlo a otra página. Esta es una experiencia de usuario muy mala y Google tiene una buena explicación en este artículo que puede leer más.

Relacionado: ¿Cómo habilitar la carga diferida de imágenes en Google Chrome?

Comprobación del error de cambio de diseño acumulativo

Abra la herramienta Google PageSpeed ​​Insights (PSI) y verifique la velocidad de su página web. Puede verificar los datos de campo o el resumen de origen para confirmar que el problema de cambio de diseño acumulativo existe en su sitio. Puede colocar el cursor sobre la barra de progreso para encontrar el porcentaje acumulativo de carga en el que existe el problema en la página / sitio.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Compruebe el problema de CLS en PSI

Para encontrar los elementos que causan problemas, desplácese hacia abajo hasta la sección de diagnóstico y marque en "Evitar grandes cambios de diseño". Aquí, Google mostrará la lista de elementos que causan cambios de diseño en la página probada.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Evite grandes cambios de diseño

Verifique los detalles en la Consola de búsqueda de Google

Puede ver las URL de la página con el problema CLS en su cuenta de Google Search Console. Después de iniciar sesión en su cuenta, vaya a la sección "Core Web Vitals" en la sección "Mejoras". Puede encontrar los informes tanto para dispositivos móviles como para computadoras de escritorio para ver las páginas con "Problema de CLS: más de 0.25 (dispositivos móviles) / (computadoras de escritorio)".

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Problema de CLS en Google Search Console

Haga clic en el problema para ver la URL de muestra en su sitio afectado con el problema CLS y el tiempo promedio de CLS. Google considerará que CLS es un problema según la siguiente tabla:

Bien Necesita mejorar Pobre
<0,1 s 0,1 a 0,25 s > 0,25 s

Por lo tanto, debe apuntar a reducir el tiempo CLS en menos de 0.25 segundos para que este verde / amarillo en la herramienta PSI y eliminar los errores de su cuenta de Search Console.

Corregir el error de cambio de diseño acumulativo en WordPress

Estos son algunos de los factores que pueden causar un retraso acumulativo en el cambio de diseño en el sitio de WordPress. Expliquemos en detalle cada uno de los problemas y posibles soluciones.

1 Optimización de la entrega de CSS

Como puede ver en la captura de pantalla anterior de "Evite grandes cambios de diseño", el primer elemento es "<div class =" fila pie de página-fila ">". Esto es sorprendente ya que no hay posibilidades de cargar la sección de pie de página en la parte superior del área de plegado. Después de verificar, entendemos que esto se debe a la opción "Optimizar la entrega de CSS" habilitada con el complemento WP Rocket. Esta opción generará CSS crítico y lo insertará en la sección de encabezado para eliminar el bloqueo de renderizado de CSS. Sin embargo, conducirá a un problema de cambio de diseño acumulativo en muchos casos. Si está utilizando WP Rocket o cualquier otro complemento de almacenamiento en caché para insertar CSS en el encabezado, desactive esa opción y verifique si ayuda a mejorar el retraso de CLS.

2 AdSense y otras secuencias de comandos publicitarias en ATF

Muchos editores utilizan Google AdSense u otra red publicitaria para monetizar su contenido en línea. Debe insertar un fragmento de código de anuncio JavaScript en su página web para mostrar anuncios. Generalmente, debe insertar el código del anuncio en el área de la mitad superior de la página (ATF) para aumentar la visibilidad y los ingresos del anuncio. Sin embargo, esto afectará directamente la velocidad de carga de la página y creará un error de cambio de diseño acumulativo en la herramienta Google PageSpeed ​​Insight (PSI).

Después de cargar completamente el contenido de la mitad superior de la página, su anuncio comenzará a cargarse y a empujar el contenido hacia abajo.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Cambio de diseño debido a publicidad

Hay pocas opciones para solucionar este problema. Una es diferir el script de anuncios en WordPress usando complementos como WP Rocket. Sin embargo, esto afectará la impresión de su anuncio y la tasa de clics, lo que reducirá las ganancias generales.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Retrasar la ejecución de JavaScript de anuncios

La segunda opción es utilizar anuncios de ancho fijo en la parte superior del área de plegado como recomienda Google. Desafortunadamente, Google también deja en claro que el uso de un ancho fijo no es posible con anuncios receptivos o fluidos.

No es posible reservar espacio para estos espacios antes de solicitar contenido publicitario, y los anuncios de tamaño fluido siempre provocan cambios de diseño. Para mitigar los efectos de los cambios de diseño al trabajar con espacios publicitarios fluidos, recomendamos lo siguiente: Utilice únicamente el tamaño fluido para los espacios debajo del pliegue.

Google

Por lo tanto, en resumen, no puede solucionar el problema a menos que elimine el código de anuncio externo del área ATF. Esto es cierto para cualquier otro código de terceros que haya colocado en la sección de encabezado de su sitio.

3 Utilice las dimensiones de imagen adecuadas

Esto es similar a usar fijo con anuncios. Cuando no tiene las dimensiones de la imagen, los navegadores esperarán a que se carguen las imágenes y enviarán el contenido a continuación, lo que provocará un problema de cambio de diseño. Afortunadamente, esto no es un problema, ya que WordPress agregará automáticamente dimensiones a las imágenes cuando se carguen a través del editor de publicaciones. Sin embargo, debe agregar manualmente los parámetros de alto y ancho a la etiqueta img si está insertando imágenes manualmente usando el bloque "HTML personalizado", la función "Editar como HTML" o la imagen del logotipo. Además, defina un ancho y un alto fijos al incrustar videos e iframes de sitios web de terceros.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Falta ancho y alto para la imagen

4 fuentes que retrasan la carga de contenido

Todos los sitios web utilizan fuentes. Esto creará un problema de cambio de diseño acumulativo, especialmente cuando se utilizan servicios de terceros como las fuentes de Google. Dado que las fuentes de Google deben cargarse desde servidores externos, creará un problema de cambio de diseño acumulativo similar al del código de anuncios. También puede ver este problema en PSI como "Asegúrese de que el texto permanezca visible durante la carga de la fuente web", lo que indica que hay un retraso en la carga del contenido visible.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Problema de fuente

  • La forma eficaz de resolver este problema es utilizar un complemento de almacenamiento en caché para preconectar y precargar DNS dominios como fonts.googleapis.com y fonts.gistatic.com. Esto le ayudará a acelerar la carga de fuentes al preconectar el servidor de fuentes de Google. SG Optimizer, WP Rocket (automático) y muchos otros complementos ofrecen esta función que puede utilizar para este propósito. Además, puede limitar el número de familias de fuentes y los pesos reducen el tamaño del archivo de descarga.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Optimización de fuentes web SG Optimizer

5 iconos de fuentes en menú y ATF

Muchos temas de WordPress usan íconos de fuentes en el área de navegación para mostrar los elementos del submenú. Generalmente, estos iconos se incluyen en sitios web de terceros, como font awesome o icomoon. Esto creará problemas similares como fuentes y aumentará el tiempo de cambio de diseño acumulativo. Temas como GeneratePress le permiten elegir iconos SVG en lugar de fuentes para el menú de navegación. Del mismo modo, en el tema Astra puede desactivar la carga de la biblioteca de fuentes mediante una función personalizada. De esta manera, puede mejorar el problema de cambio de diseño acumulativo en WordPress. Sin embargo, no tendrá otra opción que deshabilitar los elementos del submenú en la mayoría de los otros temas, lo que no es una buena solución.

6 Logotipo de imagen de carga diferida

Los webmasters malinterpretan la advertencia de PSI sobre "Aplazar imágenes fuera de pantalla". Esta advertencia se produce cuando no carga de forma diferida las imágenes disponibles en el contenido de la mitad inferior de la página (BTF). Sin embargo, si usa un complemento en WordPress, todas las imágenes con HTML

Para reducir el tiempo de CLS en la herramienta PSI, debe excluir la imagen del logotipo de la carga diferida. La solución depende del complemento que utilice para cargar sus imágenes de forma diferida. Por ejemplo, en WP Rocket, vaya a la sección "Medios> Carga diferida" y proporcione el nombre del logotipo o la URL para excluir de la carga diferida.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Excluir el logotipo de la carga diferida

7 deslizadores de imagen de carga diferida en ATF

De manera similar al logotipo de la imagen, verá un tiempo de cambio de diseño acumulativo alto cuando tenga controles deslizantes de imagen en la parte superior del área de plegado. Puede excluir las imágenes del control deslizante de la carga diferida y probar que ayuda a reducir el tiempo de CLS.

Relacionado: 25 consejos de SEO para clasificar su sitio de WordPress.

8 Render que bloquea JavaScript como jQuery

El tema final es el popular JavaScript que bloquea el renderizado debido a los temas basados ​​en jQuery. De hecho, WordPress también incluye jQuery como parte de la carpeta wp-includes. Puede diferir jQuery y otros scripts de bloqueo de renderizado en su página utilizando un complemento de almacenamiento en caché como W3 Total Cache. Sin embargo, asegúrese de probar su sitio a fondo para evitar diseños defectuosos.

Corrección de validación en Google Search Console

Después de solucionar el problema, asegúrese de enviar sus validaciones en la cuenta de Google Search Console. Puede volver a la sección "Core Web Vitals" y enviar validaciones para todo el sitio.

¿Cómo corregir el cambio de diseño acumulativo en WordPress?

Validación del problema de CLS en Google Search Console

Google tardará hasta 28 días en comprobar el problema de CLS en su sitio y mostrar los resultados correspondientes en la cuenta de Search Console.

Conclusión

Como puede ver, la razón principal del error de cambio de diseño acumulativo en WordPress se debe a la colocación de scripts de bloqueo de renderizado en la parte superior del área de contenido. Pueden ser códigos publicitarios, jQuery, fuentes, íconos o cualquier otra cosa. La solución para superar este problema es utilizar temas minimalistas simples como GeneratePress o Astra. Por otro lado, puede usar complementos de almacenamiento en caché para preconectarse y combinar archivos de fuentes para reducir el tiempo de cambio de diseño acumulativo.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More