Четыре варианта страницы команды
Одни и те же реальные данные, один и тот же набор блоков. Отличается только визуальный язык. Откройте с телефона и сравните.
Эфирный оверлей
Графика прямого эфира: срезанные углы, диагональные срезы, оранжевый сигнал только на LIVE и на действии.
- решает
- Мгновенно читается статус — блок LIVE громче всей страницы; исход кодируется светлотой плашки плюс буквой.
- жертвует
- Энергия эфира съедает воздух: страница плотная и шумная по фактуре, спокойного справочного тона здесь нет.
- плотность
- 26 строк по 30px, ни одной картинки в строке
- шрифт
- Roboto
Свод рекордов
Тёмный справочник-ежегодник: двойные линейки, колонцифры, висячая нумерация, золото как гильошь.
- решает
- Отсутствие портретов перестаёт быть дырой — главным изображением страницы официально назначено число.
- жертвует
- Институциональный ритм холоднее ленты: страница не зовёт кликать, на телефоне оглавление съедает первый экран.
- плотность
- 26px строка, монограммы только там, где строк мало
- шрифт
- IBM Plex Sans
Прибор
Показания измерительного прибора: очень тёмная база, один янтарный акцент, у каждого числа своя микрошкала.
- решает
- Максимум данных на экран без единой картинки: линейки, спарклайны и микрошкалы вместо оформления.
- жертвует
- Тёплой командной эмоции почти нет — это витрина данных; микротипографика 9–10px требует хорошего экрана.
- плотность
- 28px строка, место под фото не резервируется нигде
- шрифт
- IBM Plex Sans + Mono
Хронокарта
Одна временная ось 2019 → 2026 держит всю страницу: каждое число с длительностью — отрезок на ней.
- решает
- Величина становится видимой: 632 дня видно как отрезок, состав читается как пять отрезков разной длины.
- жертвует
- Ни одной плашки и скругления — только линейки и типографика; на плохом экране может показаться недооформленной.
- плотность
- 30px строка, печатная вёрстка без карточек
- шрифт
- IBM Plex Sans + Mono
Замеры
Lighthouse, мобильная эмуляция, Slow 4G. Бюджеты R-46: LCP < 1.5 c, CLS < 0.05, JS < 100 КБ.
| Вариант | Lighthouse | LCP | CLS | TBT | JS | Вес | Бюджеты |
|---|---|---|---|---|---|---|---|
| A · Эфирный оверлей | 99 | 1.11 с | 0.001 | 130 мс | 0 Б | 307 КБ | пройдено |
| B · Свод рекордов | 100 | 1.07 с | 0.003 | 81 мс | 0 Б | 228 КБ | пройдено |
| C · Прибор | 100 | 1.01 с | 0.000 | 30 мс | 0 Б | 234 КБ | пройдено |
| D · Хронокарта | 100 | 0.98 с | 0.001 | 0 мс | 0 Б | 271 КБ | пройдено |
Шрифты самохостятся (latin+cyrillic сабсеты) и их @font-face инлайнится — это убрало блокирующий запрос к Google Fonts и снизило LCP с 1,45–2,30 с до 0,98–1,11 с. Замер: Lighthouse 13.4.1, мобильная эмуляция, Slow 4G, живой URL.