Почему скорость = деньги, а не «приятный бонус»

Пользователь принимает решение остаться или уйти в первые 1–3 секунды. Если за это время он видит белый экран или дёргающуюся вёрстку, он закрывает вкладку и идёт к конкуренту — причём чаще всего безвозвратно. Это поведение не зависит от того, насколько хорош ваш продукт: до предложения человек просто не доходит.

Классическое исследование Deloitte «Milliseconds Make Millions» показало: ускорение мобильного сайта всего на 0,1 секунды повышало конверсию в ритейле на 8,4%, а в сфере услуг — на 10,1%. На больших оборотах это десятки и сотни тысяч рублей в месяц из ничего, без новых вложений в рекламу.

  • Больше заявок с того же трафика — быстрый сайт конвертирует выше, поэтому каждый вложенный в рекламу рубль приносит больше лидов.
  • Лучше позиции в поиске — Core Web Vitals входят в факторы ранжирования Google, а Яндекс учитывает поведенческие сигналы, на которые влияет скорость.
  • Дешевле реклама — у быстрых посадочных страниц выше показатель качества в Директе и Ads, а значит ниже цена клика.

Core Web Vitals простыми словами: LCP, INP, CLS

Core Web Vitals — это три метрики, которыми Google измеряет реальный опыт живых пользователей вашего сайта (а не «лабораторный» тест). Каждая отвечает за свою сторону восприятия скорости.

  • LCP (Largest Contentful Paint) — скорость отрисовки как быстро появляется главный элемент экрана: баннер, заголовок, фото товара. Зелёная зона — до 2,5 секунды.
  • INP (Interaction to Next Paint) — отзывчивость как быстро сайт реагирует на клики, тапы и ввод. В 2024 году INP заменил старую метрику FID. Зелёная зона — до 200 мс.
  • CLS (Cumulative Layout Shift) — стабильность вёрстки насколько «прыгают» элементы при загрузке (когда кнопка уезжает из-под пальца). Зелёная зона — до 0,1.

Важная деталь: Google смотрит на 75-й перцентиль — то есть метрика должна быть зелёной у 75% ваших пользователей, включая тех, кто заходит со слабых телефонов и медленного интернета. Поэтому ориентироваться на свой быстрый ноутбук бессмысленно.

Как измерить скорость своего сайта за 5 минут

  1. PageSpeed Insights (pagespeed.web.dev) — вводите URL, получаете оценку и реальные полевые данные Core Web Vitals по вашим пользователям.
  2. Вкладка Lighthouse в Chrome DevTools — лабораторный прогон с конкретным списком, что чинить.
  3. Search Console → раздел «Основные интернет-показатели» — показывает, какие страницы провалили CWV у живой аудитории.
  4. WebPageTest или GTmetrix — детальная диаграмма загрузки: видно, какой именно ресурс тормозит старт.

Начинать всегда стоит с полевых данных (PageSpeed Insights и Search Console): именно их видит Google и именно они отражают опыт реальных клиентов. Лабораторные тесты нужны уже для диагностики причин.

Хотите узнать, что тормозит ваш сайт?

Пришлите ссылку — за пару дней сделаем разбор Core Web Vitals и список конкретных шагов с прогнозом по скорости.

Telegram

Что чаще всего тормозит сайт

  • Тяжёлые картинки — фото на 3–5 МБ в формате PNG/JPG вместо сжатого WebP/AVIF. Самая частая и самая дорогая по эффекту проблема.
  • Раздутый JavaScript — десятки скриптов аналитики, чатов, виджетов и анимаций, которые блокируют отрисовку и убивают INP.
  • Шрифты — подключение нескольких начертаний с внешних серверов без предзагрузки даёт «мигание» текста и тормозит LCP.
  • Отсутствие кэширования и CDN — каждый пользователь тянет ресурсы заново с одного сервера, часто географически далёкого.
  • Сдвиги вёрстки — картинки и баннеры без заданных размеров «раздвигают» контент при загрузке, ломая CLS.
  • Тяжёлый конструктор или старая CMS — шаблоны на Tilda/WordPress с десятком плагинов нередко тянут лишний код, который никто не использует.

Чек-лист ускорения: что даёт максимум эффекта

Этот порядок мы используем в проектах сами: сверху — шаги с лучшим соотношением «эффект к усилию», которые часто дают +20–40 баллов PageSpeed без переписывания сайта.

  1. Сжать все изображения и перевести в WebP/AVIF, задать им явные width и height.
  2. Включить ленивую загрузку (lazy loading) для картинок и видео ниже первого экрана.
  3. Убрать неиспользуемый и сторонний JavaScript, отложить загрузку второстепенных скриптов (defer/async).
  4. Подключить кэширование на сервере и CDN для статики.
  5. Предзагружать ключевые шрифты и главную картинку первого экрана (preload).
  6. Минифицировать CSS и JS, убрать лишние библиотеки и иконочные шрифты.
  7. Проверить мобильную версию отдельно — именно там живёт большинство проблем.

Когда косметики мало и нужен новый движок

Иногда сайт упирается в потолок: вылизали картинки и скрипты, но платформа всё равно тянет тонну лишнего кода. Это типично для старых тем WordPress с десятком плагинов и для тяжёлых конструкторов. В таком случае дешевле в долгую — пересобрать фронтенд на современном стеке.

Мы строим сайты на Nuxt и подобных фреймворках с серверным рендерингом: страница отдаётся уже готовой, картинки оптимизируются автоматически, а лишний JavaScript просто не попадает в бандл. Такой сайт стартует с зелёных Core Web Vitals по умолчанию, а не «после оптимизации».

В Easy agency мы относимся к скорости как к части конверсии, а не как к строчке в отчёте. На старте проекта замеряем Core Web Vitals, закладываем оптимизацию изображений и кода в архитектуру и проверяем результат на реальных мобильных устройствах.

Если ваш сайт грузится дольше трёх секунд или проваливает CWV в Search Console — пришлите ссылку. Покажем, что тормозит в первую очередь, какой прирост скорости реально получить и стоит ли ускорять текущий сайт или выгоднее пересобрать.