Core Web Vitals — набор метрик скорости и удобства на мобильных устройствах: LCP (время загрузки крупного элемента), CLS (стабильность макета) и INP (время реакции на действия пользователя). Это важно для конверсии и для выдачи в поиске. Статья объясняет практические шаги, адаптированные под реалии белорусских интернет‑магазинов: кафе, салоны, небольшие магазины и сервисы.
Уменьшаем LCP: что реально ускоряет загрузку главного экрана
Сценарий: мини‑пекарня в Гомеле ведёт продажу наборов chleba через мобильный сайт. Главный экран долго грузит большую фотографию товара, пользователи уходят.
Как сделать: оптимизируйте ключовые изображения и контент первого экрана. Порядок действий:
- Конвертируйте крупные картинки в WebP или AVIF и добавьте srcset для разных плотностей экрана.
- Добавьте preload для самого важного изображения или шрифта: <link rel="preload" as="image" href="...">.
- Минимизируйте критический CSS и инлайньте небольшой блок стилей, отвечающий за верхнюю часть страницы.
Практический совет: на тестовом товаре уменьшите изображение до размеров, равных реальному отображению на телефоне, и замеряйте LCP через Lighthouse в Chrome DevTools.
Снижаем CLS: удерживаем элементы на месте при загрузке
Сценарий: салон красоты в Гродно загружает баннеры и рекламные блоки; кнопки "записаться" скачут при загрузке, пользователи промахиваются по кнопке.
Как сделать: закрепите размеры для медиаконтента и отложите загрузку низкоприоритетных виджетов.
- Указывайте width/height или aspect‑ratio для картинок и видео.
- Блоки рекламы и сторонних виджетов загружайте асинхронно через iframe с заранее заданной областью.
- Для шрифтов используйте font‑display: swap, чтобы текст не перескакивал при подгрузке шрифта.
Практический совет: в шаблоне карточки товара добавьте CSS‑правила с фиксированной высотой для изображения и описания, чтобы избежать смещения при асинхронной подгрузке отзывов.
Ускоряем интерактивность (INP): уменьшение задержки при нажатиях
Сценарий: книжный магазин в Бресте замечает, что переход в корзину по кнопке на мобильном сайте задерживается, пользователи уходят.
Как сделать: снизьте вес JavaScript и распределите обработку событий по приоритету.
- Удалите неиспользуемый код и отложите загрузку ненужных скриптов через async/defer.
- Разбейте большие задачи на мелкие, чтобы основной поток не блокировался более 50–100 мс.
- Рассмотрите серверный рендеринг для критических страниц, чтобы уменьшить зависимость от клиентских скриптов.
Практический совет: используйте профайлер в DevTools, найдите задачи дольше 50 мс и вынесите их в Web Worker или отложенную обработку.
Инфраструктура и кэширование: уменьшение задержек по сети
Сценарий: интернет‑магазин электроники в Минске получает трафик по всей стране, статика грузится медленно для пользователей из областных центров.
Как сделать: подключите CDN и настройте кэширование статических ресурсов и заголовки кеш‑контроля.
- Разместите статический контент на CDN, чтобы файлы отдавались из ближайшего узла.
- Настройте заголовки Cache‑Control и ETag для изображений, скриптов и стилей.
- Используйте сжатие Brotli или gzip на сервере и HTTP/2 или HTTP/3 для параллельной загрузки.
Практический совет: начните с проверки и подключения CDN; полезная инструкция по настройке CDN на доступном хостинге — CDN на виртуальном хостинге adsl.by.
Мониторинг и тесты: порядок проверок и частота
Сценарий: магазин одежды в Могилёве внес изменения, нужен быстрый чек, не ухудшились ли показатели.
Как сделать: заведите регулярные замеры и автоматически собирайте данные от пользователей.
- Запускайте простые проверки через Lighthouse на главной и товарной страницах после каждого деплоя.
- Отслеживайте Core Web Vitals в отчётах реальных пользователей и сравнивайте до/после изменений.
- Вводите изменения постепенно и проверяйте метрики на выборке мобильных устройств.
Практический совет: перед крупным обновлением делайте контрольный тест на копии сайта и фиксируйте LCP, CLS, INP.
Типичные ошибки
- Загрузка больших изображений без адаптивных размеров.
- Много сторонних скриптов в header, блокирующих рендер.
- Отсутствие кэширования статических файлов и неправильные заголовки.
- Игнорирование мобильных сетей с низкой пропускной способностью.
- Тестирование только на десктопе и высокоскоростном интернете.
3 шага, которые можно сделать сегодня: 1) сжать и конвертировать 3 ключевых изображения в WebP/AVIF; 2) добавить preload для главного баннера и включить font‑display: swap; 3) проверить сайт через Lighthouse на мобильном и зафиксировать LCP, CLS, INP перед следующего обновления.