Cambio de diseño acumulativo: descripción general del factor de clasificación de Google de 2021



Cumulative Layout Shift (CLS) es una métrica de Google que mide un evento de experiencia de usuario y se convirtió en un factor de clasificación en 2021.

Eso significa que es importante comprender qué es CLS y cómo optimizarlo.

Definición de cambio de diseño acumulativo

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

CLS es el cambio inesperado de elementos de la página web mientras la página aún se está descargando. Los tipos de elementos que tienden a causar cambios son fuentes, imágenes, videos, formularios de contacto, botones y otros tipos de contenido.

Minimizar CLS es importante porque las páginas que se desplazan pueden causar una mala experiencia de usuario.

Una puntuación CLS baja es indicativa de problemas de codificación que se pueden resolver.

Anuncio publicitario

Continuar leyendo a continuación

Por qué sucede CLS

Según Google, hay cinco razones por las que ocurre el cambio de diseño acumulativo:

  1. Imágenes sin dimensiones.
  2. Anuncios, incrustaciones e iframes sin dimensiones.
  3. Contenido inyectado dinámicamente.
  4. Fuentes web que causan FOIT / FOUT.
  5. Acciones que esperan una respuesta de la red antes de actualizar DOM.

Las imágenes y los videos deben tener las dimensiones de alto y ancho declaradas en el HTML. Con respecto a las imágenes receptivas, asegúrese de que los diferentes tamaños de imágenes para las diferentes vistas utilicen la misma relación de aspecto.

Anuncio publicitario

Continuar leyendo a continuación

Google recomienda utilizar AspectRatioCalculator.com para calcular las relaciones de aspecto. Es un buen recurso.

Los anuncios pueden causar CLS

Este es un poco complicado de manejar. Una forma de lidiar con los anuncios que causan CLS es diseñar el elemento donde se mostrará el anuncio.

Por ejemplo, si diseña el div para que tenga una altura y un ancho específicos, el anuncio se limitará a esos.

Hay dos soluciones si falta inventario y no aparece un anuncio.

Si un elemento que contiene un anuncio no muestra un anuncio, puede configurarlo para que se use un anuncio de banner alternativo o una imagen de marcador de posición para llenar el espacio.

Alternativamente, para algunos diseños en los que un anuncio llena una fila completa en la parte superior de quizás una columna en el margen derecho o izquierdo de una página web, si la página no aparece, no habrá un cambio. No hará una diferencia ni en dispositivos móviles ni en computadoras de escritorio. Pero eso depende del diseño del tema.

Tendrá que probarlo si el inventario de anuncios es un problema.

Contenido inyectado dinámicamente

Este es el contenido que se inyecta en la página web.

Por ejemplo, en WordPress, puede vincular a un video de YouTube o un Tweet y WordPress mostrará el video o tweet como un objeto incrustado.

Anuncio publicitario

Continuar leyendo a continuación

Fuentes basadas en web

Las fuentes web descargadas pueden causar lo que se conoce como Flash de texto invisible (FOIT) y Flash of Unstyled Text (FOUT).

Una forma de evitarlo es usar rel = ”preload” en el enlace para descargar esa fuente web.

Lighthouse puede ayudarlo a diagnosticar qué está causando CLS.

CLS puede colarse durante el desarrollo

El cambio de diseño acumulativo puede pasar durante la etapa de desarrollo. Lo que puede suceder es que muchos de los activos necesarios para representar la página se carguen en la memoria caché de un navegador.

La próxima vez que un desarrollador o editor visite la página en desarrollo, no notará un cambio de diseño porque los elementos de la página ya están descargados.

Anuncio publicitario

Continuar leyendo a continuación

Por eso es útil tener una medición en el laboratorio o en el campo.

Cómo se calcula el cambio de diseño acumulativo

El cálculo involucra dos métricas / eventos. El primero se llama Fracción de impacto.

Fracción de impacto

La fracción de impacto es una medida de cuánto espacio ocupa un elemento inestable en la ventana gráfica.

Una ventana gráfica es lo que ves en la pantalla del móvil.

Cuando un elemento se descarga y luego cambia, el espacio total que ocupó el elemento, desde la ubicación que ocupó en la ventana gráfica cuando se renderizó por primera vez hasta la ubicación final cuando se renderizó la página.

Anuncio publicitario

Continuar leyendo a continuación

El ejemplo que usa Google es un elemento que ocupa el 50% de la ventana gráfica y luego desciende otro 25%.

Cuando se suman, el valor del 75% se llama Fracción de Impacto y se expresa como una puntuación de 0,75.

Fracción de distancia

La segunda medida se llama Fracción de distancia. La fracción de distancia es la cantidad de espacio que el elemento de la página se ha movido desde la posición original a la posición final.

En el ejemplo anterior, el elemento de página se movió un 25%.

Así que ahora la puntuación de diseño acumulativa se calcula multiplicando la fracción de impacto por la fracción de distancia:

0,75 x 0,25 = 0,1875

Hay algunas consideraciones más matemáticas y de otro tipo que entran en el cálculo. Lo que es importante deducir de esto es que la puntuación es una forma de medir un factor importante de la experiencia del usuario.

Anuncio publicitario

Continuar leyendo a continuación

Cómo medir CLS

Hay dos formas de medir CLS. Google llama a la primera forma en el laboratorio. La segunda forma se llama en el campo.

En el laboratorio significa simular a un usuario real que descarga una página web. Google utiliza un Moto G4 simulado para generar la puntuación CLS en el entorno del laboratorio.

Las herramientas de laboratorio son las mejores para comprender cómo puede funcionar un diseño antes de enviarlo a los usuarios. Brinda a los editores la oportunidad de probar un diseño para detectar problemas.

Las herramientas de laboratorio consisten en Chrome Dev Tools y Lighthouse.

Comprender el cambio de diseño acumulativo

Es importante comprender el cambio de diseño acumulativo. No es necesario que comprenda cómo hacer los cálculos usted mismo.

Anuncio publicitario

Continuar leyendo a continuación

Pero comprender lo que significa y cómo funciona es clave, ya que ahora se ha convertido en parte del factor de clasificación de Core Web Vitals.

Crédito de la imagen destacada: Paulo Bobita

Botón volver arriba