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

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

Что считается быстрой страницей

Одного числа «сайт грузится N секунд» недостаточно: страница может показать заголовок за секунду, а кнопка при этом ещё полминуты не реагирует на нажатие. Поэтому Google в документации web.dev описывает три показателя Core Web Vitals, и их же показывают большинство сервисов проверки.

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

Есть важная оговорка. Оценивать страницу рекомендуется по 75-му процентилю загрузок и отдельно для телефонов и компьютеров. Это значит, что три четверти реальных посещений должны уложиться в порог. Если вы один раз открыли сайт на быстром компьютере в офисе и всё загрузилось мгновенно, это ещё не показатель: у посетителя с телефоном и слабой мобильной сетью картина может быть совсем другой. Подробное описание показателей и порогов смотрите на странице Core Web Vitals на web.dev.

Где проверить скорость сайта

Для первой проверки достаточно трёх бесплатных источников. Они отвечают на разные вопросы, поэтому полезно использовать их вместе.

PageSpeed Insights: лабораторный замер

Сервис от Google (pagespeed.web.dev) принимает адрес страницы и показывает два блока данных. Первый, лабораторный, это тестовая загрузка в одинаковых условиях: она хороша для сравнения «до и после». Второй, данные реальных пользователей, показывается не для каждой страницы: для сайтов и страниц с малым трафиком такого блока может не быть.

Отчёт «Время загрузки страниц» в Яндекс Метрике

Если счётчик Метрики уже стоит на сайте, у вас есть данные о реальных загрузках. Согласно справке Метрики, отчёт находится в разделе «Отчёты → Мониторинг → Время загрузки страниц». Показателем полной загрузки страницы в нём считается метрика «Время до загрузки DOM», а средние значения по всему сайту собраны в строке «Итого и средние».

Три приёма делают отчёт полезным.

• Квантиль. По умолчанию выбран квантиль 50%: в половине загрузок страница открывалась не дольше указанного времени. Поставьте 90%, и вы увидите, как сайт ведёт себя у самых медленных посетителей.
• Сегмент по странице. Чтобы узнать время загрузки одной страницы, создайте сегмент: в группе условий «Скорость загрузки» выберите «Просмотр URL» и укажите адрес. Диаграмма «Линии» покажет динамику.
• География. Через «Группировки → Аудитория → География» можно сравнить города и страны. Сайт, быстрый в Москве, бывает заметно медленнее для посетителей из дальних регионов.

Описание отчёта есть в справке Яндекс Метрики.

Панель разработчика в браузере

В Chrome и других браузерах на основе Chromium нажмите F12 и откройте вкладку Network (Сеть). Обновите страницу с отключённым кэшем: вы увидите список всех файлов, их размер и время загрузки. Для нашей задачи важны три столбца: размер, время и заголовки ответа. Именно здесь видно, какой файл самый тяжёлый и откуда он загружается: с вашего сервера или со стороннего адреса.

Что обычно тормозит страницу

На практике причины повторяются. Ниже список в порядке, в котором их удобно проверять. Это практика, а не данные исследования: смотрите на свой сайт.

1. Тяжёлые изображения. Фотография в несколько мегабайт на первом экране почти всегда главный виновник медленного LCP.
2. Лишние скрипты. Счётчики, чаты, пиксели рекламных систем, карты, виджеты отзывов: каждый добавляет запросы и работу браузеру.
3. Медленный ответ сервера и отсутствие кэширования. Если сервер долго собирает страницу, ускорять уже нечего: браузер ждёт первый байт.
4. Вёрстка без заданных размеров. Картинка без размеров сдвигает текст при загрузке, и это ухудшает CLS.

Как ускорить: изображения

Начните с изображений: это самая частая и самая простая правка.

• Сожмите файлы и подберите формат. Для фотографий подходят JPEG и WebP, для схем и логотипов лучше SVG. Если картинка на экране занимает 600 пикселей по ширине, загружать её шириной 4000 пикселей незачем.
• Задайте размеры. Атрибуты width и height в теге img позволяют браузеру зарезервировать место заранее, и текст не прыгает.
• Отложите то, что ниже первого экрана. Атрибут loading="lazy" откладывает загрузку картинок, пока посетитель не доскроллит до них. Но не ставьте его на главное изображение первого экрана: оно как раз определяет LCP и должно грузиться сразу.

Пример тега, который не сдвигает вёрстку и не мешает остальной загрузке: <img src="photo.webp" alt="Описание" width="800" height="450" loading="lazy">. Для изображения первого экрана тот же тег пишут без loading="lazy".

Как ускорить: скрипты

Обычный тег script в начале страницы останавливает разбор страницы, пока файл не скачан и не выполнен. Два атрибута меняют это поведение.

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

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

