Die Startseite neu gebaut: das Angebot nach vorn

Ich habe die Wischer gezählt. In einer Schlange stehend, die eigene Seite auf dem Telefon offen, mit dem Daumen abwärts unterwegs zu der Sektion, die sagt, was wir eigentlich verkaufen, kam ich auf 4.9 Screens. Fünf volle Telefonbildschirme Vorrede, bevor ein Besucher erfährt, welche Leistungen ein Software-Studio anbietet. Ich hatte diese Seite über zwei Monate Sektion für Sektion gebaut, und jede einzelne davon war an ihrem Tag eine gute Idee gewesen.

So geht die Informationsarchitektur einer Landingpage schief. Niemand beschließt, das Angebot zu vergraben. Die Reihenfolge auf der Seite wird am Ende die Reihenfolge, in der die Arbeit passiert ist – eine Chronologie, die mir alles bedeutet und der Person mit dem Telefon in der Hand nichts. Die Abfolge einer Seite ist eine Aussage darüber, wessen Zeit mehr zählt, und meine machte diese Aussage ziemlich laut falsch.

Die Reihenfolge, in der die Arbeit passiert ist

Die alte Seite hatte vierzehn Sektionen und war rund 13,900 Pixel hoch. Sie begann mit dem Hero und schweifte dann ab: Markentiefe, Prozess, ein eigener Teaser für das Reliquary, eine separate Sektion über unsere Sprint-Taktung und irgendwann – weit unterhalb des Falzhorizonts – Leistungen und Preise. Jede Ergänzung war dort angehängt worden, wo sie passte, also am Ende, und so wird aus einer Seite eine Sedimentschicht.

Schwer zu erkennen war das, weil jede einzelne Sektion in Ordnung war. Die Prozess-Sektion erklärte unseren Prozess gut. Die Taktungs-Leiste war ein hübsches Stück Design. Das Problem war nirgends die Qualität; es war, dass ein Erstbesucher die Antwort auf „Was macht ihr eigentlich?“ durch Scrollen verdienen musste, und die meisten tun das zu Recht nicht.

Eine Landingpage ist keine Autobiografie. Sie ist eine Antwort, und die Antwort gehört nach oben.

Die Reihenfolge, die ich hätte ausliefern sollen

Die neue Abfolge ist: Hero, Nachweis, Leistungen, Projekte, der Vaynerov Standard, der Werdegang, das Games-Schaufenster, die Lab-Stationen, Preise, Stimmen, FAQ, CTA. Im Code steht sie als Kommentar über der Sektionsliste, denn eine Laufreihenfolge ist die Sorte Entscheidung, die von der nächsten Person in Eile still rückgängig gemacht wird – mich eingeschlossen:

Nachweis → Angebot → Belege → Markentiefe → Prozess → Lab-Spielplatz → kommerzieller Abschluss.

Der Nachweis kommt mit Absicht vor dem Angebot. Das Kennzahlenband direkt unter dem Hero steht dort, um die Glaubwürdigkeit zu kaufen, die die Leistungen-Sektion danach ausgibt. Die Belege – echte Arbeit, echte Case Studies – folgen sofort, denn eine überprüfbare Aussage schlägt eine, der man glauben muss. Erst danach kommen wir dazu, wer wir sind und wie wir arbeiten, und der kommerzielle Abschluss wartet am Ende, wo er hingehört. Die Leistungen beginnen jetzt 1.75 Screens weit unten auf dem Telefon.

Unter der Laufreihenfolge liegt eine visuelle Regel, die mir mehr bedeutet, als ich streng begründen kann. Ein Schaltkreis-Motiv – eine dünne gezogene Linie, Stationsmarken, das Gefühl, dass Strom durch die Seite fließt – läuft durch die ersten sechs Sektionen. Bei den Lab-Stationen pausiert es und setzt bei den Stimmen wieder ein, bevor es im CTA endet. Die Pause ist der Punkt. Das Lab ist ein anderer Raum: Games, das Museum, das Orrery und Blueprint, die wir vor drei Tagen ausgeliefert haben. Denselben Strom hindurchzuschicken würde behaupten, diese Dinge seien Teil des Pitches, und das sind sie nicht. Sie sind die Werkstatt, sichtbar durch eine offene Tür.

