Refonte de la page d'accueil : l'offre d'abord

J'ai compté les balayages. Debout dans une file d'attente, mon propre site ouvert sur mon téléphone, le pouce descendant vers la section qui dit ce que nous vendons réellement, j'ai compté 4,9 écrans. Cinq pleins écrans de téléphone en préambule avant qu'un visiteur apprenne quels services propose un studio logiciel. J'avais construit cette page section par section pendant deux mois, et chacune de ces sections avait été une bonne idée le jour où elle est arrivée.

C'est ainsi que l'architecture de l'information d'une page d'accueil déraille. Personne ne décide d'enterrer l'offre. L'ordre de la page finit par être l'ordre dans lequel le travail s'est fait — une chronologie qui signifie tout pour moi et rien pour la personne qui tient le téléphone. L'enchaînement d'une page est une affirmation sur le temps de qui compte le plus, et la mienne l'affirmait à tue-tête dans le mauvais sens.

L'ordre dans lequel le travail s'est fait

L'ancienne page comptait quatorze sections et faisait environ 13 900 pixels de haut. Elle ouvrait sur le hero, puis elle vagabondait : profondeur de marque, méthode, une accroche autonome pour le Reliquary, une section distincte expliquant notre cadence de sprint, et enfin — quelque part au-delà de l'horizon du scroll — les services et les tarifs. Chaque ajout avait été accolé là où il tenait, c'est-à-dire à la fin, et c'est ainsi qu'une page devient une couche de sédiments.

Ce qui rendait la chose difficile à voir, c'est que chaque section prise isolément était très bien. La section méthode expliquait bien notre méthode. Le rail de cadence était un joli morceau de design. Le problème n'était la qualité de rien : c'était qu'un visiteur de passage devait mériter la réponse à « qu'est-ce que vous faites ? » en allant la chercher au scroll, et la plupart des gens, à juste titre, ne le feront pas.

Une page d'accueil n'est pas une autobiographie. C'est une réponse, et la réponse a sa place tout en haut.

L'ordre que j'aurais dû livrer

Le nouvel enchaînement : hero, preuves, services, réalisations, le standard Vaynerov, le parcours, la vitrine des jeux, les étapes du Labo, tarifs, témoignages, FAQ, appel à l'action. Dans le code, il est écrit en commentaire au-dessus de la liste des sections, parce qu'un ordre de passage est le genre de décision qu'on défait discrètement quand on est pressé — moi le premier :

Preuve → offre → démonstration → profondeur de marque → méthode → terrain de jeu du labo → conclusion commerciale.

Les preuves passent avant l'offre, exprès. Le bandeau de métriques juste sous le hero est là pour acheter la crédibilité que la section services dépense ensuite. La démonstration — du vrai travail, de vraies études de cas — suit immédiatement, parce qu'une affirmation vérifiable bat une affirmation à croire. Ce n'est qu'après qu'on en vient à qui nous sommes et à comment nous travaillons, et la conclusion commerciale attend la fin, là où est sa place. Les services commencent désormais à 1,75 écran sur un téléphone.

Sous l'ordre de passage, il y a une règle visuelle à laquelle je tiens plus que je ne peux strictement le justifier. Un motif de circuit — un fin tracé, des marqueurs d'étape, la sensation qu'un courant traverse la page — parcourt les six premières sections. Il s'interrompt aux étapes du Labo, et il reprend aux témoignages avant de se terminer dans l'appel à l'action. La pause est tout l'intérêt. Le Labo est une autre pièce : les jeux, le musée, l'Orrery et Blueprint que nous avons livrés il y a trois jours. Faire passer le même courant dedans dirait que ces choses font partie de l'argumentaire, et ce n'est pas le cas. C'est l'atelier, aperçu par une porte ouverte.

Couper, c'est l'essentiel du travail

Réordonner, c'est la moitié facile. La page est devenue meilleure parce que deux sections ont cessé d'exister.

Le rail des semaines de cadence a fusionné avec la section parcours, où il aurait toujours dû se trouver : le parcours racontait déjà cette histoire en prose, et le rail la racontait une seconde fois en images, un écran plus loin. La section méthode de l'accueil a disparu purement et simplement ; qui veut la version complète peut lire la page Méthode, plus détaillée qu'une section d'accueil n'aura jamais le droit de l'être. Et le Reliquary a perdu son accroche personnelle : au 2 juillet, nous avions trois de ces instruments, et donner à l'un d'eux une section entière était devenu un accident d'ordre de publication plutôt qu'un jugement sur son importance.

À la place : un seul rail Labo, trois de front — Musée, Orrery, Blueprint. Ma première version posait le texte sur une plaque en surimpression au-dessus du média de chaque instrument, ce qui rendait très bien sur mon portable et tronquait le texte à 390 px de large, c'est-à-dire sur le téléphone avec lequel j'attendais dans la file. La reconstruction met le média en haut, le texte en dessous. Pas malin, mais ça rentre.

Une poignée de corrections plus petites ont fait le voyage : la pastille de mode de la vitrine des jeux se cache sous le point de rupture sm au lieu d'encombrer la carte ; chaque surtitre de section tient désormais son interlettrage de 0.3em du composant partagé SectionHeader plutôt que de ce que j'avais tapé ce jour-là ; la grille du standard est plafonnée à 1600 px pour cesser de s'étirer à l'horizon sur les écrans larges.

