Кейс: ускорил сайт с 50 до 100 в PageSpeed (mobile)
Реальный кейс ускорения сайта на Next.js. Все цифры — настоящий PageSpeed Insights против прода, а не оценки локального инструмента (он почти всегда оптимистичнее реальности).
Что было «до»
Сайт выглядел быстрым на глаз, но на мобильных метрики проваливались:
| Метрика | Было |
|---|---|
| Performance (mobile) | 50 |
| TBT (блокировка главного потока) | 140 с |
| Mobile в PSI | падал с ошибкой |
| CLS (стабильность вёрстки) | до 0.42 |
Главная боль — мобильный Lighthouse вообще не отрабатывал и падал с таймаутом, а вёрстка «прыгала» при загрузке.
В чём были причины
- Бесконечные циклы анимации (WebGL-фон, scramble-эффекты) не давали главному потоку уйти в простой — Lighthouse не мог поймать «тихое» состояние и падал по таймауту.
- Поздний свап шрифтов: пиксельный шрифт намного шире фолбэка, при позднем применении переверстывал все заголовки → всплески CLS.
- Тяжёлые изображения и лишний клиентский JS откладывали LCP.
Что сделал
- Разгрузил главный поток — отложил тяжёлый WebGL, поставил реальную паузу анимаций за пределами экрана, дал серверный H1.
- Убил font-swap CLS — перевёл шрифты на
display: optional, зарезервировал размеры под анимированный текст. - Стабилизировал вёрстку — статичный текст вместо скрамбла там, где он переверстывал абзацы; зарезервированная высота под canvas.
- Ассеты и LCP — AVIF-картинки, более длинный кеш, удаление мёртвых файлов.
- Сжатие и безопасность — brotli на edge (−68% к размеру), security-заголовки с нуля, SSR-SEO.
Что стало
| Метрика | Было | Стало |
|---|---|---|
| Performance (mobile) | 50 | 100 |
| TBT | 140 с | 0 мс |
| Mobile в PSI | падал с ошибкой | 100 |
| CLS | до 0.42 | 0–0.01 |
И всё это без потери дизайна и анимаций — сайт остался таким же живым, просто перестал тормозить и прыгать.
Вывод
Большинство «медленных» сайтов лечатся не переписыванием с нуля, а точечными фиксами по приоритету: сначала то, что даёт максимум баллов за минимум работы. Главное — мерить настоящим PageSpeed против прода, а не доверять оптимистичным локальным трейсам.
Хотите такой же результат для своего сайта? Я провожу аудит и ускорение сайта с фикс-ценой и фикс-объёмом: замеры, приоритеты, план фиксов и отчёт-деливерабл.