¿Qué es exactamente para cambiar el aspecto acumulativo?

A finales de mayo de 2020, Google anunció una iniciativa para una mejor experiencia de usuarios en las páginas del sitio. La experiencia del usuario en los próximos meses comenzará a actuar como un factor de clasificación en el motor de búsqueda de Google. De acuerdo con este nuevo desarrollo, el instrumento Google PageSpeed ​​Insights ha agregado una nueva medición llamada apariencia acumulativa. En esta guía, superaremos lo que puede cambiar el aspecto acumulativo, lo que puede afectar sus puntajes y lo que en realidad es una puntuación baja para cambiar la apariencia acumulativa.

¿Cuál es el cambio acumulativo de apariencia? Para comprender lo que realmente está cambiando el aspecto acumulativo, desglosemos el término real. Cambiar la apariencia se refiere al movimiento de una página web después de cargar. Un ejemplo que Google da es que si lee un artículo, no desea que el texto o los elementos cambien de repente cuando esté en el medio de la lectura, porque perderá su lugar y tendrá que averiguar dónde está. Eran solo. Otro ejemplo sería si haga clic en un botón y se mueve repentinamente con una pulgada hacia arriba en la pantalla, calificaría para hacer clic en el botón, lo que resulta en una experiencia de usuario débil.
Este es un excelente ejemplo de cambiar la apariencia que causa una experiencia negativa para el usuario, creado por Google: el movimiento no solicitado de los elementos y los botones en las páginas web es bastante común y probablemente lo experimentará al navegar en Internet hoy. Cambiar la apariencia da como resultado una experiencia débil para el usuario, y su minimización lo más posible es esencial para obtener una puntuación alta en la métrica para cambiar la apariencia acumulada de Google PageSpeed ​​Insights. Ahora que entendemos lo que se cambia la apariencia y por qué puede ser un detrimento de la experiencia del usuario, comprender cuál es la apariencia acumulativa. Suming los puntajes de puntuación en los cambios de apariencia que no aparecen en 500 ms por la entrada del usuario. Mira cuánto contenido visible fue a la ventana de observación, así como la distancia a la que se movieron los elementos afectados. Para aclarar, Google manejará el movimiento en la página y luego medirá cuánto cambian los elementos individuales. Esto genera puntuaciones para cambiar la apariencia de cada cambio inesperado. Si queremos convertirnos en técnicas sobre cómo Google calcula este valor, use esta ecuación:
Diseño de cambio de puntaje = Fracción de impacto * Fracción de distancia Cada una de estas fracciones se calcula en función del movimiento de los elementos en relación con el tamaño de la ventana de visualización. Si desea obtener más información, puede leer la documentación de Google sobre CLS aquí https://web.dev/cls/. Tenga en cuenta que debido a que las pantallas de los teléfonos móviles son más pequeños, los cambios de apariencia generalmente tienen más impacto en los teléfonos. Dado que Google realmente promueve una agenda del primer asiento, podemos esperar razonablemente obtener el conmutador de cambio correcto en los dispositivos móviles es absolutamente esencial para que Google le brinde una puntuación. Google atribuye un signo de un puntaje de cambio a cada elemento individual, luego, luego Agrégalos todos para lograr un cambio acumulativo. Aquí hay un gran gráfico que explica cómo Google calcula el cambio de apariencia acumulativa.
El puntaje acumulativo del cambio de apariencia cuando se anota, cualquier puntaje por debajo de 0.1 es bueno, mientras que cualquier puntaje de .25 es malo.
Los buenos cambios de apariencia son importantes para entender que los cambios de apariencia no siempre pueden ser malos. Obviamente, si algo se mueve en la pantalla sin la entrada del usuario, alterando su lectura o experiencia en su sitio, entonces es malo. Pero si el usuario inicia el cambio de apariencia (como una barra de carga que se desliza en la parte superior de la página después de que un usuario hace clic en un botón, lo que conduce a un cambio de apariencia a medida que presiona el contenido en la pantalla), luego Esto en realidad puede ser beneficioso para la experiencia del usuario, ya que les proporciona información relevante.

