Optimiser le décalage de mise en page cumulé

Apprenez à éviter les changements soudains de mise en page pour améliorer l'expérience utilisateur

5 mai 2020
Mise à jour 20 août 2020

«I was about to Cliquez sur¿Qué es un click?Es la acción de pulsar un botón del ratón una vez colocado el puntero del mismo sobre un elemento determinado de la pantalla. El click determina la interacción del usuario con el sistema.Otras denominaciones: Clic Suite that! Why did it move? 😭»

Les changements de disposition peuvent distraire les utilisateurs. Imaginez que vous ayez commencé à lire un article quand tout d'un coup des éléments se déplacent autour de la page, vous jetant et vous obligeant à retrouver votre place. Ceci est très courant sur le Web, y compris lors de la lecture des actualités ou lorsque vous essayez de cliquer sur les boutons «Rechercher» ou «Ajouter au panier». De telles expériences sont visuellement choquantes et frustrantes. Ils sont souvent causés lorsque des éléments visibles sont forcés de se déplacer parce qu'un autre élément a été soudainement ajouté à la page ou redimensionné.

Cumulative Layout Shift (CLS) - une métrique Core Web Vitals, mesure l'instabilité du contenu en additionnant les scores de décalage entre les changements de mise en page qui ne se produisent pas dans les 500 ms suivant l'entrée de l'utilisateur. Il examine la quantité de contenu visible déplacé dans la fenêtre ainsi que la distance à laquelle les éléments impactés ont été déplacés.

Dans ce guide, nous aborderons l'optimisation des causes courantes des changements de disposition.

Les causes les plus courantes d'un CLS médiocre sont:

• Images sans dimensions
• Annonces, intégrations et iframes sans dimensions
• Contenu injecté dynamiquement
• Polices Web provoquant FOIT / FOUT
• Actions en attente d'une réponse du réseau avant de mettre à jour le DOM

Images sans dimensions 🌆

Résumé: Toujours inclure largeur et la taille attributs de taille sur vos images et éléments vidéo. Vous pouvez également réserver l'espace requis avec Boîtes de rapport hauteur / largeur CSS. Cette approche garantit que le navigateur peut allouer la bonne quantité d'espace dans le document pendant le chargement de l'image.

Histoire

Au début du Web, les développeurs ajoutaient largeur et la taille attributs à leur <img> des balises pour garantir qu'un espace suffisant a été alloué sur la page avant que le navigateur ne commence à récupérer les images. Cela minimiserait la redistribution et la mise en page.

<img src="puppy.jpg" largeur="640" la taille="360" alt="Puppy with balloons">

Vous remarquerez peut-être largeur et la taille ci-dessus n'incluent pas les unités. Ces dimensions «pixel» garantiraient qu'une zone de 640 × 360 serait réservée. L'image serait étirée pour s'adapter à cet espace, que les dimensions réelles correspondent ou non.

Lorsque Site Web adaptatif a été introduit, les développeurs ont commencé à omettre largeur et la taille and started using CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Suite to resize images instead:

img {
largeur: 100%; 
la taille: voiture;
}

Un inconvénient de cette approche est que l'espace ne peut être alloué à une image qu'une fois qu'elle a commencé à télécharger et que le navigateur peut déterminer ses dimensions. Au fur et à mesure que les images sont chargées, la page est redistribuée à mesure que chaque image apparaît à l'écran. Il est devenu courant que du texte apparaisse soudainement sur l'écran. Ce n'était pas du tout une excellente expérience utilisateur.

C'est là que le rapport hauteur / largeur entre en jeu. Le rapport hauteur / largeur d'une image est le rapport entre sa largeur et sa hauteur. Il est courant de voir cela exprimé sous forme de deux nombres séparés par deux points (par exemple 16: 9 ou 4: 3). Pour un rapport hauteur / largeur x: y, l'image a une largeur de x unités et une hauteur d'unités.

Cela signifie que si nous connaissons l'une des dimensions, l'autre peut être déterminée. Pour un format d'image 16: 9:

• Si chiot.jpg a une hauteur de 360px, la largeur est de 360 x (16/9) = 640px
• Si chiot.jpg a une largeur de 640px, la hauteur est de 640 x (9/16) = 360px

