Cómo optimizar el cambio de apariencia acumulativo en WordPress (CLS) – Core Web Vitals

¿Luchas con un mal cambio acumulativo en WordPress? El cambio de diseño acumulativo, o en CLS corto, es uno de los tres valores en el nuevo proyecto Core Vitals de Google. Más allá de ser generalmente una buena medida de la experiencia de los usuarios en su sitio, Google ha anunciado que comenzará a usar Core Web Vitals como factor de clasificación a partir de mayo de 2021. Por lo tanto, si su puntaje acumulativo no alcanza el rango recomendado por Google, querrá Remediarlo ahora para ponerse por debajo del umbral de Google y evitar cualquier problema (y también en general para crear una mejor experiencia para sus visitantes).
En esta publicación, explicaré qué es el cambio de diseño acumulativo y cómo se conecta a WordPress. Luego compartiré algunos consejos específicos de WordPress para mejorar su puntaje acumulativo para cambiar su aspecto. ¿Cuál es el cambio acumulativo de apariencia en WordPress? ¿Alguna vez ha leído un artículo en el sitio web de un editor (por ejemplo, noticias) y el contenido del artículo continuó siendo impulsado a medida que se cargaron nuevos anuncios? Esto no es solo molesto, ¡es el ejemplo perfecto de cambio acumulativo en la apariencia! El cambio de apariencia acumulativo es cuando el contenido de su sitio “cambia” a medida que se carga. Como probablemente experimentó en su propia vida, es muy molesto, por lo que Google alienta a los webmasters a prestar atención y mejorar este valor.
El cambio de diseño acumulativo también es uno de los tres valores de la iniciativa de Google Core Web Vitals: aprenda más sobre Core Web Vitals y WordPress. ¿Cuál es un buen puntaje acumulativo para cambiar el aspecto? Para comprender el cambio acumulativo en el aspecto de su sitio, Google proporciona un rango de tres valores posibles: Well-Below 0.1
Requiere una mejora: entre 0.1 y 0.25
Débil – mayor que 0.25
Cómo encontrar qué elementos cambian ahora en su sitio web, comience a seleccionar los pasos de consejos de actuación para mejorar su cambio de WordPress WordPress.

El artículo continúa a continuación

Sin embargo, antes de mejorar su puntaje, debe diagnosticar cuáles son los problemas. Afortunadamente, Google hace esto fácil de hacer a través de PageSpeed ​​Insights. PageSpeed ​​Insights para comenzar, acceder a PageSpeed ​​Insights y analizar una de las URL de su sitio, por ejemplo, su página inicial. En la parte superior, debería ver un resumen de su puntaje acumulativo para cambiar el aspecto:
Sin embargo, PageSpeed ​​Insights le permite profundizar y descubrir los elementos específicos que “cambian”. Para encontrar este análisis, desplácese hacia abajo hasta la sección de diagnóstico y extienda la guía para evitar los intercambios de gran apariencia:

Puede ver que el título de la cartera de mi sitio es el mayor contribuyente para cambiar la apariencia (aunque todavía es bastante pequeño). Asegúrese de mirar el análisis para resultados móviles y de escritorio. Por ejemplo, mientras que mi sitio tiene tres elementos que Google indica mientras mira el resultado móvil, no tiene un elemento marcado en los resultados de escritorio. Puede notar algo similar o puede tener un conjunto diferente de elementos de cambio para Mobile VS Desktop. Otra forma de ver el cambio de la apariencia Otra forma de ver cómo cambia el contenido de su sitio es usar herramientas de desarrollador de Chrome para ralentizar artificialmente la conexión (lo que facilita la detección del contenido que cambia incluso sutil). Vaya a la pestaña de red de las herramientas de los desarrolladores de Chrome y use el menú desplegable en línea para establecer un valor personalizado que sea muy lento para el ejemplo, descargue 60 kb/s: el elemento continúa a continuación

Luego recargue el sitio y debería poder ver mucho más claramente cómo cambia su contenido a medida que cobra. Una vez que sepa qué cambios, puede enfocar sus esfuerzos en remediar estos problemas. Sin embargo, hay algunas buenas prácticas generales para cambiar el aspecto acumulativo que debe implementar para evitar problemas a nivel de sitio. Desafortunadamente, cómo remediar el cambio acumulativo de apariencia en WordPress, en lugar de mejorar el mayor contenido de pintura en WordPress, reparar la apariencia acumulada puede volverse un poco técnico. Muchos de estos remedios implican cavar en el código. Desafortunadamente, es difícil no mirar el código aquí, pero haré todo lo posible para incluir soluciones de complementos cuando sea posible. Siempre establezca el tamaño de la imagen si no establece las dimensiones de la imagen en su sitio, sus imágenes pueden hacer que las imágenes puedan hacer que las imágenes puedan hacer que las imágenes puedan hacer que las imágenes puedan hacer que El resto de su contenido cambia a medida que cobran.