Google entiende esto y excluirá cualquier cambio de apariencia que tenga lugar dentro de 0.5 segundos de la introducción del usuario. Entonces, volviendo a nuestro ejemplo, si el usuario hace clic en un botón en una página, nuestra barra de carga es de medio segundo que se muestra. Si se muestra en ese medio segundo, entonces este cambio de apariencia se excluye de nuestra puntuación. La capacidad de velocidad y reacción es esencial El número de 0.5 segundos es un aviso importante. Si tiene un sitio web con un rendimiento lento, incluso si su usuario cambia para cambiar la apariencia, pero no tiene lugar en 0.5 segundos, será penalizado por esto. Esto significa que, en los próximos meses, la optimización de sus sitios web de velocidad es esencialmente importante para obtener una buena puntuación de desplazamiento de diseño en Google PageSpeed. Animaciones y CLS ¿Puedes preguntar, pero ¿qué pasa con las animaciones? Las animaciones pueden mejorar la experiencia del usuario si se incorporan correctamente a un sitio web. Nuevamente, Google entiende esto, pero esta vez ofrece pautas más limitantes sobre cómo implementarlas. Google afirma:

En lugar de cambiar las propiedades de altura y ancho, use Transform: Scales ().
Para mover elementos, evite cambiar las propiedades superior, derecha, inferior o izquierda y usar a cambio: traducir ().
Esta sección de esta guía debería haber respondido lo que es cambiar el aspecto acumulativo, lo que sería una buena puntuación para cambiar el aspecto acumulativo y los factores que intervienen al calcular este nuevo valor en la velocidad de la página de Google.
Ahora hablemos de lo que necesita hacer para obtener un alto cambio acumulativo en la apariencia. Cómo obtener una puntuación alta con CLS para comprender cómo obtener una puntuación alta con el cambio de apariencia acumulativo, primero debemos comprender las principales causas de una puntuación débil. Después de identificar estas causas, puede pasar por su sitio web y hacer los remedios necesarios. La remedancia de estas causas ordinarias de una puntuación de cambio acumulativo bajo mejorará instantáneamente su experiencia de usuario, deleite y puntaje de página en este valor. Si no desea leer esta sección, lo más esencial que puede hacer para obtener una puntuación grande con turno de diseño de diseño El valor acumulativo en PageSpeed ​​es el siguiente: Reserve suficiente espacio en la ventana de vista para todo en su página web. Remedia las imágenes sin tamaño Lo primero que desea verificar son las imágenes sin dimensiones. Si no especifica el ancho y la altura de una imagen, cuando su página se carga, el navegador no asignará ningún espacio para esa imagen. Una vez que la imagen se carga, lo que dura más lento porque tiene un tamaño de archivo mucho más grande que CSS y HTML, empujará el contenido hacia arriba y hacia abajo, lo que dará como resultado un cambio de apariencia.
En este ejemplo de un gráfico, la página primero carga todo el texto.La imagen se carga después, en el medio del texto, lo que hace que el contenido se divida y empuje hacia arriba y hacia abajo, porque tiene que dejar espacio para la imagen.Esta es la definición manual de un cambio de apariencia y, debido a que no es causada por la entrada del usuario, tendrá un impacto negativo en su puntaje acumulativo.No puede cambiar que el texto se cargará más rápido que las imágenes, pero puede hacer que el texto se dividiera, justo antes de que se cargue la imagen.Si hay espacio para cargar la imagen, no tendrá que empujar el contenido hacia arriba y hacia abajo en la página.
Nota: Con la mayoría de las aplicaciones de WordPress, se especifican el ancho y la altura de la imagen/la relación de apariencia y no causará cambios de apariencia. Si no usa WP, lea más para averiguar las formas en que puede eliminar la apariencia causada por las imágenes. Puede hacer esto usando CSS para especificar etiquetas de ancho y altura. Sin embargo, esto puede ser perjudicial para el diseño receptivo. Una buena alternativa sería especificar la relación de apariencia, que el navegador usaría para calcular el ancho y la altura de la imagen al cargar la página. Esto significa que la imagen tendría un lugar para cargar y no causa cambios en la apariencia. Especificar una relación de aspecto estándar para sus imágenes usando CSS es bastante fácil de hacer: IMG {Ratio de aspecto: ATTR (ancho) / ATT (altura); } Con esto, todo lo que tiene que hacer es una dimensión única (altura o ancho), y la otra dimensión se calcula de acuerdo con la relación de apariencia. Además, si coloca su imagen en un contenedor, puede disminuirla receptivamente: img {altura: car; Ancho: 100%;
} Hay muchas formas específicas de garantizar que las imágenes de carga lenta no causen cambios de apariencia, pero el CSS mencionado anteriormente es un buen punto de partida. Nuevamente, con la mayoría de las aplicaciones de WordPress, se especifican el ancho y la altura de la imagen y no causarán cambios de apariencia. Concéntrese en iframe y los anuncios y anuncios de anuncios funcionan muy similares a las imágenes y debe especificar el ancho y la altura para que el navegador asigne el espacio requerido para la descarga. Si no especifica el ancho y la altura, estos elementos, que se cargan más lentamente que el contenido y la estructura de la página, causarán un cambio de apariencia. Yendo más allá, los anuncios dinámicos pueden cambiar sus dimensiones, si no los obliga a mantener una forma estándar. Básicamente, para cualquier elemento de página que se carga más lentamente que la página real o cambia dinámicamente, todo lo que tiene que hacer es reservar espacio a través de CSS, para que no presione el contenido. Mientras el artículo tenga suficiente espacio para cargar, no tenga que preocuparse por el CLS. Cargue las fuentes más rápido (agregando FOUT y FOIT) flashes de texto inutilizable y clips de texto invisibles causan cambios de apariencia y son perjudiciales para. Esto se debe a que las letras individuales y su espacio son diferentes entre las fuentes de navegador predeterminadas y las fuentes que elige usar en su sitio web. Si tu fuente
Se está cargando lentamente, cuando se carga, causará cambios de apariencia en toda la página (porque ocupa más espacio). Lo principal que debe saber sobre esto es que puede minimizar esto tanto como sea posible, pero es posible que nunca elimine los cambios de apariencia causados ​​por la carga de las fuentes. Esto se debe al hecho de que las fuentes son necesarias para su marca (no solo puede usar Times New Roman), y cuando se carga, cambiarán el aspecto de la página. Si precarga las fuentes (rel = precarga), se empujan arriba en el orden de carga del orden. Debido a que está cargado antes de otros elementos, el cambio de apariencia es extremadamente pequeño. Entonces, la mejor manera de abordar las fuentes es precargarlas y usar la pantalla de fuentes: opcional. Nombre del juego: fuentes más rápidas = mejores puntajes acumulativos. Refine Animaciones Lo último en lo que debe pensar son las animaciones. Google recomienda que el uso de la propiedad Transform en las animaciones CSS sea extremadamente complejo, por lo que escribiremos otra publicación de blog sobre ellas en el futuro. Si desea ver todas sus animaciones y su impacto en el aspecto, vaya a esta guía muy útil creada por Google: https://csstriggers.com/


Resumen Así que resumamos todo lo que se mencionó en esta publicación de blog. Lo primero es que cambiar el aspecto acumulativo es la puntuación acumulativa de todos los cambios en la página. Cambiar la apariencia es cuando un elemento causa un movimiento no solicitado de contenido en la página. Una puntuación débil es algo superior a 0.25, lo que significa que hay muchos cambios de apariencia en su página y la experiencia del usuario se ve afectada negativamente por esto. Al mismo tiempo, Google puede identificar los cambios de apariencia desencadenados por los usuarios y excluirlos de este puntaje siempre que aparezcan en medio segundo después de que se introduzca el usuario. El aumento del puntaje de apariencia acumulativo es importante, porque no solo conduce a una mejor puntuación de velocidad de página, sino que en los próximos meses lo usará para ayudarlos a calcular la experiencia del usuario del usuario. La experiencia del usuario pronto será una influencia directa en la clasificación de su sitio por Google y el lugar en los motores de búsqueda, por lo que es importante abordar esto ahora. Lo que se resume a: