Ускорение сайта и Core Web Vitals

Core Web Vitals меряют не абстрактную скорость, а три разных ощущения от страницы: долго ли ждать содержимое, отзывается ли интерфейс на нажатие, не прыгает ли макет под пальцем.

• LCP - когда появился самый крупный элемент экрана. Зелёная зона до 2,5 секунды. Обычно упирается в картинку или шрифт
• INP - задержка отклика на действие пользователя. До 200 миллисекунд. Упирается в тяжёлый JavaScript
• CLS - смещение макета при загрузке. До 0,1. Упирается в картинки без размеров, баннеры и подгружаемые шрифты

Порядок причин почти не меняется от проекта к проекту. Первое место с большим отрывом - изображения: фотография в исходном разрешении на 3 мегабайта, растянутая до карточки в 300 пикселей. Перевод в WebP или AVIF с нарезкой по размерам экрана обычно снимает половину проблемы.

Второе - сторонние скрипты: виджеты чатов, счётчики, пиксели, карты, подгружаемые синхронно в шапке. Каждый в отдельности «весит немного», вместе они дают полторы секунды до первого контента.

Третье - шрифты. Загрузка нестандартного начертания без предзагрузки и без font-display даёт либо пустое место вместо текста, либо скачок макета при подмене.

Порядок работ выстроен от эффекта к трудоёмкости: сначала то, что даёт секунды за часы работы, потом то, что даёт десятые доли за дни.

• Изображения: современные форматы, адаптивные размеры, отложенная загрузка всего ниже первого экрана
• Критический CSS инлайном, остальное - отложенно
• Скрипты: снятие лишнего, defer и async, перенос счётчиков и виджетов на отложенную загрузку
• Шрифты: предзагрузка, подмножества кириллицы, font-display для стабильного макета
• Кеширование и сжатие на стороне сервера, HTTP-заголовки, CDN при необходимости

Оценка PageSpeed при одиночном запуске - это лаборатория: синтетический прогон на эмулированном устройстве. Яндекс и Google смотрят на другое - на полевые данные реальных пользователей, которые накапливаются неделями.

Поэтому «сделали 95 баллов» - не результат сам по себе. Результат виден в Вебмастере и в Метрике через две-четыре недели после внедрения, когда наберётся статистика с настоящих телефонов на настоящем мобильном интернете. Об этом я предупреждаю на входе, чтобы не выглядело, будто работа сделана, а цифры не поменялись.

Когда сайт собирается заранее в готовые HTML-файлы, на запрос пользователя сервер просто отдаёт файл: ни обращений к базе, ни сборки шаблона, ни работы движка. Все свои сайты я собираю на Astro именно поэтому, и зелёные метрики там получаются условием сдачи, а не отдельной услугой.

Для существующего сайта на CMS полный переход на статику - отдельный проект. Но большую часть выигрыша даёт кеширование готовых страниц, и это делается без смены платформы.