Оптимизация начинается с конкретного симптома: долго не появляется первый экран, кнопка реагирует с задержкой или элементы скачут при загрузке. Одна оценка PageSpeed не объясняет всю картину. Полезнее связать измерение с тем, что замечает посетитель, и менять сайт небольшими проверяемыми шагами.
1. Зафиксируйте исходное состояние
Выберите главную, страницу услуги и один тяжёлый материал. Запишите условия проверки: устройство, соединение, адрес и дату. Сделайте несколько замеров, чтобы случайный медленный ответ не стал основой решения. Отдельно отметьте, когда становится доступно основное действие.
Core Web Vitals оценивают загрузку крупнейшего видимого элемента, отзывчивость и сдвиги макета через LCP, INP и CLS. Целевые границы «хорошо» - 2,5 секунды, 200 миллисекунд и 0,1 соответственно на 75-м процентиле посещений. Лабораторный тест и данные реальных пользователей отвечают на разные вопросы.
2. Начните с изображений
Сравните размеры файла и область, в которой картинка показывается. Для небольшой карточки обычно не нужен исходник на несколько тысяч пикселей. Подготовьте подходящие варианты размеров, сравните WebP или AVIF с исходником и проверьте мелкие детали после сжатия.
Изображения ниже первого экрана можно загружать лениво. Главную картинку, которая появляется сразу и может определять LCP, не стоит бездумно помечать loading="lazy". Укажите размеры или соотношение сторон, чтобы браузер заранее оставил место и соседний текст не прыгал.
3. Проверьте шрифты и внешние сервисы
Посмотрите, сколько шрифтов и начертаний загружается до чтения страницы. Удалите неиспользуемые подключения, проверьте запасные шрифты и избегайте долгого скрытия текста. После изменения откройте меню и форму: экономия байтов не должна ломать расположение элементов.
Составьте перечень внешних виджетов, аналитики и библиотек. Для каждого укажите назначение и владельца. Если сервис больше не нужен, уберите его. Если нужен только после действия пользователя, обсудите отложенную загрузку и проверьте, как она влияет на сценарий.
4. Упростите работу во время взаимодействия
Если страница тормозит при прокрутке или клике, ищите работу, которая запускается слишком часто: пересчёт размеров, обработчики движения курсора, большие обновления интерфейса. Отключайте подозрительные эффекты по одному и сравнивайте поведение.
Оцените тяжёлые размытия, видеофоны и большие движущиеся слои на обычном телефоне. Не всякий эффект нужно удалять: иногда достаточно уменьшить область, частоту обновления или число одновременно работающих элементов. Сохраните понятную обратную связь после нажатия кнопки.
5. Сверьте скорость и целостность страницы
Повторите измерения в тех же условиях. Затем пройдите основные сценарии: открыть меню, перейти в кейс, сменить язык, заполнить форму до отправки. Проверьте, не исчезли ли изображения и не изменились ли важные переносы.
Сохраните исходные файлы и коротко запишите, что изменено и какой результат получен. Не обещайте себе постоянные «100 баллов»: условия теста и содержимое меняются. Лучше установить понятный предел для веса новых изображений и проверять новые страницы по одному порядку.
Что сделать дальше
Часто первый полезный шаг - уменьшить тяжёлые изображения и убрать лишние подключения. Но приоритет определяет замер: исправляйте то, что задерживает конкретное действие посетителя.