Затем уберите то, что не используется. Старый счётчик, виджет, который отключили полгода назад, пиксель закрытой рекламной кампании: такие скрипты продолжают загружаться и никому не нужны.

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

Если файл уже был на устройстве посетителя, второй раз скачивать его не нужно. Это работает, когда сервер отдаёт заголовок Cache-Control с разумным сроком: для файлов, которые меняются редко (картинки, шрифты, скрипты), срок обычно делают долгим. И второе: текстовые файлы (скрипты, стили, HTML) полезно отдавать сжатыми, в заголовках ответа это видно как Content-Encoding: gzip или br.

Проверить оба заголовка легко: во вкладке Network кликните на файл и откройте раздел Headers. Если у тяжёлых файлов нет ни кэширования, ни сжатия, это повод написать разработчику или хостинг-провайдеру.

У долгого кэша есть оборотная сторона: если вы замените файл под тем же именем, посетители какое-то время будут видеть старую версию. Поэтому при изменении картинки или скрипта меняйте и имя файла, добавляйте версию в адрес.

Виджеты и сторонние скрипты: как проверить, что они не тормозят

Чат, обратный звонок, квиз и другие виджеты подключаются кодом с чужого адреса. Это самый частый вопрос, который задают перед установкой: не замедлит ли он сайт. Честный ответ: зависит от виджета и от способа подключения, поэтому лучше измерить, чем верить обещаниям.

Для примера мы измерили собственный сайт. На ognemet.com виджет обратного звонка подключён одной строкой с атрибутом async, то есть он не задерживает разбор страницы. Стартовый файл виджета 23 октября 2026 года ответил с кодом 200, весит 6,6 КБ в распакованном виде и около 2,5 КБ в сжатом, а в заголовке ответа указан срок кэширования примерно 360 дней (max-age=31104000). Это замер одного файла. Он не говорит, сколько весит весь виджет целиком: после запуска стартовый файл может подгружать настройки и оформление. Поэтому полную картину во вкладке Network надо смотреть самим, на своём сайте и со своим кодом.

Алгоритм проверки виджета занимает полчаса.

1. Выберите одну страницу, например главную или страницу услуги, и один способ замера: PageSpeed Insights или отчёт Метрики по этой странице.
2. Замерьте страницу без виджета не меньше пяти раз и запишите медиану, а не лучший результат. Разброс между замерами нормален.
3. Подключите виджет и повторите замер на тех же условиях: то же устройство, тот же способ, то же время суток.
4. Сравните три показателя и общее время. Если LCP вырос заметно, откройте Network и найдите, какие запросы добавил виджет.
5. Проверьте поведение: форма заявки и меню работают, кнопка виджета не перекрывает важные элементы, текст не сдвинулся.

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

План на неделю

1. День 1. Выберите пять главных страниц: главная, две страницы услуг, контакты, страница с формой. Замерьте их в PageSpeed Insights и запишите LCP, INP, CLS.
2. День 2. Откройте отчёт «Время загрузки страниц» в Метрике, поставьте квантиль 90% и найдите самые медленные страницы и регионы.
3. День 3. Во вкладке Network отсортируйте файлы по размеру. Три самых тяжёлых обычно и есть первая задача.
4. День 4. Сожмите изображения, задайте размеры, уберите loading="lazy" у главной картинки первого экрана.
5. День 5. Просмотрите внешние скрипты: уберите неиспользуемые, добавьте async или defer там, где это безопасно.
6. День 6. Проверьте заголовки кэширования и сжатия у тяжёлых файлов.
7. День 7. Повторите замер пяти страниц и сравните с первым днём. Проверьте, что формы, чат и кнопки работают.

Типичные ошибки

• Оценивать скорость по одному замеру и только с компьютера. Смотрите медиану нескольких замеров и мобильную версию.
• Гнаться за баллом в сервисе проверки. Балл удобен для сравнения, но решает не он, а реальное время открытия и отклик у посетителей: сверяйте с данными Метрики.
• Включить loading="lazy" на всех картинках подряд, включая главную. Это замедляет LCP.
• Убрать виджет заявок ради скорости, не измерив его вклад. Сначала замер, потом решение.

Если вы делаете сайты для клиентов

Проверка скорости до и после подключения виджетов хорошо ложится в чек-лист сдачи работ: у клиента остаются понятные цифры, а у вас аргумент в споре, если «сайт стал медленнее». Если вы подключаете сервисы OGNEMET клиентам, обратите внимание на партнёрскую программу: вознаграждение составляет 20%, условия описаны на странице программы.

Коротко

Хорошая скорость это LCP до 2,5 секунды, INP до 200 миллисекунд и CLS до 0,1 у трёх четвертей посещений. Измеряйте страницу в PageSpeed Insights и в отчёте Метрики, начинайте с изображений и скриптов, проверяйте кэш и сжатие, а любой виджет оценивайте замером до и после. Сначала цифры, потом решения.