Скорость загрузки сайта: как проверить, какие нормы и как ускорить

Проверьте скорость загрузки страницы

Введите адрес — сервер СеоГарда загрузит страницу и покажет время ответа сервера (до первого байта), время загрузки и вес HTML, включено ли сжатие gzip или brotli и кэширование. Затем разберёт ресурсы: сколько скриптов, стилей, картинок и шрифтов и сколько они весят (до 40 ресурсов), какие скрипты в <head> блокируют отрисовку, какие картинки без loading="lazy" и без размеров и сколько сторонних доменов подключено. В итоге — список «что ускорит».

Как проверить скорость сайта: шесть инструментов и в чём разница

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

PageSpeed Insights: как читать результат

Если вверху написано, что данных о реальных пользователях недостаточно, — у страницы мало посещений из Chrome, смотрите данные по всему сайту (переключатель «Origin») или ориентируйтесь на лабораторный тест. Оценка 0–100 внизу — это Lighthouse на эмулированном смартфоне с медленной сетью: 90–100 — зелёная зона, 50–89 — оранжевая, 0–49 — красная. Оценка скачет от запуска к запуску на несколько пунктов, поэтому сравнивайте не одиночные замеры, а средние из трёх-пяти. Важно: Lighthouse не измеряет INP — вместо него показывает Total Blocking Time, общее время, когда основной поток был занят скриптами.

Где в Метрике и Вебмастере

• Метрика: Отчёты → Мониторинг → «Время загрузки страниц». Данные собираются счётчиком у ваших посетителей, в том числе в Яндекс Браузере и Safari, которых нет в данных Chrome.
• Вебмастер: индекс скорости сайта считается по обезличенным данным Яндекс Браузера о загрузке страниц при переходе из мобильного поиска Яндекса и обновляется не реже раза в месяц. Его показывают среди показателей качества сайта (сейчас это раздел «Оптимизация сайта» → «Показатели качества»). Если трафика мало, индекс не рассчитывается и шкала пустая.

Метрики скорости: TTFB, LCP, INP, CLS и их нормы

Основные метрики Google — Core Web Vitals. С 12 марта 2024 года в них три показателя: INP заменил прежний FID (задержку первого ввода). TTFB в Core Web Vitals не входит, но от него зависит всё остальное.

Значения между «хорошо» и «плохо» — зона «нужно улучшить». Оценивается 75-й процентиль: метрика «хорошая», если хороший результат получают минимум три посещения из четырёх, отдельно на телефонах и компьютерах.

Какой сайт считается быстрым

Короткий ответ — тот, у которого все три Core Web Vitals в зелёной зоне по полевым данным. Секунды «полной загрузки» сами по себе мало что значат: страница может догружать счётчики и чат ещё 10 секунд, а посетитель уже читает и кликает. Важно, когда он увидел главное и может ли нажать кнопку.

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

Влияет ли скорость на позиции в Яндексе и Google

Google

В документации Search Central сказано прямо: Core Web Vitals используются системами ранжирования. Там же оговорки: единого сигнала «удобство страницы» нет, Google всегда старается показать самый релевантный результат, даже если удобство у страницы хуже, а хорошие показатели в Search Console не гарантируют верхних позиций. Скорость помогает больше всего, когда много страниц одинаково хорошо отвечают на запрос.

Яндекс

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

Как ускорить сайт: сервер, хостинг, сжатие и кэширование

Начинайте с того, что ускоряет все страницы сразу.

1. Ответ сервера. Если TTFB больше секунды, оптимизация картинок мало что даст. Причины: дешёвый перегруженный хостинг, страницы собираются без кэша при каждом запросе, медленные запросы к базе, старая версия PHP. Решения — кэш страниц на стороне CMS или сервера, обновление PHP, более мощный тариф или VPS, сервер ближе к аудитории.
2. Сжатие. HTML, CSS, JS, SVG и JSON должны отдаваться с Content-Encoding: gzip или br (brotli). Текстовые файлы при этом уменьшаются в несколько раз. Картинки в JPEG, PNG, WebP и AVIF уже сжаты — их повторно не сжимают.
3. Кэширование в браузере. Статика с версией или хешем в имени файла (app.4f2c1.js) может храниться год: при изменении файла меняется и имя. HTML кэшируют коротко или не кэшируют вовсе.
4. Редиректы. Каждый лишний переход — ещё один запрос до первого байта. Ссылайтесь сразу на конечный адрес, без цепочек http → https → www → слеш. Проверить цепочку — проверка редиректов.
5. CDN и HTTP/2. CDN отдаёт статику с ближайшего к посетителю узла и снимает нагрузку с сервера. HTTP/2 или HTTP/3 загружает много файлов параллельно по одному соединению.

