Как проверить скорость сайта: TTFB, Core Web Vitals и способы ускорения

Сайт может казаться быстрым на компьютере владельца и оставаться медленным для клиентов. Локальный кеш, стабильный Wi-Fi, современное устройство и близость к серверу скрывают проблемы, которые проявляются в мобильной сети и на бюджетных смартфонах. Поэтому проверка должна охватывать ответ сервера, передачу файлов, показ главного контента, реакцию интерфейса, стабильность макета и опыт реальных посетителей.

Начните с бесплатного аудита скорости сайта. Инструмент BB STUDIO проверяет DNS, соединение, TLS, TTFB, вес HTML, сжатие, кеш и состав ресурсов. Это быстрая серверная диагностика перед более глубоким профилированием в браузере.

Скорость — не одна цифра

Фраза «сайт загрузился за три секунды» неполна без контекста. Посетитель проходит последовательность:

1. браузер находит IP домена;

2. устанавливает соединение и HTTPS;

3. ждёт первый байт HTML;

4. получает стили, шрифты, скрипты и изображения;

5. показывает крупнейший видимый элемент;

6. отвечает на нажатия;

7. сохраняет стабильный макет.

Быстрый сервер может отдать тяжёлое главное фото. Страница может выглядеть готовой, но зависать при открытии меню. Она может открыться за секунду, а затем сдвинуть кнопку из-за баннера. Эти сбои описывают разные показатели.

Основные показатели

Core Web Vitals оцениваются на 75-м процентиле реальных визитов отдельно для мобильных и десктопных устройств. Один успешный тест на мощном компьютере не представляет всю аудиторию.

Что такое TTFB

Time to First Byte — время от начала перехода до первого байта ответа. Оно может включать редиректы, запуск service worker, DNS, соединение, TLS и обработку запроса на сервере.

TTFB предшествует полезной отрисовке, поэтому медленный ответ сдвигает следующие события. Но TTFB не является Core Web Vital и не описывает всю скорость. Быстрый HTML может запустить мегабайты клиентского кода, а серверная страница с немного большим TTFB иногда показывает контент раньше.

Как читать TTFB

• до 0,2 с — очень быстрый ответ в благоприятных условиях;

• 0,2–0,8 с — рабочий диапазон с учётом географии и архитектуры;

• 0,8–1,8 с — причины стоит исследовать;

• больше 1,8 с — задержка уже существенно ограничивает загрузку.

Это диагностические диапазоны, а не универсальная гарантия. Повторяйте тесты, сравнивайте регионы, холодный и прогретый кеш.

Правильная методика проверки

Проверяйте типовые страницы

Кроме главной, протестируйте услугу, категорию магазина, карточку товара, статью, контакты с картой и личный кабинет при его наличии.

Запускайте серию

Первый запрос может попасть на холодный кеш, а второй — получить готовую страницу. Разница показывает зависимость от кеша. Сравнивайте медиану, а не лучший балл.

Разделяйте мобильный и десктопный тест

Мобильный сценарий ограничивает сеть и процессор, поэтому оценка ниже. Именно он выявляет тяжёлые скрипты, большой DOM и лишние ресурсы.

Различайте лабораторные и полевые данные

Лабораторный тест воспроизводит контролируемые условия и помогает найти причину. Полевые данные показывают опыт реальных посетителей. При расхождении проверяйте период, географию, устройства, группы страниц и размер выборки.

Фиксируйте исходное состояние

Запишите URL, дату, устройство, регион, показатели и версию релиза. После оптимизации повторите тот же сценарий, иначе случайное изменение сети можно принять за результат.

LCP: показ главного контента

Largest Contentful Paint обычно соответствует hero-изображению, баннеру, крупному заголовку или текстовому блоку. Хороший LCP означает, что основной элемент появился быстро, а не что завершилась вся загрузка.

LCP включает TTFB, задержку обнаружения ресурса, загрузку и задержку отрисовки. Если главное фото поздно добавляет JavaScript или оно скрыто в CSS, браузер обнаруживает его слишком поздно. Критический ресурс должен иметь понятный HTML, адаптивные варианты, правильный приоритет и не использовать lazy loading на первом экране.

INP: реакция на действия

Interaction to Next Paint оценивает задержку кликов, касаний и клавиш за весь визит. Высокий INP часто появляется, когда главный поток занят длинной JavaScript-задачей.

Источники: большие bundle, несколько библиотек анимации, сложные фильтры, повторный рендер большого DOM, чаты, трекеры и тяжёлые обработчики. Профилируйте реальные взаимодействия, делите длинные задачи, откладывайте некритические модули и сокращайте работу на каждое действие.

CLS: стабильность макета

Cumulative Layout Shift фиксирует неожиданные сдвиги. Причины — изображения и iframe без размеров, баннеры над готовым контентом, смена шрифта, рекомендации без зарезервированного места и cookie-окно, которое двигает страницу.

Резервируйте место через размеры или aspect-ratio, подбирайте совместимый fallback-шрифт и не вставляйте новый контент над текущей позицией без действия пользователя.

Изображения

Изображения часто занимают основную часть трафика. Одного сжатия мало: проверяйте формат, физические размеры, srcset, lazy loading, приоритет первого экрана и прозрачность.

Аудит изображений помогает найти отсутствующие alt, избыточный вес, неподходящий формат и проблемы загрузки. Файлы можно обработать через конвертер изображений в WebP, где конвертация происходит локально в браузере.

Порядок работы:

1. обрежьте изображение под блок;

2. создайте размеры для разных экранов;

3. используйте WebP или AVIF для фото, SVG для вектора;

