Пересборка главной: предложение — вперёд

Я считал свайпы. Стоя в очереди с открытым собственным сайтом в телефоне и листая вниз к секции, где сказано, что мы, собственно, продаём, я насчитал 4.9 экрана. Пять полных телефонных экранов преамбулы, прежде чем посетитель узнаёт, какие услуги оказывает студия разработки. Я собирал эту страницу секция за секцией два месяца, и каждая из них в день своего появления была хорошей идеей.

Вот так и портится информационная архитектура лендинга. Никто не решает спрятать предложение. Просто порядок на странице оказывается порядком, в котором шла работа, — хронология, которая мне говорит обо всём, а человеку с телефоном в руке ни о чём. Последовательность страницы — это заявление о том, чьё время важнее, и моя делала это заявление довольно громко и совершенно неправильно.

Порядок, в котором шла работа

Старая страница — четырнадцать секций и около 13,900 пикселей высоты. Начиналась она с героя, а дальше блуждала: глубина бренда, процесс, отдельный тизер Reliquary, отдельная секция про наш ритм спринтов и уже где-то за горизонтом первого экрана — услуги и цены. Каждое добавление приписывалось туда, где помещалось, то есть в конец, — так страница и превращается в осадочный слой.

Заметить это мешало то, что каждая отдельная секция была нормальной. Секция процесса хорошо объясняла процесс. Лента ритма была приятным куском дизайна. Проблема была не в качестве, а в том, что впервые пришедший посетитель должен был заслужить ответ на вопрос «что вы делаете», пролистав до него, — а большинство людей, совершенно справедливо, этого не делает.

Лендинг — не автобиография. Это ответ, а ответу место наверху.

Порядок, который надо было выпустить сразу

Новая последовательность такая: герой, доказательство, услуги, работы, стандарт Vaynerov, путь, витрина игр, стадии Лаборатории, цены, отзывы, FAQ, призыв к действию. В коде она записана комментарием над списком секций, потому что порядок — это ровно то решение, которое тихо отменяет следующий человек в спешке, включая меня:

Доказательство → предложение → свидетельства → глубина бренда → процесс → площадка Лаборатории → коммерческое закрытие.

Доказательство идёт перед предложением намеренно. Полоса метрик сразу под героем нужна, чтобы купить кредит доверия, который затем тратит секция услуг. Свидетельства — настоящие работы, настоящие кейсы — следуют немедленно, потому что заявление, которое можно проверить, бьёт заявление, которому нужно верить. И только потом идёт, кто мы такие и как работаем, а коммерческое закрытие ждёт своего места в конце. Услуги теперь начинаются на 1.75 экрана вниз на телефоне.

Под порядком лежит визуальное правило, которое мне дорого больше, чем я могу строго обосновать. Мотив печатной платы — тонкая трасса, метки стадий, ощущение идущего сквозь страницу тока — проходит через первые шесть секций. Он берёт паузу на стадиях Лаборатории и возобновляется на отзывах, чтобы оборваться в призыве к действию. Пауза и есть смысл. Лаборатория — другая комната: игры, музей, Orrery и Blueprint, которые мы выпустили три дня назад. Пустить через неё тот же ток значило бы сказать, что всё это часть коммерческого предложения, — а это не так. Это мастерская, которую видно через дверной проём.

Резать — это большая часть работы

Перестановка — лёгкая половина. Страница стала лучше оттого, что две секции перестали существовать.

Лента недельного ритма спринтов слилась с секцией пути, где ей всегда было место: путь уже рассказывал ту же историю прозой, а лента рассказывала её ещё раз картинками экраном ниже. Отдельная секция процесса на главной исчезла целиком — кому нужна полная версия, тот прочтёт страницу процесса, которая подробнее, чем секции на главной когда-либо будет позволено быть. А Reliquary лишился персонального тизера: к 2 июля таких инструментов у нас стало три, и отдельная секция для одного из них превратилась в случайность порядка публикации, а не в суждение о важности.

Вместо этого — одна лента Лаборатории, три в ряд: музей, Orrery, Blueprint. Первая моя версия клала текст на плашку поверх медиа каждого инструмента; на ноутбуке это смотрелось хорошо, а на ширине 390 px обрезало текст — то есть ровно на том телефоне, с которым я стоял в очереди. Пересобрано просто: медиа сверху, текст под ним. Не остроумно, зато помещается.

Попутно проехала горсть мелких исправлений: чип режима в витрине игр прячется ниже брейкпоинта sm, вместо того чтобы теснить карточку; каждый надзаголовок секции получает свой трекинг 0.3em из общего SectionHeader, а не из того, что я в тот день набрал руками; сетка «Стандарта» ограничена 1600 px, чтобы перестать растягиваться в горизонт на широких мониторах.

Четырнадцать секций и 13,900 пикселей стали двенадцатью и 12,500. Страница говорит больше, чем говорила, и при этом короче, чем была, — а это единственный вид правки, который стоит делать дважды.