Streichen ist der größte Teil der Arbeit

Umsortieren ist die leichte Hälfte. Besser wurde die Seite, weil zwei Sektionen aufgehört haben zu existieren.

Die Wochen-Leiste zur Sprint-Taktung ging in der Werdegang-Sektion auf, wo sie immer hingehört hatte – der Werdegang erzählte diese Geschichte bereits in Prosa, und die Leiste erzählte sie einen Bildschirm später noch einmal in Bildern. Die eigenständige Prozess-Sektion auf der Startseite ist ganz verschwunden; wer die Langfassung will, liest die Prozessseite, die detaillierter ist, als eine Startseiten-Sektion je sein darf. Und das Reliquary hat seinen privaten Teaser verloren, denn bis zum 2. Juli hatten wir drei dieser Instrumente, und einem davon eine ganze Sektion zu geben war ein Zufall der Veröffentlichungsreihenfolge geworden, kein Urteil über Wichtigkeit.

An seiner Stelle: eine Lab-Leiste, drei nebeneinander – Museum, Orrery, Blueprint. Meine erste Version legte den Text als Overlay-Platte über die Medien jedes Instruments, was auf meinem Laptop gut aussah und bei 390 px Breite den Text abschnitt, also genau auf dem Telefon, mit dem ich in der Schlange gestanden hatte. Der Neubau ist Medien oben, Text darunter. Nicht clever, aber es passt.

Eine Handvoll kleinerer Korrekturen ritt mit: Der Modus-Chip im Games-Schaufenster verschwindet unterhalb des sm-Breakpoints, statt die Karte zu überfüllen; jede Sektions-Eyebrow bekommt ihr 0.3em-Tracking jetzt vom gemeinsamen SectionHeader statt von dem, was ich an dem Tag getippt habe; das Standard-Raster ist bei 1600 px gedeckelt, damit es sich auf breiten Monitoren nicht bis zum Horizont dehnt.

Aus vierzehn Sektionen und 13,900 Pixeln wurden zwölf und 12,500. Die Seite sagt mehr als vorher und ist kürzer als vorher, und das ist die einzige Art von Bearbeitung, die man zweimal machen will.

Der Lighthouse-Sprint

Als die Form saß, bin ich auf die Zahlen losgegangen, und hier hört die Geschichte auf, von Geschmack zu handeln. Desktop endete bei 100/100. Der Speed Index fiel von 1.7 s auf 0.5 s, CLS von 0.079 auf 0.001. Mobil ging der Speed Index von 4.3 s auf 1.7 s, bei 30 ms Total Blocking Time, CLS null und einem gemessenen LCP von 207 ms.

Zwei der Hebel bestanden darin, etwas zu unterlassen. Unser Preloader – der kurze gebrandete Vorhang – läuft jetzt nur noch bei clientseitigen Navigationen, nie beim Kaltstart, wo er vor einer Seite stand, die längst fertig war. Und Inter wird mit display: optional ausgeliefert, was heißt, dass der Browser den Fallback nimmt, statt einen Paint für eine Schriftdatei in Geiselhaft zu nehmen. Keine der beiden Änderungen ist interessant. Beide waren gratis.

Zwei LCP-Tricks, ehrlich erzählt

Der Rest des Speed-Index-Gewinns kam daher, zu verstehen, wie Chrome den Largest Contentful Paint tatsächlich aufzeichnet, und ich will das sorgfältig beschreiben, weil es der Teil ist, der nach Mogeln klingen könnte.

Erstens: Die Hero-Überschrift blendete früher ein. Chrome nimmt einen Text als LCP-Kandidaten erst auf, wenn die Opazitätsanimation steht, also traf unser LCP-Zeitstempel rund 2.5 Sekunden nach dem Moment ein, in dem die Überschrift sichtbar auf dem Bildschirm stand. Die Pixel waren da. Die Messung wartete darauf, dass die Animation endet, bevor sie ihnen zustimmte. Die Blende zu entfernen schob die Metrik dorthin, wo die Realität schon war.

