Как держать PageSpeed 90+ на мобильных и не жертвовать дизайном

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

Ниже — решения, которые дают почти весь результат. В порядке влияния.

1. Шрифты — самое дорогое, что легко починить

Подключение через @import к внешнему сервису шрифтов означает: лишний DNS-запрос, TLS-рукопожатие, загрузка CSS, и только потом загрузка самого файла. Всё это до первой отрисовки текста.

Правильно — самохостинг с предзагрузкой. В Next.js это next/font: файлы кладутся рядом с приложением, предзагружаются вместе со страницей, и внешних запросов не остаётся вовсе.

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

2. Серверный рендеринг вместо клиентского

Сайт, который отдаёт пустой <div id="root"> и собирает содержимое в браузере, платит за это дважды: пользователь ждёт JavaScript, а поисковик получает пустую страницу и вынужден рендерить её сам.

Серверный рендеринг делает первый экран мгновенным, а разметку — сразу пригодной для индексации.

3. Меньше JavaScript в браузере

Типовой набор «библиотека анимаций + карусель + иконки + утилита классов» легко даёт 150–200 КБ после сжатия — и это до Вашего собственного кода.

Что мы делаем вместо этого:

• анимации появления — на CSS-переходах и IntersectionObserver, а не на библиотеке анимаций;
• карусель — на нативном scroll-snap, который свайпается на телефоне из коробки;
• аккордеон — на нативном <details>, который к тому же корректен с точки зрения доступности и оставляет содержимое в разметке для поискового робота;
• иконки — инлайновый SVG вместо пакета с тысячей глифов.

Каждый пункт по отдельности выглядит мелочью. Вместе они дают разницу в десятки баллов на слабом телефоне.

4. Резервируйте место под всё, что грузится позже

Сдвиг макета (CLS) наказывается отдельно и заметен пользователю: он целится в кнопку, а она уезжает. Изображениям нужны атрибуты размеров, встраиваемым виджетам — фиксированная высота контейнера, шрифтам — корректный fallback, чтобы подмена не двигала строки.

5. Отложите всё, что не нужно для первого экрана

Счётчики аналитики, карты, чаты поддержки — всё это грузится после того, как страница стала интерактивной. Карта на странице контактов вообще не должна загружаться, пока пользователь до неё не дошёл: loading="lazy" на iframe экономит больше, чем любая минификация.

Чего делать не нужно

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

Показатель — не самоцель, а индикатор того, что инженерные решения приняты правильно.