1) Especificar las dimensiones de la imagen
Especifique siempre, tanto el ancho como el alto de los elementos de imagen y vídeo de su sitio web para que se utilice el espacio correcto para los mismos.
Alternativamente, puedes usar cajas de CSS para hacer lo mismo.
Más info:
https://css-tricks.com/aspect-ratio-boxes/
2) Reducir los cambios de diseño causados por anuncios, incrustaciones y iframes
Para reducir los cambios de diseño causados por los anuncios, incrustaciones e iframes, haz cosas como:
Reservar el tamaño de la ranura del anuncio (preferiblemente la más grande) antes de cargar la biblioteca de anuncios.
Mueva los anuncios al fondo o fuera de la ventana.
Utilice marcadores de posición cuando no haya ningún anuncio disponible para mostrar.
Más info:
https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions
3) Evitar la inserción de nuevo contenido por encima del contenido existente
Trate de evitar la inserción de contenido dinámico (por ejemplo, banners, formularios, etc.) sobre el contenido existente, a menos que sea en respuesta a la interacción del usuario. Esto ayuda a evitar cambios inesperados de diseño.
Más info:
https://web.dev/optimize-cls/#dynamic-content
4) Prevención del Flash de Texto Invisible (FOIT)
El tema del Flash de Texto Invisible (FOIT) también puede afectar al CLS de su página. Asegúrese de que su texto permanezca visible durante la carga de las fuentes web precargando las fuentes web y/o usando el atributo font-display.
Más info:
https://gtmetrix.com/ensure-text-remains-visible-during-webfont-load.html#how-to-load-webfont
5) Evitar las animaciones no compuestas
Cuando sea posible, sólo realice animaciones compuestas para reducir el trabajo de hilo principal y evitar el repintado de píxeles durante la carga de la página.
🤠👺