Connaître le rapport hauteur / largeur permet au navigateur de calculer et de réserver un espace suffisant pour la hauteur et la zone associée.

Bonnes pratiques modernes

Les navigateurs modernes définissent désormais le rapport hauteur / largeur par défaut des images en fonction des attributs de largeur et de hauteur d'une image, il est donc utile de les définir pour éviter les changements de disposition. Grâce au groupe de travail CSS, les développeurs ont juste besoin de définir largeur et la taille comme d'habitude:

<img src="puppy.jpg" largeur="640" la taille="360" alt="Puppy with balloons">

…et le Feuilles de style UA de tous les navigateurs ajoutent un rapport hauteur / largeur par défaut basé sur l'existant de l'élément largeur et la taille les attributs:

img {
ratio d'aspect: attr(largeur) / attr(la taille);
}

Ceci calcule un rapport hauteur / largeur basé sur le largeur et la taille attributs avant le chargement de l'image. Il fournit ces informations au tout début du calcul de la mise en page. Dès qu'une image est dite d'une certaine largeur (par exemple largeur: 100%), le rapport hauteur / largeur est utilisé pour calculer la hauteur.

Conseil: si vous avez du mal à comprendre le rapport hauteur / largeur, un calculatrice est disponible pour vous aider.

Les changements de rapport hauteur / largeur de l'image ci-dessus ont été livrés en Firefox et Chrome, et viennent à WebKit (Safari).

Pour une plongée fantastique dans le rapport hauteur / largeur avec une réflexion plus approfondie sur les images réactives, voir chargement de page sans tracas avec les rapports hauteur / largeur des médias.

Si votre image est dans un conteneur, vous pouvez utiliser CSS pour redimensionner l'image à la largeur de ce conteneur. Nous fixons hauteur: auto; pour éviter que la hauteur de l'image soit une valeur fixe (par exemple 360px).

img {
la taille: voiture;
largeur: 100%;
}

Qu'en est-il des images réactives?

Lorsque vous travaillez avec des images réactives, srcset définit les images que vous autorisez le navigateur à sélectionner et la taille de chaque image. S'assurer <img> Les attributs de largeur et de hauteur peuvent être définis, chaque image doit utiliser le même rapport hauteur / largeur.

<img largeur="1000" la taille="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w,
puppy-2000.jpg 2000w,
puppy-3000.jpg 3000w"
alt="Puppy with balloons"/>

Qu'en est-il de Direction artistique?

Les pages peuvent souhaiter inclure une photo recadrée d'une image dans des fenêtres étroites avec l'image complète affichée sur le bureau.

<photo>
<source moitié="(max-width: 799px)" srcset="puppy-480w-cropped.jpg">
<source moitié="(min-width: 800px)" srcset="puppy-800w.jpg">
<img src="puppy-800w.jpg" alt="Puppy with balloons">
</photo>

Il est très possible que ces images aient des proportions différentes et les navigateurs évaluent toujours la solution la plus efficace ici, y compris si les dimensions doivent être spécifiées sur toutes les sources. Jusqu'à ce qu'une solution soit décidée, le relais est toujours possible ici.

Annonces, intégrations et iframes sans dimensions 📢😱

Annonces

Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performanceEn el caso de las webs, el término Performance o rendimiento, se refiere a la velocidad de carga o a la potencia de cálculo de un servidor, es decir, a la velocidad a la que se transmiten los datos del servidor al cliente. Razones para una buena performance Una web que se carga lentamente, puede animar a los clientes potenciales a abandonar la página. Para asegurar una interacción fluida, se tiene Suite/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can conduire¿Qué es un lead?Persona que muestra interés por un producto, servicio o marca facilitando sus datos, normalmente por medio de del formulario de contacto de una landing page. Suite to a suboptimal user experience due to ads pushing visible content you’re viewing down the page.

Au cours du cycle de vie de l'annonce, de nombreux points peuvent introduire un changement de mise en page:

• Lorsqu'un site insère le conteneur d'annonces dans le DOM
• Lorsqu'un site redimensionne le conteneur d'annonces avec le code propriétaire
• Lorsque la bibliothèque de tags d'emplacement publicitaire se charge (et redimensionne le conteneur d'annonces)
• Lorsque l'annonce remplit un conteneur (et se redimensionne si l'annonce finale a une taille différente)