4. подберите качество без артефактов;

5. настройте srcset и sizes;

6. не применяйте lazy loading к LCP;

7. задайте width, height или aspect-ratio.

Кеширование и сжатие

Кеш существует на нескольких уровнях. Браузер хранит статику, сервер — готовый HTML, CDN — копию ближе к посетителю, object cache — результаты базы.

Не назначайте один длинный срок всему. Версионированные CSS, JavaScript и изображения можно кешировать долго, HTML и персональные данные требуют осторожности. После обновления файл должен получать новый URL или хеш.

Gzip и Brotli уменьшают HTML, CSS, JavaScript, JSON и SVG. JPEG, WebP и видео уже сжаты. Проверяйте Content-Encoding и Cache-Control в реальном ответе, а не только переключатель плагина.

Хостинг и backend

При высоком TTFB исследуйте сервер. Причинами бывают ограниченный тариф, далёкий дата-центр, медленный диск, старая версия PHP, тяжёлые SQL-запросы, блокирующий API и отсутствие page cache.

Надёжный хостинг для сайта важен, но перенос не исправляет плохой код автоматически. До миграции зафиксируйте backend time, запросы, ресурсы, кеш и внешние зависимости, после — повторите те же тесты.

Проверьте slow query, autoload-данные, cron, API, page и object cache, фоновые очереди, журналы ошибок и поведение под нагрузкой.

CSS, JavaScript и шрифты

Критические стили нужны первому экрану, остальные могут загружаться позже. Слепое объединение всех CSS иногда создаёт один огромный файл и ломает порядок правил. Проверяйте каждый шаблон визуально.

Для JavaScript:

• используйте defer для неблокирующих сценариев;

• загружайте виджеты после согласия или действия;

• делите код по страницам и функциям;

• удаляйте неиспользуемые библиотеки;

• исключайте дубли аналитики, слайдеров и фреймворков;

• ищите длинные задачи в профиле Performance.

Для шрифтов оставьте нужные семейства и начертания, WOFF2, preload только критического файла и подходящий font-display. Избыточный preload конкурирует с hero-изображением.

WordPress и WooCommerce

Универсального самого быстрого набора плагинов нет. Результат зависит от темы, конструктора, хостинга, каталога и интеграций. Безопасный процесс: резервная копия и staging, поиск тяжёлых запросов и плагинов, page и object cache, оптимизация медиа и шрифтов, удаление лишних модулей, отсрочка маркетинговых виджетов и повторный тест checkout.

Корзина, оформление и кабинет обычно не кешируются как публичная статика. Для магазина тестируйте категории, галерею, вариации, поиск, фильтры и синхронизацию, а не только главную.

Лабораторные и реальные результаты

Лабораторные данные показывают один контролируемый запуск. Полевые — опыт реальных пользователей за период. Они различаются из-за географии, провайдера, устройств, кеша, авторизации, набора страниц, поведения, сезонной нагрузки и размера выборки.

Не добивайтесь 100 баллов ценой функций. Google объясняет, что page experience состоит из нескольких аспектов, а идеальный отчёт не гарантирует первое место. В SEO-продвижении сайта производительность — техническая основа, но релевантность, контент, структура и авторитет также необходимы.

Приоритет исправлений

Сортируйте рекомендации по влиянию, охвату, риску и стоимости.

Сначала исправляйте ошибки сервера, очень высокий TTFB, многомегабайтный LCP, отсутствие сжатия, глобальные блокирующие скрипты, сильные сдвиги кнопок и зависание навигации или checkout.

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

Влияние на бизнес

Скорость не создаёт спрос сама, но убирает трение. Отслеживайте выходы с посадочных, завершение форм и checkout, мобильную конверсию, доход на сеанс, ошибки взаимодействия, органические входы и обращения из-за технических проблем.

Сравнивайте одинаковые сегменты и учитывайте источники, сезонность, цену, дизайн и кампании. Не приписывайте скорости весь рост, если одновременно изменились другие факторы.

Когда нужна техническая помощь

Сжатие фото или отключение виджета относительно безопасны. Кеширование checkout, база, миграция, critical CSS и bundle требуют staging, мониторинга и плана отката.

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

Чек-лист после оптимизации

• протестированы типовые страницы;

• сравнены холодный и прогретый кеш;

• проверены мобильный и десктопный сценарии;

• работают формы, корзина, оплата и кабинет;

• корректны Cache-Control и Content-Encoding;

• LCP обнаруживается и загружается рано;

• изображения имеют нужные форматы, размеры и srcset;

• сторонние скрипты не блокируют первый экран;

• шрифты не скрывают и не двигают текст;

• отслеживаются полевая аналитика и Search Console;

• доступны резервная копия и откат.

Стоимость оптимизации

Цена зависит от причины, а не от балла. Конвертация фото и базовый кеш могут быть небольшой задачей. Переписывание фильтра, темы, инфраструктуры или большой базы — отдельный инженерный проект.

Если проблема связана с фундаментом и рассматривается новая платформа, основные бюджетные факторы раскрывает статья сколько стоит сайт в 2026 году. Для оценки нужны URL, аналитика, стек, хостинг, интеграции и профиль производительности.

Вывод

Правильная проверка скорости начинается с диагностики, а не с установки случайного плагина. Определите источник задержки: сеть, сервер, HTML, медиа, блокирующий код или взаимодействие. Проверьте типовые страницы, объедините лабораторные и полевые данные, расставьте приоритеты и измерьте результат после релиза.

Для технического аудита и безопасного плана оптимизации свяжитесь с BB STUDIO.