Пример настройки сжатия и кэша для nginx:

# сжатие (text/html сжимается всегда)
gzip on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_types text/css application/javascript application/json image/svg+xml text/plain;
# brotli подключается отдельным модулем ngx_brotli

# год кэша для статики с хешем в имени
location ~* \.(css|js|woff2|webp|avif|jpg|jpeg|png|svg)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

В Apache то же делают модули mod_deflate (или mod_brotli) и mod_expires. На виртуальном хостинге сжатие часто включается галочкой в панели.

Изображения: WebP, AVIF, размеры и lazy loading

Картинки — самая тяжёлая часть большинства страниц и чаще всего элемент LCP. Четыре правила дают основной выигрыш:

• Современные форматы. WebP обычно легче JPEG на четверть-треть при том же качестве, AVIF — ещё легче. Оба поддерживаются всеми актуальными браузерами; для старых оставьте JPEG в <picture>.
• Размер под экран. Не отдавайте фото 4000 пикселей в блок шириной 400. Через srcset браузер выберет подходящую версию для телефона и компьютера.
• width и height у каждой картинки. Браузер заранее резервирует место — и текст не прыгает. Это главный способ исправить CLS.
• Lazy loading — только ниже первого экрана. loading="lazy" откладывает загрузку картинок, до которых посетитель не долистал. Картинке первого экрана его ставить нельзя: она загрузится позже и ухудшит LCP. Ей, наоборот, помогает fetchpriority="high".

<!-- первый экран: без lazy, с приоритетом -->
<img src="/img/hero.avif" width="1200" height="600" fetchpriority="high" alt="Кухня «Прованс»">

<!-- ниже первого экрана: современные форматы и lazy -->
<picture>
  <source srcset="/img/sofa.avif" type="image/avif">
  <source srcset="/img/sofa.webp" type="image/webp">
  <img src="/img/sofa.jpg" width="800" height="600" loading="lazy" alt="Угловой диван «Лион»">
</picture>

Видео на первом экране — отдельная история: вместо автозапуска тяжёлого ролика покажите обложку и загружайте плеер по клику.

Шрифты и сторонние скрипты

Шрифты

Каждое начертание — отдельный файл на 20–100 КБ, а пока шрифт не загружен, браузер может не показывать текст. Что делать:

• Только WOFF2 — самый компактный формат, его понимают все актуальные браузеры.
• Два-три начертания вместо шести; только нужные наборы символов (кириллица и латиница).
• font-display: swap — текст сразу показывается системным шрифтом и заменяется, когда загрузится фирменный.
• Основной шрифт первого экрана — через preload; шрифты лучше хранить на своём домене.

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
}

Сторонние скрипты

Онлайн-чаты, виджеты обратного звонка, пиксели рекламных систем, карты, видео, A/B-тесты, системы аналитики — каждый тянет свои файлы с чужих серверов и занимает процессор телефона. Именно они чаще всего портят INP.

1. Составьте список: проверка выше показывает сторонние домены, а PageSpeed Insights — сколько времени занимает каждый.
2. Удалите то, чем никто не пользуется: старые пиксели, второй счётчик, забытые тесты.
3. Оставшееся подключайте с async или defer, не в начале <head>.
4. Тяжёлые виджеты — чат, карту, видео — загружайте по клику или после основной загрузки страницы.
5. Свои скрипты делите по страницам: код корзины не нужен в статье блога.

Ускорение сайта на Tilda, 1С-Битрикс и WordPress

С чего начать: порядок работ

После изменений полевые данные обновляются не сразу: PageSpeed Insights и Search Console считают их за последние 28 дней. В Метрике динамику видно быстрее. Скорость легко потерять: новый виджет, плагин или баннер на главной — и метрики снова в красной зоне. СеоГард обходит страницы по расписанию и показывает, где сервер отвечает слишком долго или ошибкой, — чтобы откат замечали сразу.

Скорость — лишь один пункт технической проверки. Полный список — в статье SEO-аудит сайта: чек-лист.

Чек-лист