Спринт по Lighthouse

Когда форма устоялась, я взялся за числа — и с этого места история перестаёт быть про вкус. Десктоп закончил на 100/100. Speed Index упал с 1.7 с до 0.5 с, CLS — с 0.079 до 0.001. На мобильном Speed Index прошёл путь с 4.3 с до 1.7 с при общем времени блокировки 30 мс, нулевом CLS и наблюдаемом LCP 207 мс.

Два рычага из этих были про «не делать». Наш прелоадер — короткая фирменная занавесь — теперь работает только при клиентской навигации и никогда на холодной загрузке, где он стоял перед страницей, которая и так была готова. А Inter отдаётся с display: optional, то есть браузер берёт запасной шрифт, а не держит отрисовку в заложниках у файла шрифта. Ни то ни другое не интересно. И то и другое было бесплатным.

Два трюка с LCP, рассказанные честно

Остальной выигрыш в Speed Index пришёл из понимания того, как Chrome на самом деле фиксирует Largest Contentful Paint, и я хочу описать это аккуратно, потому что именно эта часть может прозвучать как жульничество.

Первое: заголовок героя раньше проявлялся плавно. Chrome не засчитывает текстового кандидата на LCP, пока не завершится анимация прозрачности, поэтому наша отметка LCP приходила примерно на 2.5 секунды позже, чем заголовок физически появлялся на экране. Пиксели были на месте. Измерение ждало конца анимации, прежде чем с этим согласиться. Убрав проявление у заголовка, я перенёс метрику туда, где реальность уже находилась.

Второе, и более странное: остальные появления в герое теперь стартуют с прозрачности 0.011, а не 0, потому что элементы с ровно нулевой прозрачностью исключаются из рассмотрения для LCP целиком. Одиннадцать тысячных невидимы человеческому глазу и видимы метрике.

Со вторым я какое-то время спорил сам с собой. Тест, на котором я остановился, звучит так: делает ли изменение число честнее или лживее. Здесь посетитель видит заголовок ровно в тот же момент, что и всегда, — это оценка врала про страницу, которая уже была быстрой, а теперь не врёт. Если бы я вместо этого притормозил тяжёлую картинку, чтобы метрика выбрала элемент подешевле, это был бы трюк другого рода и заслуживал бы другого слова. Прелоадер получил ту же обработку в обратную сторону: его минимальный порог показа упал с 1800 мс до 1100 мс, и на живом устройстве это сократило время до исчезновения с 2.5 с до 1.8 с. Это не подгонка метрики. Это 700 мс чужой жизни, возвращённые владельцу.

Контраст и навигация, которая уходит с дороги

Доступность выросла с 95 до 100 и на десктопе, и на мобильном, а решающим оказалось одно значение. Цвет текста на основных и акцентных поверхностях был белым и давал 2.5:1 на акценте — контраст, который откровенно не проходит, причём на самых нажимаемых кнопках сайта. Теперь это глубокая бирюза, #042F2E, при 5.8:1. Тёмный текст на яркой бирюзовой кнопке казался мне неправильным примерно сутки, а потом стал казаться правильным, — это и есть период полураспада дизайнерской привычки. Производительность на десктопе тем же проходом переехала с 94 на 97.

Последним куском была навигация. На странице, которую листают 12,500 пикселей, вечно закреплённая панель — вечный налог на экран. Наша теперь прячется после 48 px непрерывной прокрутки вниз за порогом в 160 px и возвращается на 10 px прокрутки вверх: порог не даёт ей мигать в самом верху страницы, а асимметрия означает, что она появляется ровно тогда, когда вы за ней потянулись. Волосяная линия прогресса чтения под ней — одна CSS-переменная, которую пишет уже работавший обработчик прокрутки; альтернативой был бы второй слушатель, вычисляющий число, которое у первого уже есть.

Заодно приехал маленький баг из тех, что появляются только в сочетании: при открытом мобильном меню трансформация панели создавала контекст наложения, из-за чего её кнопка с z-50 оказывалась под оверлеем с z-40. Открываете меню — и кнопка, которая его закрывает, перестаёт нажиматься. Лечение снимает трансформацию под [data-menu-open]. Отдельно: полная десктопная панель теперь появляется на xl (1280 px), а не на lg, по неромантичной причине — честная раскладка требует около 1232 px, а я просил её уместиться в меньшее.

Ничего из этого не закончено. Порядок секций — гипотеза о незнакомых людях, и держать её честно значит держать нежёстко: я жду, что переставлю всё снова, как только трафика хватит, чтобы он со мной поспорил. Но измерение, которое я оставлю себе, — то самое, из очереди: не сколько на странице секций, а сколько экранов нужно, чтобы ответить на вопрос, с которым пришёл посетитель. У нас теперь 1.75 экрана. Если оно поползёт обратно, вы узнаете раньше меня.