La bonne nouvelle est qu'il est possible pour les sites de suivre les meilleures pratiques pour réduire le déplacement des publicités. Les sites peuvent atténuer ces changements de disposition en:

• Réservez de manière statique de l'espace pour l'espace publicitaire.
  • En d'autres termes, stylisez l'élément avant le chargement de la bibliothèque de tags d'emplacement publicitaire.
  • Si vous placez des annonces dans le flux de contenu, assurez-vous que les décalages sont éliminés en réservant la taille de l'emplacement. Ces publicités ne devrait pas provoquer des changements de mise en page s'il est chargé hors écran.
• Faites attention lorsque vous placez des publicités non collantes près du haut de la fenêtre.
  • Dans l'exemple ci-dessous, il est recommandé de déplacer l'annonce sous le logo «vision du monde» et de veiller à réserver suffisamment d'espace pour l'emplacement.
• Évitez de réduire l'espace réservé si aucune annonce n'est renvoyée lorsque l'espace publicitaire est visible en affichant un espace réservé.
• Éliminez les décalages en réservant la plus grande taille possible pour l'espace publicitaire.
  • Cela fonctionne, mais cela risque d'avoir un espace vide si une création publicitaire plus petite remplit l'espace.
• Choisissez la taille la plus probable pour l'espace publicitaire en fonction des données historiques.

Certains sites peuvent trouver que la réduction initiale de l'espace publicitaire peut réduire les changements de mise en page s'il est peu probable que l'espace publicitaire se remplisse. Il n'existe pas de moyen simple de choisir la taille exacte à chaque fois, à moins que vous ne contrôliez vous-même la diffusion des annonces.

Réserver de manière statique de l'espace pour l'espace publicitaire

Style statique des éléments DOM de slot avec les mêmes tailles transmises à votre bibliothèque de balises. Cela peut aider à garantir que la bibliothèque n'introduit pas de changements de disposition lors de son chargement. Si vous ne le faites pas, la bibliothèque peut modifier la taille de l'élément slot après la mise en page.

Tenez également compte de la taille des petites diffusions d'annonces. Si une annonce plus petite est diffusée, un éditeur peut styliser le conteneur (plus grand) pour éviter les changements de mise en page. L'inconvénient de cette approche est qu'elle augmentera la quantité d'espace vide, alors gardez à l'esprit le compromis ici.

Évitez de placer des annonces en haut de la fenêtre

Les annonces situées en haut de la fenêtre d'affichage peuvent entraîner un changement de mise en page plus important que celles du milieu. En effet, les annonces en haut ont généralement plus de contenu plus bas, ce qui signifie que plus d'éléments se déplacent lorsque l'annonce provoque un décalage. À l'inverse, les annonces situées près du milieu de la fenêtre d'affichage peuvent ne pas déplacer autant d'éléments que le contenu au-dessus est moins susceptible de se déplacer.

Embeds et iframes

Embeddable widgetsConcepto de Widgets¿Qué son los Widgets?Los Widgets son una serie de pequeños programas que se usan para añadir funciones, simplificar o automatizar aquellas acciones que se lleven a cabo a menudo dentro de una web. Son herramientas adicionales, añadidos que se elaboran con la finalidad de hacer más fácil las labores de mantenimiento o inclusive de generación de contenidos dentro de cualquier sitio de Internet y que no han hecho Suite allow you to embed portable web content in your page (for example, videos from YoutubeConcepto de Youtube¿Qué es Youtube?Youtube es una de las plataformas más utilizadas e importantes de todo internet. Consiste en un rincón del océano digital dedicado única y exclusivamente al contenido en vídeo, permitiendo a los usuarios tanto publicar contenidos audiovisuales como consumirlos. Es el principal lugar al que acudir al momento de buscar algún documento en forma de vídeo o de ver cualquier tipo de publicación elaborada en este formato.Una Suite, maps from Google MapsConcepto de Google Maps¿Qué es Google Maps?Google Maps es el nombre de una aplicación desarrollada por Google que se encarga de ofrecer a los usuarios toda la información que necesiten sobre su ubicación actual, como además la de cualquier dirección específica, así como el trazado de recorridos para llegar al lugar que estos deseen desde donde se encuentran.Una app que aprovecha la conexión GPS de los smartphones y tablets y Suite, social media¿Qué es Social Media?Término en inglés que puede traducirse como medios sociales y que designa al conjunto de plataformas, herramientas, apps y medios de comunicación donde la información es creada y visualizada por los usuarios, que pueden compartir y transferir textos, fotografías, audio, vídeo… Dos ejemplos de social media son Facebook y Wikipedia.Otras denominaciones: Medios sociales Suite posts, and so on). These embeds can take a number of forms:

• HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las Suite fallback and a JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Suite tag transforming the fallback into a fancy embed
• Inline HTML fragmentConcepto de Snippet¿Qué es un Snippet?El Snippet es el pequeño texto que los buscadores muestran al momento de lanzar resultados a los usuarios que hacen una búsqueda. Suele ser un párrafo que acompaña al título que se muestra en grande, con un resumen del contenido de su interior. Consiste en una definición que se usa mucho dentro del campo de la web y, especialmente, del posicionamiento SEO.Los snippets pueden ser Suite
• iframeConcepto de Iframe¿Qué es un Iframe?Un Iframe es un documento de una web que se inserta en otra página web. Consiste en un elemento que puede albergar cualquier tipo de contenido en su interior y que ayuda, entre otras cosas, a ampliar el mensaje que se ofrece con fuentes externas o con material complementario que pueda resultar de interés para el usuario que entra.Este elemento web se usa especialmente al Suite embed

These embeds often aren’t aware in advance just how large an embed will be (for example, in the case of a social media PublierConcepto de Post¿Qué es un Post?Un Post es todo aquel contenido, sea post, opinión, noticia u otro género, que un autor publica en un blog. Este puede ser de carácter corporativo o meramente ocioso; pero siempre tiene como meta arrojar información o reflejar una idea, al mismo tiempo de facilitar que los usuarios encuentren la web donde se recoge por medio de de buscadores y demás plataformas online.Generalmente, se han Suite – does it have an embedded image? video? multiple rows of text?). As a result, platforms offering embeds do not always reserve enough space for their embeds and can cause layout shifts when they finally load.

To work around this, you can minimize CLS by precomputing sufficient space for embeds with a placeholder or fallback. One workflowConcepto de Workflow¿Qué es un Workflow?El Workflow o flujo de trabajo es un sistema con el que se busca automatizar determinado procesos dentro del ámbito laboral. Aplicado en el contexto del marketing, fundamentalmente el digital u online, reúne todas las acciones que se automatizan de forma que se ponen en marcha en función de los distintos tipos de usuario y su vinculación con la web de una marca. Un planteamiento Suite you can use for embeds:

• Obtenez la hauteur de votre intégration finale en l'inspectant avec les outils de développement de votre navigateur
• Une fois l'intégration chargée, l'iframe contenue se redimensionnera pour s'adapter à son contenu.

Prenez note des dimensions et stylisez un espace réservé pour l'intégration en conséquence. Vous devrez peut-être tenir compte des différences subtiles dans la taille des annonces / espaces réservés entre les différents facteurs de forme à l'aide de requêtes multimédias.

Contenu dynamique 📐

Résumé: Évitez d'insérer un nouveau contenu au-dessus du contenu existant, sauf en réponse à une interaction de l'utilisateur. Cela garantit que tous les changements de disposition qui se produisent sont attendus.

Vous avez probablement subi des changements de mise en page en raison de l'interface utilisateur qui apparaît en haut ou en bas de la fenêtre lorsque vous essayez de charger un site. Comme pour les publicités, cela se produit souvent avec des bannières et des formulaires qui déplacent le reste du contenu de la page:

• «Sign-up to our bulletin¿Qué es una newsletter?Publicación digital periódica, transmitida generalmente por medio de del email, con la que una marca de comunica con sus usuarios, que previamente se han suscrito a ella, autorizando el envío de información. Es una herramienta con la que se busca fidelizar a clientes y mantenerles actualizados con noticias de ofertas, promociones y nuevos productos.Otras denominaciones: Boletín informativo, NW Suite!» (whoa, slow down! we just met!)
• "Contenu associé"
• «Installez notre application [iOS / Android]»
• "Nous prenons toujours les commandes"
• «RGPDEl Reglamento General de Protección de Datos (GDPR) es un reglamento de la UE diseñado para regular y armonizar el almacenamiento y tratamiento de datos personales. El Reglamento afecta a las empresas, a las autoridades públicas y a los operadores web de la Unión Europea. El GDPR entró en vigor en la UE el 25 de mayo de 2018. Antecedentes Los primeros esfuerzos para proteger los datos personales y la Suite notice»

