Скорость сайта: чеклист по Core Web Vitals без переписывания фронтенда

Медленный сайт теряет посетителей до того, как они увидят предложение. При этом почти всегда виноваты три вещи: тяжёлые картинки, лишние сторонние скрипты и шрифты. Переписывать фронтенд ради этого не нужно.

Когда это актуально

• Показатель отказов на мобильных заметно выше, чем на десктопе
• PageSpeed показывает красную зону, и непонятно, за что хвататься
• Растёт стоимость клика, а конверсия падает
• Готовите сайт к сезону высокого трафика

План действий

1. 1. Начните с картинок Современный формат, точный размер под контейнер, ленивая загрузка для всего ниже первого экрана. Это обычно половина проблемы.
2. 2. Проверьте сторонние скрипты Каждый виджет, чат и пиксель стоит времени загрузки. Выпишите все и уберите те, чью пользу никто не сможет объяснить цифрами.
3. 3. Разберитесь со шрифтами Не больше двух начертаний, обязательный font-display swap, предзагрузка основного шрифта. Иначе текст появляется рывком с задержкой.
4. 4. Зафиксируйте размеры блоков Явные ширина и высота у картинок и рекламных мест убирают скачки вёрстки, из-за которых пользователь промахивается по кнопке.
5. 5. Включите кеширование и сжатие Долгий кеш для статики, gzip или brotli на сервере. Настройка занимает полчаса и работает годами.
6. 6. Смотрите полевые данные Лабораторный тест — это симуляция. Реальные показатели пользователей важнее красивой цифры в отчёте.

Где чаще всего теряют результат

• Оптимизация ради цифры в тесте, а не ради ощущения скорости
• Пять аналитических пикселей и три чата на одной странице
• Картинки на 3000 пикселей в блоке шириной 400
• Проверка только на быстром десктопе с проводным интернетом

Мини-чеклист перед запуском

• Картинки в современном формате и нужного размера
• Список сторонних скриптов пересмотрен, лишнее удалено
• Шрифты ограничены и загружаются без скачка текста
• У медиаблоков заданы размеры, вёрстка не прыгает
• Кеширование и сжатие включены на сервере