Le Layout Shift et les problèmes qui vont avec.
Les layout shifts sont ces décalages inattendus de l’UI après le chargement. Ça arrive très souvent et c’est un enfer en tant qu’utilisateur pressé. Ça ne vous est jamais arrivé de cliquer sur le mauvais bouton parce que la page change au bout de 3 secondes ?
Cumulative Layout Shift (CLS)
Google appelle ça le Cumulative Layout Shift (CLS) et c’est déjà bien documenté. Il faut lire ces articles sur, respectivement, le problème et les solutions.
Les règles sont claires et avec ces ressources, il ne devrait pas y avoir de problème, mais nous allons tout de même revenir sur deux points.
La performance et le lazy loading.
On voit souvent des conseils qui consistent à mettre du loading=lazypartout, à
décaler les chargements de beaucoup de choses. C’est généralement une bonne
idée. Mais comme pour tout, il y a des limites. Sur ce blog, par exemple, le
chargement de la page est extrêmement rapide. Mettre un font-display: swap;
est contre-productif et provoque des flashs et des recalculs conduisant à un
décalage gênant et donc à un ralentissement de la page.
Le même constat est fait du côté des images. Étant donné qu’elles sont en plein flux, au milieu de la page, différer le chargement provoque plus de gêne qu’autre chose.
Premier constat : utiliser les possibilités de lazy loading avec discernement.
Les problèmes causés par les opérations asynchrones au chargement
Une fois qu’on a pris la décision de différer le chargement de certaines ressources, il faut étudier les problèmes que cela peut engendrer. Un de ceux-ci est le layout shift.
Les images et autres blocs différés
Le problème du chargement des images (ou d’autres blocs affichés en JavaScript, par exemple) est le décalage qu’il crée de manière inattendue, puisque cela ne répond pas directement à une action utilisateur.
La solution est simple : réserver la place dont on aura besoin, soit avec des placeholders, soit avec des min-height. Le but étant qu’une fois l’action utilisateur traitée de manière synchrone, plus rien ne se décale dans le DOM.
Les polices
Un autre problème amusant est le chargement différé des polices. Il est possible
de mettre différentes options de chargement au font-face.
Deux des plus utilisées sont :
-
optionalpermet de ne pas charger la police si le chargement de la page se termine avant ou si le chargement de la police est trop lent. À utiliser avec précaution donc, puisque la police peut ne pas se charger. -
swappermet d’utiliser une police de base avant de la remplacer une fois que la police est téléchargée. Cela provoquera un recalcul de l’affichage et probablement un layout shift. On peut le minimiser avec des outils comme Générateur de fallback font ou Un autre générateur qui permettent de modifier une police pour correspondre à celle qui sera chargée ensuite. Une doc complète ici
Conclusion
On prendra soin de réfléchir un peu avant de mettre des chargements partout, car si le jeu en vaut parfois la chandelle, il implique aussi des problèmes qu’il faudra évaluer.
Il faut aussi le dire, le layout shift est une vraie plaie sur pas mal de sites web. Par pitié, si vous lisez ces lignes, faites tout pour l’éviter !