Quatorze sections et 13 900 pixels sont devenus douze et 12 500. La page dit plus qu'avant et elle est plus courte qu'avant, ce qui est le seul genre d'édition qui vaille la peine d'être fait deux fois.

Le sprint Lighthouse

La forme réglée, je suis allé chercher les chiffres, et c'est là que l'histoire cesse d'être une affaire de goût. Le desktop a terminé à 100/100. Le Speed Index est tombé de 1,7 s à 0,5 s, et le CLS de 0,079 à 0,001. Sur mobile, le Speed Index est passé de 4,3 s à 1,7 s, avec un total blocking time de 30 ms, un CLS nul et un LCP observé de 207 ms.

Deux des leviers consistaient à ne pas faire quelque chose. Notre préchargeur — le bref rideau aux couleurs de la marque — ne tourne plus que sur les navigations côté client, jamais sur un chargement à froid, où il se tenait devant une page déjà prête. Et Inter est servie en display: optional, ce qui veut dire que le navigateur utilise la police de repli au lieu de retenir un rendu en otage le temps d'un fichier de police. Aucun des deux changements n'est intéressant. Les deux étaient gratuits.

Deux astuces LCP, racontées honnêtement

Le reste du gain de Speed Index est venu de comprendre comment Chrome enregistre réellement le Largest Contentful Paint, et je veux décrire cela avec soin, parce que c'est la partie qui pourrait ressembler à de la triche.

D'abord : le titre du hero apparaissait en fondu. Chrome n'enregistre pas de candidat LCP textuel tant que l'animation d'opacité n'est pas terminée, si bien que notre horodatage LCP arrivait environ 2,5 secondes après que le titre était visuellement présent à l'écran. Les pixels étaient là. La mesure attendait la fin de l'animation avant d'en convenir. Retirer le fondu du titre a déplacé la métrique là où la réalité se trouvait déjà.

Ensuite, plus étrange : les autres entrées du hero démarrent maintenant à une opacité de 0,011, pas de 0, parce que les éléments à opacité exactement nulle sont totalement exclus du calcul du LCP. Onze millièmes, c'est invisible à l'œil humain et visible pour la métrique.

J'ai hésité un moment sur ce second point. Le test auquel je me suis arrêté : le changement rend-il le chiffre plus honnête ou moins ? Ici, le visiteur voit le titre exactement au même instant qu'avant — le score mentait sur une page qui était déjà rapide, et il ne ment plus. Si j'avais à la place retardé une image lourde pour que la métrique choisisse un élément moins coûteux, ce serait l'autre genre d'astuce, et cela mériterait un autre mot. Le préchargeur a eu le même traitement dans l'autre sens : son plancher d'affichage minimal est passé de 1800 ms à 1100 ms, et sur un appareil réel cela a fait passer la disparition de 2,5 s à 1,8 s. Ce n'est pas un ajustement de métrique. Ce sont 700 ms de la vie de quelqu'un, rendus.

Le contraste, et une navigation qui s'efface

L'accessibilité est passée de 95 à 100 sur desktop comme sur mobile, et le correctif qui comptait tenait en une variable. Notre couleur de premier plan sur les surfaces primaires et d'accent était le blanc, à 2,5:1 contre l'accent — un rapport de contraste qui échoue, purement et simplement, sur les boutons les plus cliqués du site. C'est désormais un turquoise profond, #042F2E, à 5,8:1. Du texte sombre sur un bouton turquoise vif m'a paru faux pendant environ une journée, puis m'a paru juste, ce qui correspond à peu près à la demi-vie d'une habitude de design. La performance desktop est passée de 94 à 97 dans la même passe.

Dernière pièce : la navigation. Sur une page qu'on fait défiler sur 12 500 pixels, une barre épinglée en permanence est une taxe permanente sur l'écran. La nôtre se cache désormais après 48 px de défilement vers le bas soutenu, passé un plancher de 160 px, et revient au bout de 10 px de défilement vers le haut — le plancher l'empêche de clignoter en haut de page, et l'asymétrie fait qu'elle apparaît au moment même où vous la cherchez. Le filet de progression de lecture placé dessous est une seule variable CSS écrite depuis le gestionnaire de défilement qui tournait déjà ; l'alternative aurait été un second écouteur pour calculer un nombre que le premier avait déjà.

Elle a aussi porté un petit bug du genre qui n'apparaît qu'en combinaison : avec le menu mobile ouvert, la transformation de la barre créait un contexte d'empilement qui coinçait son bouton en z-50 sous la surcouche en z-40. Ouvrez le menu, et le bouton pour le fermer cessait d'être cliquable. Le correctif retire la transformation sous [data-menu-open]. Par ailleurs, la barre desktop complète apparaît maintenant à xl (1280 px) plutôt qu'à lg, pour la raison très peu glorieuse qu'une mise en page honnête réclame environ 1232 px et que je lui demandais de tenir dans moins.

Rien de tout cela n'est terminé. Un ordre de sections est une hypothèse sur des inconnus, et la façon honnête de la tenir est de la tenir souplement — je m'attends à redéplacer des choses dès qu'il y aura assez de trafic pour me contredire. Mais la mesure que je garderai est celle que j'ai prise dans la file d'attente : non pas combien de sections a la page, mais combien d'écrans il faut pour répondre à la question avec laquelle le visiteur est venu. La nôtre est à 1,75 écran désormais. Si elle redérive, vous le saurez avant moi.