Свой проект

Как сделан этот сайт

человека попросили сделать им такой же сайт, когда увидели этот

Проблема: Текст появлялся только после 210 КБ скриптов, а на медленной сети первый экран перескакивал целиком, когда приходили шрифты.
Решение: Собрал статический сайт без фреймворков, подогнал запасные шрифты под настоящие, тяжёлые анимации вынес в фоновые потоки.
Результат: Текст виден сразу; страница не прыгает при загрузке — по шкале Google было «плохо», стало «хорошо», — не тормозит даже на медленном телефоне и открывается в России без VPN.

Ниже — шесть задач, которые для этого пришлось решить, с замерами до и после. Технические подробности — под «Как это сделано».

Сделан одним человеком в паре с Claude Code, как и Ротон: архитектуру и приёмку держу сам. Больше 80 правок, и у каждой правки скорости есть замер до и после — так же работаю с заказчиками.

Текст виден сразу, без ожидания скриптов

Посетитель видит страницу, как только она пришла, а не ждёт, пока скачаются программы: это заметно на медленном мобильном интернете. Поисковые роботы и ИИ-⁠ассистенты тоже получают весь текст сразу, даже если не запускают скрипты.

Как это сделаносвернуть

Прототип из дизайн-⁠макета рендерил страницу React-⁠ом со своим рантаймом: первый кадр был пустым, а оба языка жили на одном адресе. Теперь сборка кладёт всю разметку в HTML, по странице на язык. Скрипты грузятся после неё и только оживляют страницу: без JavaScript она читается целиком.

со 210 до 0 КБ

столько скриптов нужно было скачать, прежде чем появится текст

Страница не прыгает при загрузке

Пока догружаются шрифты, текст не перескакивает, и посетитель не промахивается мимо кнопки. Google учитывает такие сдвиги, когда оценивает страницу: по его шкале было «плохо», стало «хорошо».

Как это сделаносвернуть

На медленной сети заголовок сначала набирался системным шрифтом, на 44% шире нужного, и когда приходил настоящий, первый экран перескакивал целиком. Ещё сильнее страницу двигала каретка печати заголовка. Каретка теперь не занимает места в строке, а системные шрифты подогнаны под настоящие: ширина по самой длинной строке лозунга, высота строки по метрикам шрифта.

Замер: сдвиг макета (CLS) при первом заходе, шрифты задержаны на 1,5 с; английская версия, десктоп.

с 0,57 до 0,0007

насколько страница прыгает при первом заходе; у Google «хорошо» — до 0,1, «плохо» — больше 0,25

Анимация портрета не тормозит страницу

Портрет из символов сохранил свой «дождь», но не отнимает у страницы время: прокрутка и нажатия отвечают сразу, даже на слабом телефоне.

Как это сделаносвернуть

Капли на ASCII-⁠портрете переписывали его строки каждый кадр, а цикл табло на вкладках крутился и за экраном. Теперь капли рисует фоновый поток на своих холстах, а табло стоит, пока его не видно.

Замер: работа главного потока, мс в секунду, пока портрет на экране; десктоп.

с 385–⁠807 до 9 миллисекунд в секунду

столько миллисекунд в каждой секунде браузер был занят портретом; на телефоне, замедленном вчетверо, было 946–⁠996, стало 18

Сфера в контактах не задерживает нажатия

Вращающаяся сфера из слов рядом с кнопкой связи не забирает у браузера время: нажатия и прокрутка не ждут очереди даже на слабом телефоне, а сама сфера крутится плавнее.

Как это сделаносвернуть

Кадр сферы — 2 300 букв, и на главном потоке он занимал его целиком: нажатия и прокрутка ждали очереди. Теперь кадры рисует воркер копиями букв из атласа, а буквы по глубине раскладываются по 128 ступеням за один проход вместо сортировки.

Замер: кадров сферы в секунду на телефоне с процессором ×4; длинных задач за 5 секунд было 47, стало 0.

с 6–⁠9 до 18 кадров в секунду

кадров в секунду у сферы на телефоне, замедленном вчетверо; заминок дольше 50 мс за 5 секунд было 47, стало 0

Страница откликается раньше, пока грузится

Браузер не тратит время на разделы, до которых посетитель ещё не долистал, поэтому на медленном телефоне страница отвечает на нажатия почти сразу после открытия.

Как это сделаносвернуть

Пока до секции далеко, браузер её не раскладывает (content-⁠visibility), и каждый пришедший шрифт перекладывает только видимое. Работа не пропадает, а переезжает на прокрутку: когда до секции остаётся полтора экрана, она раскладывается заранее. В Safari и при возврате прокрутки правило выключено: там оно промахивалось мимо якорей и прежнего места на странице.

Замер: блокировка главного потока до загрузки, русская версия; у английской было 205, стало 0.

с 666 до 50 миллисекунд

столько миллисекунд страница не отвечала на нажатия, пока грузилась; телефон, замедленный вчетверо, медленный 4G

Страница не скачивает лишнего

Шрифты лежат на своём сервере и скачиваются только нужными кусками: на мобильном интернете это меньше ожидания и трафика.

Как это сделаносвернуть

Шрифты лежат на своём домене, по подмножествам знаков, с хешем в имени файла. Знак ₽ Google кладёт в расширенную латиницу, и русская страница качала 83 КБ шрифта ради одного знака; теперь он в своём файле. Правила @font-⁠face стоят прямо в странице: отдельный запрос за ними держал первую отрисовку ещё на один круг до сервера.

с 83 до 1,2 КБ

столько шрифта скачивалось ради одного знака ₽

И ещё

Сайт не зависит от чужих серверов: ни CDN, ни аналитики, ни чужих шрифтов, так что сторонний сервис не замедлит и не сломает страницу. Политика безопасности (CSP) пускает только свой адрес.
Повторный заход быстрее: скрипты и картинки год лежат в кэше браузера и обновляются сами, как только меняются. Сборка сама останавливается, если страница отстала от скриптов или в тексте остался висячий предлог.
На экранах 120 и 144 Гц анимации идут с той же скоростью, что на обычных, а не в 2–⁠2,4 раза быстрее.
Кто читал сайт по-⁠русски, при следующем заходе сразу попадает на русскую версию: английская страница даже не скачивается.
Сайт читается и без JavaScript, а у тех, кто выключил анимацию в системе, ничего не движется. Вкладки работают с клавиатуры.

Нужен такой же быстрый сайт? Опишите задачу — предложу, с чего начать.

Написать в Telegram