Zweitens, und seltsamer: Die übrigen Auftritte im Hero starten jetzt bei Opazität 0.011 statt 0, weil Elemente mit exakt null Opazität von der LCP-Betrachtung komplett ausgeschlossen sind. Elf Tausendstel sind für ein menschliches Auge unsichtbar und für die Metrik sichtbar.

Bei diesem zweiten Punkt bin ich eine Weile hin und her gegangen. Der Test, bei dem ich gelandet bin, lautet: Macht die Änderung die Zahl ehrlicher oder unehrlicher? Hier sieht ein Besucher die Überschrift im selben Augenblick wie immer – die Bewertung hatte über eine Seite gelogen, die längst schnell war, und tut es jetzt nicht mehr. Hätte ich stattdessen ein schweres Bild verzögert, damit die Metrik ein billigeres Element wählt, wäre das die andere Sorte Trick und verdiente ein anderes Wort. Der Preloader bekam dieselbe Behandlung in umgekehrter Richtung: Seine Mindestanzeigedauer sank von 1800 ms auf 1100 ms, und auf einem echten Gerät ging das Verschwinden damit von 2.5 s auf 1.8 s. Das ist keine Metrikkosmetik. Das sind 700 ms von jemandes Leben zurück.

Kontrast, und eine Navigation, die Platz macht

Die Barrierefreiheit ging von 95 auf 100 – auf Desktop wie mobil –, und der Fix, auf den es ankam, war eine einzige Variable. Unsere Vordergrundfarbe auf Primär- und Akzentflächen war Weiß und lag bei 2.5:1 gegen den Akzent – ein Kontrastverhältnis, das schlicht durchfällt, und zwar auf den meistgeklickten Buttons der Seite. Sie ist jetzt ein tiefes Türkis, #042F2E, bei 5.8:1. Dunkler Text auf einem hellen Türkis-Button sah für mich ungefähr einen Tag lang falsch aus und danach richtig, was ungefähr die Halbwertszeit einer Designgewohnheit ist. Die Desktop-Performance ging im selben Durchgang von 94 auf 97.

Das letzte Stück war die Navigation. Auf einer Seite, die man 12,500 Pixel weit scrollt, ist eine dauerhaft angeheftete Leiste eine dauerhafte Steuer auf den Bildschirm. Unsere verschwindet jetzt nach 48 px anhaltendem Abwärtsscrollen jenseits einer 160-px-Schwelle und kehrt bei 10 px Aufwärtsscrollen zurück – die Schwelle verhindert Flackern am Seitenanfang, und die Asymmetrie sorgt dafür, dass sie in dem Moment auftaucht, in dem man nach ihr greift. Der Lesefortschritts-Haarstrich darunter ist eine einzige CSS-Variable, geschrieben aus dem Scroll-Handler, der ohnehin schon lief; die Alternative wäre ein zweiter Listener gewesen, der eine Zahl berechnet, die der erste bereits hatte.

Sie brachte auch einen kleinen Fehler mit, wie er nur in Kombination auftritt: Bei geöffnetem Mobilmenü erzeugte das Transform der Leiste einen Stacking Context, der ihren z-50-Toggle-Button unter das z-40-Overlay deckelte. Menü auf – und der Button zum Schließen war nicht mehr klickbar. Der Fix entfernt das Transform unter [data-menu-open]. Getrennt davon erscheint die volle Desktop-Leiste jetzt ab xl (1280 px) statt ab lg, aus dem unglamourösen Grund, dass ein ehrliches Layout dafür rund 1232 px braucht und ich sie gebeten hatte, mit weniger auszukommen.

Fertig ist davon nichts. Sektionsreihenfolge ist eine Hypothese über Fremde, und der ehrliche Umgang damit ist, sie locker zu halten – ich rechne damit, wieder etwas zu verschieben, sobald genug Traffic da ist, um mir zu widersprechen. Aber die Messung, die ich behalte, ist die aus der Schlange: nicht, wie viele Sektionen die Seite hat, sondern wie viele Bildschirme sie braucht, um die Frage zu beantworten, mit der der Besucher gekommen ist. Bei uns sind es jetzt 1.75 Screens. Wenn das wieder abrutscht, wissen Sie es vor mir.