Rebuilding the Front Page: Putting the Offer First

I counted the swipes. Standing in a queue with my own site open on my phone, thumbing down toward the section that says what we actually sell, I counted 4.9 screens. Five full phone screens of preamble before a visitor learns what services a software studio offers. I had built that page section by section over two months, and every one of those sections had been a good idea on the day it landed.

That is how landing page information architecture goes wrong. Nobody decides to bury the offer. The order on the page ends up being the order the work happened in, which is a chronology that means everything to me and nothing to the person holding the phone. The sequence of a page is a claim about whose time matters more, and mine was making the wrong claim quite loudly.

The order the work happened in

The old page was fourteen sections and about 13,900 pixels tall. It opened with the hero, and then it wandered: brand depth, process, a standalone teaser for the Reliquary, a separate section explaining our sprint cadence, and eventually — somewhere down past the fold horizon — services and pricing. Each addition had been appended where it fit, which is to say at the end, which is how a page becomes a sediment layer.

What made it hard to see is that every individual section was fine. The process section explained our process well. The cadence rail was a nice piece of design. The problem was not quality anywhere; it was that a first-time visitor had to earn the answer to "what do you do" by scrolling for it, and most people, correctly, will not.

A landing page is not an autobiography. It is an answer, and the answer belongs near the top.

The order I should have shipped

The new sequence is: hero, proof, services, work, the Vaynerov Standard, the journey, the games showcase, the Lab stages, pricing, testimonials, FAQ, CTA. In the code it is written as a comment above the section list, because a running order is the kind of decision that gets quietly undone by the next person in a hurry — including me:

Proof → offer → evidence → brand depth → process → lab playground → commercial close.

Proof comes before the offer on purpose. The metrics band directly under the hero is there to buy the credibility that the services section then spends. Evidence — real work, real case studies — follows immediately, because a claim you can check beats a claim you must trust. Only then do we get to who we are and how we work, and the commercial close waits until the end where it belongs. Services now begin 1.75 screens down on a phone.

There is a visual rule underneath the running order that I care about more than I can strictly justify. A circuit motif — a thin traced line, stage markers, the sense that current is moving through the page — runs through the first six sections. It pauses at the Lab stages, and it resumes at the testimonials before terminating in the CTA. The pause is the point. The Lab is a different room: games, the museum, the Orrery and Blueprint that we shipped three days ago. Running the same current through it would say those things are part of the pitch, and they are not. They are the workshop, visible through a doorway.

Cutting is most of the work

Reordering is the easy half. The page got better because two sections stopped existing.

The sprint-cadence week rail merged into the journey section, where it had always belonged — the journey was already telling that story in prose, and the rail was telling it again in pictures one screen later. The standalone home process section went away entirely; anyone who wants the full version can read the process page, which is more detailed than a home section will ever be allowed to be. And the Reliquary lost its private teaser, because by July 2 we had three of these instruments and giving one of them a whole section had become an accident of publication order rather than a judgment about importance.

In its place: one Lab rail, three up — Museum, Orrery, Blueprint. My first version put the copy on an overlay plate on top of each instrument's media, which looked good on my laptop and clipped the text at 390 px wide, which is to say on the phone I had been standing in the queue with. The rebuild is media-top, copy-below. Not clever, and it fits.

A handful of smaller corrections rode along: the games showcase's mode chip hides below the sm breakpoint instead of crowding the card; every section eyebrow now gets its 0.3em tracking from the shared SectionHeader rather than from whatever I typed that day; the Standard grid is capped at 1600 px so it stops stretching into a horizon on wide monitors.

Fourteen sections and 13,900 pixels became twelve and 12,500. The page says more than it did and is shorter than it was, which is the only kind of edit worth doing twice.

The Lighthouse sprint

With the shape settled I went after the numbers, and this is where the story stops being about taste. Desktop finished at 100/100. Speed Index fell from 1.7 s to 0.5 s, and CLS from 0.079 to 0.001. Mobile Speed Index went 4.3 s to 1.7 s with total blocking time at 30 ms, CLS at zero, and an observed LCP of 207 ms.

Two of the levers were about not doing things. Our preloader — the brief branded curtain — now runs only on client-side navigations, never on a cold load, where it was standing in front of a page that was already ready. And Inter is served display: optional, which means the browser uses the fallback rather than holding a paint hostage to a font file. Neither change is interesting. Both were free.

Two LCP tricks, told honestly

The rest of the Speed Index win came from learning how Chrome actually records Largest Contentful Paint, and I want to describe this carefully because it is the part that could sound like cheating.

First: the hero headline used to fade in. Chrome does not record a text LCP candidate until the opacity animation lands, so our LCP timestamp was arriving roughly 2.5 seconds after the headline was visually present on screen. The pixels were there. The measurement was waiting for the animation to finish before it agreed they were. Removing the fade from the headline moved the metric to where reality already was.

Second, and stranger: the hero's other entrances now start at opacity 0.011, not 0, because elements at exactly zero opacity are excluded from LCP consideration entirely. Eleven thousandths is invisible to a human eye and visible to the metric.

I went back and forth on that second one for a while. The test I settled on is whether the change makes the number more honest or less. Here, a visitor sees the headline at the same instant they always did — the score had been lying about a page that was already fast, and now it is not. If I had instead delayed a heavy image so the metric picked a cheaper element, that would be the other kind of trick, and it would deserve a different word. The preloader got the same treatment in reverse: its minimum display floor dropped from 1800 ms to 1100 ms, and on a real device that took dismissal from 2.5 s to 1.8 s. That is not a metric adjustment. That is 700 ms of someone's life back.

Contrast, and a nav that gets out of the way

Accessibility went from 95 to 100 on both desktop and mobile, and the fix that mattered was one variable. Our foreground color on primary and accent surfaces was white, sitting at 2.5:1 against the accent — a contrast ratio that fails, plainly, on the most-clicked buttons on the site. It is now a deep teal, #042F2E, at 5.8:1. Dark text on a bright teal button looked wrong to me for about a day and then looked correct, which is roughly the half-life of a design habit. Desktop performance moved 94 to 97 in the same pass.

The last piece was the navigation. On a page you scroll for 12,500 pixels, a permanently pinned bar is a permanent tax on the screen. Ours now hides after 48 px of sustained downward scroll past a 160 px floor and returns on 10 px of upward scroll — the floor prevents it flickering at the top of the page, and the asymmetry means it appears the moment you reach for it. The reading-progress hairline underneath it is a single CSS variable written from the scroll handler that was already running; the alternative would have been a second listener to compute a number the first one already had.

It also carried a small bug of the sort that only appears in combination: with the mobile menu open, the bar's transform created a stacking context that capped its z-50 toggle button beneath the z-40 overlay. Open the menu, and the button to close it stopped being clickable. The fix strips the transform under [data-menu-open]. Separately, the full desktop bar now appears at xl (1280 px) rather than lg, for the unglamorous reason that laying it out honestly needs about 1232 px and I had been asking it to fit in less.

None of this is finished. Section order is a hypothesis about strangers, and the honest way to hold it is loosely — I expect to move things again once there is enough traffic to argue with me. But the measurement I will keep is the one I took in the queue: not how many sections the page has, but how many screens it takes to answer the question the visitor came with. Ours is 1.75 screens now. If it drifts back down, you will know before I do.