Si vous avez besoin d'afficher ces types d'attributions d'interface utilisateur, réservez à l'avance suffisamment d'espace dans la fenêtre (par exemple, en utilisant un espace réservé ou une interface utilisateur squelette) afin que, lors du chargement, le contenu de la page ne se déplace pas de manière surprenante. .

Polices Web provoquant FOUT / FOIT 📝

Le téléchargement et le rendu de polices Web peuvent entraîner des changements de mise en page de deux manières:

• La police de secours est remplacée par une nouvelle police (FOUT - flash de texte sans style)
• Le texte "Invisible" est affiché jusqu'à ce qu'une nouvelle police soit rendue (FOIT - flash de texte invisible)

Les outils suivants peuvent vous aider à minimiser cela:

• affichage de la police vous permet de modifier le comportement de rendu des polices personnalisées avec des valeurs telles que voiture, échanger, bloquer, se retirer et optionnel. Malheureusement, toutes ces valeurs (sauf optionnel) peut provoquer une nouvelle mise en page de l'une des manières ci-dessus.
• le API de chargement de polices peut réduire le temps nécessaire pour obtenir les polices nécessaires.

À partir de Chrome 83, je peux également recommander ce qui suit:

• Utilisant sur les polices Web clés: une police préchargée aura plus de chances de rencontrer la première peinture, auquel cas il n'y a pas de décalage de mise en page.
• Combiner et font-display: facultatif

Pour plus de détails, lisez Empêcher le changement de mise en page et les éclairs de texte invisible (FOIT) en préchargeant des polices facultatives.

Animations 🏃‍♀️

Résumé: Préférer transformer animations to animations of properties that triggerConcepto de Trigger¿Qué es un Trigger?Un trigger además conocido como disparador, es una especie de script en lenguaje de programación SQL, MySQL o PostgreSQL para base de datos.Se trata de una serie de procedimientos que se ejecutan, según instrucciones definidas, cuando se lleven a cabo determinadas operaciones, sobre la información que contiene una base de datos.Generalmente, un trigger se acciona cuando se ejecutan acciones para insertar, quitar o modificar los Suite layout changes.

Les modifications apportées aux valeurs des propriétés CSS peuvent obliger le navigateur à réagir à ces modifications. Un certain nombre de valeurs déclenchent la mise en page, la peinture et le composite tels que boîte ombre et dimensionnement de la boîte. Un certain nombre de propriétés CSS peuvent être modifiées de manière moins coûteuse.

Pour en savoir plus sur les propriétés CSS qui déclenchent la disposition, consultez Déclencheurs CSS et Animations hautes performances.

Outils de développement 🔧

Je suis heureux de partager qu'il existe un certain nombre d'outils disponibles pour mesurer et déboguer le décalage de mise en page cumulatif (CLS).

Phare 6.0 et ci-dessus incluent la prise en charge de la mesure du CLS dans un laboratoire. Cette version mettra également en évidence les nœuds qui causent le plus de changement de disposition.

le Panneau de performance dans DevTools met en évidence les changements de disposition dans le Vivre section à partir de Chrome 84. Le Résumé voir pour un Décalage de la disposition L'enregistrement comprend le score de décalage de mise en page cumulé ainsi qu'une superposition de rectangle montrant les régions affectées.

Il est également possible de mesurer le CLS réel agrégé au niveau de l'origine à l'aide du rapport d'expérience utilisateur de Chrome. Les données CrUX CLS sont disponibles via BigQuery et un exemple de requête pour regarder les performances CLS est disponible à utiliser.

C'est tout pour ce guide. J'espère que cela aidera à garder vos pages un peu moins sournoises 🙂

Merci à Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes et Gilberto Cocchi pour leurs précieux commentaires.