Categories
Core Web Vitals

Cambio de diseño acumulado – Descripción general de 2021 Factor de ranking de Google

Cambio de diseño acumulativo (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 entender lo que 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 que la página aún 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.

Minimización de CLS es importante porque las páginas que cambian alrededor pueden causar una experiencia de usuario deficiente.

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

AnuncioContinue leyendo a continuación

Por lo que CLS ocurre

según Google,Hay cinco razones por las cuales ocurre las razones por las cuales ocurre las imágenes de la disposición acumulada:

imágenes sin dimensiones.ads, incrustas y iframes sin dimensiones. Contenido inyectado digimalmente. Fuentes de tela que causan foit / fout.acciones que esperan una respuesta de red antes de actualizar la Red.

Las imágenes y los videos deben tener las dimensiones de altura y anchura 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 viejas utilicen la misma relación de aspecto.

AnunciCementContinue Reading a continuación

Google recomienda utilizar Aspectratiocalculculator.com para calcular los índices de aspecto. Es un buen recurso.

Los anuncios pueden causar CLS

Este es un poco complicado para tratar. Una forma de lidiar con los anuncios que causan que CLS es diseñar el elemento donde el anuncio va a mostrar.

Por ejemplo, si está al estilo DIV para tener una altura y anchura específicos, el anuncio se limitará a aquellos.

Hay dos soluciones si hay una falta de inventario y un anuncio. no se presenta.

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 posición de posición para llenar el espacio.

Alternativamente, para algunos diseños donde un anuncio llena una fila completa en la parte superior de la parte superior de quizás una columna en el canal derecho o izquierdo de una página web, si la página no aparece, no habrá un turno. No hará una diferencia en el móvil o en el 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 contenido que yos inyectado en la página web.

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

AnunciCementContinue leyendo a continuación

Fuentes basadas en la web

Las fuentes web descargadas pueden causar lo que se conoce como flash de texto invisible (foit) y flash de texto sin ajustar (FOUT).

Una forma de prevenir que es usar rel = “Precarga” en el enlace para descargar esa fuente web.

El faro puede ayudarlo a diagnosticar lo que está causando CLS.

CLS puede escabullirse durante el desarrollo

Cambio de diseño acumulado puede Deslice durante la etapa de desarrollo. Lo que puede suceder es que muchos de los activos necesarios para representar la página se cargan en el caché de un navegador.

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

AnunciCementContinue Lectura a continuación

Es por eso que es útil tener una medida en el laboratorio o en el campo.

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

El cálculo implica dos métricas / eventos. La primera se llama fracción de impacto.

Fracción de impacto

Fracción de impacto es una medición de la cantidad de espacio que un elemento inestable toma en la ventana.

Una viewport es lo que usted Ver en la pantalla móvil.

Cuando un elemento descarga y luego cambia, el espacio total que ocupó el elemento, desde la ubicación que ocupó en la ventana electrónica cuando se prestó primero en la ubicación final cuando se presenta la página .

PUBLICIDADContinúe leyendo a continuación

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

Cuando se agrega juntos, el valor del 75% se llama la fracción de impacto y Se expresa como una puntuación de 0.75.

Fracción de distancia

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

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

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

0.75 x 0.25 = 0.1875

Hay algunas matemáticas más y otras consideraciones que entran en el cálculo. . Lo que es importante para tomarDe lejos de esto, es que la puntuación es una forma de medir un factor de experiencia de usuario importante.

AnuncioContinue Lectura a continuación

Cómo medir CLS

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

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

dentro del entorno de Lab.

Las herramientas de laboratorio son las mejores para comprender cómo se puede realizar un diseño antes de presionarla a los usuarios. Le brinda a los editores la oportunidad de probar un diseño para problemas

.

Herramientas de laboratorio Consisten en Herramientas de desarrollo de cromo y

Faro

.

Comprenda el cambio de diseño acumulativo

Es importante para el UNDECambio de diseño acumulado resistido. No es necesario entender cómo hacer los cálculos usted mismo.

AnuncioContinue leyendo a continuación


Pero entendiendo lo que significa y cómo funciona es clave, ya que ahora se ha convertido en parte del factor de clasificación de los vitales web del núcleo.

Crédito de la imagen destacado: Paulo Bipa

Leave a Reply

Your email address will not be published. Required fields are marked *