Un titre qui monte ligne par ligne, sans sortir du LCP

Un titre qui monte ligne par ligne, chaque mot sorti de derrière son cache : c'est l'effet le plus copié des sites primés, et ce site l'utilise. Il avait un défaut que rien ne montrait à l'écran : il faisait sortir le titre du LCP, la mesure que Google utilise pour juger la vitesse d'affichage d'une page.

Voici pourquoi, comment le vérifier chez vous en une minute, et la correction, qui garde l'animation.

(01)Ce que mesure le LCP

Le Largest Contentful Paint est le temps qu'il faut pour peindre le plus grand élément visible du premier écran : une image, une vidéo ou un bloc de texte. Google le relève chez vos vrais visiteurs, et le veut sous 2,5 secondes pour au moins trois visites sur quatre.

Deux règles de la mesure font tout le problème :

1. La taille d'un élément est relevée une seule fois, à la première image où il est peint. S'il grandit ensuite, ou s'il sort de derrière un cache, Chrome ne revient pas dessus.
2. Seule la partie visible compte. Ce qui dépasse de l'écran, ce qui est rogné par un overflow ou masqué par un clip-path n'entre pas dans la taille.

(02)Ce qui se passait

L'effet classique enferme chaque mot dans une boîte qui rogne ce qui dépasse, puis le fait remonter depuis le bas :

.split .w {
  display: inline-block;
  overflow: clip;
}
.split .w > span {
  display: inline-block;
}
.js .split .w > span {
  transform: translateY(115%);
  transition: transform 1100ms var(--ease-expo);
}

À la première image, chaque mot est sous son cache : la surface visible du titre est presque nulle. Chrome la note, n'y revient jamais, et le plus grand élément de la page devient un paragraphe, plus bas.

(03)Le vérifier chez vous

Ouvrez votre page dans une fenêtre de navigation privée et laissez-la se charger sans y toucher. Ouvrez ensuite la console des outils de développement (Option + Cmd + J sur Mac, Ctrl + Maj + J sous Windows), et collez ces lignes :

new PerformanceObserver((list) => {
  const last = list.getEntries().at(-1);
  console.log(Math.round(last.startTime), "ms", last.element);
}).observe({ type: "largest-contentful-paint", buffered: true });

buffered: true rejoue les mesures déjà prises : inutile de recharger. La ligne affichée donne le temps et l'élément retenu, que la console surligne dans la page quand on le survole. Si c'est votre titre, tout va bien. Si c'est un paragraphe, un logo ou une ligne de menu, votre titre ne compte pas.

(04)La correction

Deux règles, pour le premier écran seulement :

1. Pas de cache. Le titre est peint en entier dès la première image ; ses lignes montent de quelques pixels sans être rognées.
2. Un fondu qui part de 0,01, pas de 0. À 1 %, le titre est invisible à l'œil, et compté par Chrome.

.js .split.rise {
  animation: split-fade 800ms var(--ease-out) both;
  animation-delay: var(--delay, 150ms);
}
.js .split.rise .w {
  overflow: visible;
}
.js .split.rise .w > span {
  animation: split-up 1200ms var(--ease-expo) both;
  animation-delay: calc(var(--l, 0) * 80ms + var(--delay, 150ms));
}
@keyframes split-fade {
  from { opacity: 0.01; }
}
@keyframes split-up {
  from { transform: translateY(0.42em); }
}

L'œil y lit le même geste : des lignes qui montent l'une après l'autre. Le chronomètre, lui, y lit un titre affiché tout de suite.

Plus bas dans la page, le cache peut revenir. Le LCP cesse d'être mesuré dès que le visiteur fait défiler la page, touche l'écran ou tape une touche : un titre qui entre au défilement n'est plus candidat, il peut garder tout son effet.

(05)Ce que ce site applique

• Fait : Au premier écran, rien n'est caché au moment où il est peint.
• Fait : Un fondu d'entrée part de 0,01, jamais de 0.
• Fait : Les caches sont réservés à ce qui entre au défilement.
• Fait : Pour qui a demandé moins d'animations (prefers-reduced-motion), le titre s'affiche tel quel.

Le titre de cet article est animé exactement ainsi. S'il vous a semblé monter ligne par ligne, c'est que la correction ne coûte rien à l'effet.