Afortunadamente, si agrega imágenes a través del editor de WordPress, WordPress lo hará automáticamente por usted (y también configurará imágenes receptivas con SRCSET). Sin embargo, si agrega imágenes manualmente en su sitio por código, deberá asegurarse de que siempre incluya las dimensiones. Debería ver la altura y el ancho de los atributos en la imagen HTML. Por ejemplo:


Siempre establezca las dimensiones para la incorporación/ifframes como con las imágenes, también querrá asegurarse de establecer dimensiones para cualquier incorporación/iframe que use. Por ejemplo, si incorpora un video de YouTube o Google Maps, asegúrese de especificar la altura y el ancho. También puede considerar cargar un sustituto antes de la incorporación, que también es generalmente una buena práctica. Puede encontrar muchas soluciones que le permitan reemplazar la incorporación de YouTube con una imagen sustituyente (hasta que un usuario haga clic para reproducir el video). Algunas buenas opciones son WP Rocket (nuestra revisión) o un complemento de carga perezosa gratuita del equipo de cohetes WP. El artículo continúa a continuación
El espacio de reserva para anuncios de anuncios es prácticamente otro tipo de incorporación, pero vale la pena una mención especial, porque los anuncios son uno de los mayores contribuyentes al Comulat de turno de diseño. Como mencioné anteriormente, estoy seguro de que estaba en un sitio donde el contenido continuó saltando debido a los anuncios que cobran tarde. La solución aquí es reservar espacio para sus anuncios en su código de sitio, por ejemplo, suponga que desea mostrar un anuncio de rascacielos de 160 × 600 en la barra lateral. En lugar de agregar el código de anuncio directo, puede colocarlo en un
con las dimensiones del anuncio. De esta manera, el espacio está reservado incluso si el contenido del anuncio aún no se ha cargado. Cuando se cobra el contenido publicitario, no causará ningún cambio.

Además, en general, debe tener cuidado al colocar anuncios en la parte superior de una ventana de visualización de visitantes, ya que estos destinos de colocación son los que tienen más probabilidades de causar la apariencia. Remedia los problemas de cargar la fuente Un gran problema para cambiar la apariencia es la forma en que se cargan las fuentes personalizadas. Por ejemplo, si usa fuentes de fuentes de Google o fuentes de adobe, pueden causar apariencia de dos maneras: Flash invisible de texto (FOIT)
Flash de texto sin texto (Fout)

Básicamente, el problema es que el navegador de un visitante podría intentar mostrar el texto antes de la carga de fuente personalizada. Una vez que la carga de fuente personalizada, actualizará el estilo del texto, lo que puede hacer que cambie a medida que pasa desde, por ejemplo, el texto sin texto a la fuente personalizada.

Hay algunas formas de resolver este problema. Una opción es precargar archivos importantes con fuentes. Esto obliga a los navegadores de los visitantes a descargar inmediatamente el archivo de fuentes, que elimina la posibilidad de foit/fout. Sin embargo, tenga cuidado de precargar solo el recurso más importante (por ejemplo, la fuente para el contenido por encima de la página). Demasiado uso de precarga ralentizará su sitio. Puede configurar una lista de elementos de fuentes para precargar con un complemento de autoadego gratuito en la sección adicional:
Para Google Fonts, también puede considerar el alojamiento local del archivo de fuentes y precargarlo de esta manera.Puede configurar esto con el complemento OMGF gratuito, que incluye una hermosa característica para precargar automáticamente las fuentes en la página.Si realmente desea tratar, Google también tiene un buen artículo sobre la combinación de la pre -carga con la pantalla de fuentes:
Opcional para optimizar realmente la carga de fuente y evitar cambiar la apariencia. Y si realmente desea evitar los problemas, considere usar un sistema de fuentes del sistema, lo que hago para muchos de mis sitios. Esto no solo resuelve problemas de carga de fuentes, sino que también reducirá el número de solicitudes HTTP y acelerará. Sin embargo, la desventaja es obviamente que tiene mucha menos flexibilidad cuando se trata de estilo/diseño. Preste atención a la inyección dinámica del contenido si inyecta dinámicamente contenido para cosas como el registro de correo electrónico, el contenido asociado, las notificaciones de GDPR, etc., entonces debe ser particularmente cuidadoso para evitar cambiar la apariencia. En general, una buena práctica aquí es nunca inyectar dinámicamente contenida por encima del contenido existente a menos que provenga de la interacción del usuario (por ejemplo, un usuario que hace clic en un botón). Por ejemplo, si va a inyectar un elemento CTA dinámico, intente colocarlo en la publicación del blog, no en la parte superior o en el medio. Mejore su puntaje acumulativo acumulativo de WordPress hoy con consejos en esta publicación, debería poder mejorar su puntaje de desplazamiento acumulativo de diseño (CLS) y beneficiarse del bienestar de Google. Por supuesto, el cambio de diseño acumulativo es solo uno de los tres valores centrales centrales vitales: tendrá que prestar atención a los demás.