En mayo de 2020, Google presentó un conjunto de tres métricas importantes conocidas como Elementos fundamentales de la WebEstas métricas miden la experiencia general del usuario de un sitio web. El objetivo es simple: hacer de la web un lugar mejor para todos. Las tres métricas web esenciales son:
- Pintura con contenido más grande (LCP): Esto mide cuánto tiempo tarda el contenido principal de la página en aparecer en la pantalla.
- Retardo de la primera entrada (FID): Esto mide cuánto tiempo tarda un visitante en comenzar a interactuar con la página.
- Cambio de diseño acumulativo (CLS): Esto mide si la página es visualmente estable o si sus elementos se mueven mucho durante la carga.
Estas métricas son más que simples números para el posicionamiento en buscadores. Tienen un impacto directo en la experiencia de tus visitantes. Mejorar estas métricas no solo mejora tu posicionamiento, sino que también hace que tu sitio web sea un lugar más atractivo.
¿Qué es el cambio de diseño acumulativo?
Cambio de diseño acumulativo (CLS) Este artículo se centra en el tema principal. Aunque el nombre pueda parecer técnico, el concepto es simple. ¿Alguna vez has estado a punto de hacer clic en un botón o leer una línea de texto, y de repente aparece una imagen o un anuncio que lo desplaza todo hacia abajo? Esa experiencia desagradable se debe a un cambio de diseño. CLS mide cuánto se mueven los elementos de una página mientras se carga. Una buena puntuación CLS es de 0.1 o inferior. Cualquier puntuación superior a 0.25 se considera deficiente. Una puntuación baja significa una página más estable, lo que se traduce en una mejor experiencia para los usuarios.
¿Cómo se calcula el CLS?
La puntuación CLS es un número que va de 0 a 1. Una puntuación de 0 es perfecta, sin cambios de diseño, mientras que una puntuación cercana a 1 indica mucho movimiento. La matemática detrás de este número no es muy compleja: Puntuación de cambio de diseño = fracción de impacto * fracción de distancia. La función de fracción de impacto mide qué parte de la página se ve afectada por el cambio y fracción de distancia Mide la distancia de desplazamiento de los elementos. Por ejemplo, si un elemento grande se desplaza una distancia considerable, obtendrá una puntuación CLS baja. Cualquier cambio de diseño que se produzca en menos de medio segundo tras la interacción del usuario con la página (como hacer clic o escribir) no se contabiliza en la puntuación.
¿Cómo encuentro mi CLS?
Antes de poder corregir tu CLS, necesitas saber qué es. Hay diferentes maneras de obtener tu puntuación CLS.
Insights de Google Pagespeed
Puede ejecutar una comprobación de velocidad de página en Insights de Google Pagespeed, y verá la puntuación CLS indicada en el Datos de laboratorio sección. El informe también destacará las principales causas del CLS en el Diagnóstico Sección. Dependiendo del tráfico que reciba su sitio web, el informe también puede incluir Datos de campo, que se basa en las experiencias de usuarios reales.
Google Search Console
Tu consola de búsqueda tiene una Elementos fundamentales de la Web Informe que muestra qué páginas tienen un rendimiento bueno o malo. Este informe incluye su puntuación CLS, junto con su mayor contenido y el retraso de la primera entrada.
Faro de Google
También puede utilizar la función Lighthouse Pestaña "En las herramientas para desarrolladores de tu navegador". Puedes generar un informe completo de rendimiento, incluyendo el cambio de diseño acumulado. Es muy similar al informe de PageSpeed Insights, pero tiene una ventaja adicional: puedes generarlo en páginas que aún no son públicas, lo que lo convierte en una herramienta excelente para desarrolladores.
¿Qué causa el cambio de diseño acumulativo?
Las causas más comunes de los cambios de diseño se pueden solucionar con unos sencillos cambios. Aquí te presentamos las causas más comunes y cómo solucionarlas.
Imágenes y vídeos sin dimensiones
Esta es una de las causas más comunes de CLS. Cuando un navegador carga una página, primero se carga el código HTML, luego el CSS y, finalmente, las imágenes y los vídeos. Si no se especifica el ancho y el alto de una imagen o un vídeo, el navegador no sabe cuánto espacio reservar. Como resultado, el diseño cambiará una vez cargada la imagen. Esto es especialmente evidente en conexiones lentas.
¿Cómo arreglar esto?
La solución es sencilla: especifica siempre la altura y el ancho de tus imágenes en HTML. Esto le indica al navegador exactamente cuánto espacio reservar, para que el resto de la página se cargue correctamente. También debes asegurarte de que tus imágenes tengan un buen texto alternativo, ya que es fundamental. SEO en la página. nuestro gratis Generador de texto alternativo de imágenes con IA puede ayudarte a escribir una buena descripción para tus imágenes, lo que también es una excelente manera de mejorar tu SEO.
Anuncios
Los anuncios son una de las principales causas de CLS. Suelen cargarse y dirigirse a un visitante específico, y pueden tardar un tiempo en cargarse. Esto puede provocar un cambio repentino en el diseño, especialmente si el anuncio está en la parte superior de la página.
¿Cómo arreglar esto?
Al igual que con las imágenes, puedes especificar las dimensiones que quieres reservar para un anuncio. Esto garantizará que el diseño no se mueva una vez cargado. Se recomienda reservar el mayor espacio posible para el anuncio, incluso si se publica uno más pequeño.
Incrustaciones y i-frames
Si integras elementos como vídeos de YouTube, Google Maps o feeds de Twitter en tu página, debes tener cuidado con el CLS. No siempre se conoce el tamaño exacto del elemento, por lo que existe el riesgo de que se desplacen los diseños.
¿Cómo arreglar esto?
Debe intentar estimar bien el tamaño del elemento y reservar ese espacio en el diseño. Si no está seguro, considere establecer una altura o anchura máxima para ese elemento.
Fuentes web
Si cargas fuentes de servicios como Google Fonts, también podrías modificar el diseño. Mientras se carga una fuente, es posible que la página ya muestre una fuente de respaldo. Una vez que la fuente llega, se reemplaza, lo que modifica ligeramente el diseño.
¿Cómo arreglar esto?
Hay dos formas de reducir el efecto negativo de las fuentes web en CLS: configurando el atributo CSS visualización de fuentes a intercambio y hacer que las fuentes se carguen más rápido mediante la precarga y precarga de fuentes web. intercambio El atributo le dice al navegador que use la fuente alternativa hasta que la nueva fuente esté lista.
Contenido inyectado dinámicamente
Con la creciente popularidad del desarrollo web moderno, cada vez más páginas cargan su contenido dinámicamente. Las páginas contienen marcadores de posición que se rellenan solo después de que una llamada al servidor JavaScript devuelva el contenido correcto. Esto puede tardar un tiempo y provocar cambios en el diseño.
¿Cómo arreglar esto?
Siempre debes reservar espacio para el contenido que viene después. También debes asegurarte de que el contenido se cargue lo más rápido posible. Esta es una tarea técnica en la que un desarrollador puede ayudarte.
Conclusión
Los cambios de diseño son molestos para los visitantes y resultan en una mala experiencia de usuario. Desde 2021, los cambios de diseño también pueden afectar negativamente tu posicionamiento en Google. La buena noticia es que CLS tiene diferentes causas, y para cada una de ellas hay una solución relativamente sencilla. Una plataforma SEO automatizada. Clickrank Puede ayudarle con su SEO en la página, sus problemas técnicos y su contenido, para que pueda construir un sitio web sólido y con una buena clasificación.
