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

Скорость загрузки сайта складывается из нескольких замеров. Это то, как быстро отвечает сервер, когда посетитель видит главный блок, прыгает ли вёрстка и как страница реагирует на нажатия. Откройте PageSpeed Insights и сначала посмотрите данные реальных посетителей, потом лабораторные. Сделайте 3–5 замеров в мобильном режиме на страницах, куда ведёт реклама. Причину ищите по симптому: сервер, картинки или сторонние скрипты.

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

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

Нормальным считайте результат, при котором сервис ставит вашим главным страницам статус «хорошо», а цифры не хуже прошлых замеров и не хуже, чем у конкурентов. Абстрактная «правильная секунда» для решений не годится: у кафе и у интернет-магазина разные страницы и разная нагрузка.

Чтобы оценивать сайт не на глаз, пройдите четыре шага.

1. Выберите страницы. Выпишите адреса: посадочная страница рекламы, страница с формой или телефоном, карточка главной услуги, главная. Проверка: в списке есть страницы, с которых приходят заявки, а не только главная.
2. Запустите замер. Вставьте адрес в сервис, выберите мобильный режим, повторите замер 3–5 раз с паузой в пару минут. Проверка: у каждой страницы набралась серия, а не один прогон.
3. Запишите результат. Заведите таблицу с колонками: дата, страница, режим, статус по каждому показателю, оценка. Проверка: через месяц вы сможете сравнить те же строки.
4. Сравните. Сопоставьте свои цифры с прошлым замером и с двумя-тремя конкурентами — тем же типом страниц, в том же режиме. Проверка: вы видите динамику, а не единичное число.

Таблица выглядит скромно, но именно она защищает от отчёта «стало лучше» без доказательств. Если подрядчик меняет что-то на сайте, строка «до» у вас уже есть.

Как читать отчёт PageSpeed Insights: что смотреть первым

Читайте экран сверху вниз, но помните: итоговая оценка от 0 до 100 — вторичная цифра. Решения принимают по показателям реальных посетителей, а балл — только подсказка. Это бесплатный онлайн-инструмент Google, и порядок блоков в нём удобно разбирать так.

1. Переключатель «Мобильные / Компьютер». Начинайте с мобильного: на рекламные страницы часто приходят с телефона, и там проблемы заметнее.
2. Данные реальных пользователей. Это статистика, которую Google накопил по настоящим визитам. У небольшого сайта её часто нет — сервис пишет, что данных недостаточно. У сайта с малым трафиком так бывает часто: смотрите лабораторный блок и возвращайтесь к полевым позже.
3. Три основных показателя (Core Web Vitals). LCP — момент, когда посетитель видит главный блок страницы: заголовок, баннер, фото услуги. INP — как быстро страница откликается на клик или нажатие. CLS — прыгает ли вёрстка при загрузке. Бытовой пример: в онлайн-школе человек тянется к кнопке «Записаться», а над ней догружается баннер, и палец попадает в ссылку на блог — так выглядит плохой CLS.
4. Лабораторные данные. Один искусственный прогон страницы в стандартных условиях. Поэтому они скачут от замера к замеру, и сравнивать стоит серию, а не один прогон.
5. Оценка от 0 до 100. Сводная цифра по лабораторному прогону. Она удобна для сравнения «до и после», но гнаться за максимумом не нужно.
6. Диагностика и рекомендации. Список подсказок, что можно улучшить. Выполнять всё подряд не обязательно — отобрать нужное поможет матрица «эффект × трудоёмкость» из раздела про приоритеты.

Условный пример того, что вы можете увидеть (цифры условные, статусы для иллюстрации): в мобильном режиме у страницы с формой LCP в статусе «требует улучшения», INP и CLS — «хорошо», оценка в жёлтой зоне, а первая подсказка — уменьшить изображения. Такой экран говорит, что главный блок появляется поздно, и начинать стоит с картинок, а не с кода.

Полевые и лабораторные данные: чем отличаются

Полевые данные собраны по реальным посетителям за длительный период: с их телефонами, сетью и привычками. Лабораторные — один прогон на условном устройстве с заданной скоростью сети. Для решений «что чинить и стоит ли вообще» опирайтесь на полевые: они показывают опыт настоящих клиентов. Для проверки конкретной правки подходят лабораторные, если вы мерите в тех же условиях: тот же сервис, тот же режим, та же страница. По справке PageSpeed Insights полевые данные обновляются ежедневно, но охватывают последние 28 дней, поэтому эффект правок проявляется в них постепенно.

Почему сайт быстро открывается на компьютере, но тормозит на телефоне

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

Что проверить в первую очередь:

• результат именно в мобильном режиме, а не на вкладке «Компьютер»;
• отдаёт ли сайт телефону уменьшенные изображения или те же огромные файлы, что и монитору;
• всплывающие окна, виджеты обратного звонка и чат — на телефоне они перекрывают экран и нагружают процессор;
• слайдеры и видео на первом экране.

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

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

Что замедляет сайт: сервер, картинки или сторонние скрипты

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

Обратите внимание: только первая строка почти всегда требует денег на хостинг или разработчика. Картинки и лишние виджеты владелец часто убирает сам.

Условные примеры, на которых видна разница:

• Кафе. Тяжёлые фото меню на первом экране. Причина — картинки. Владелец с дизайнером сжимают и уменьшают фото, оставляют одну обложку вместо слайдера.
• Автосервис. Картинка вверху лёгкая, а прайс и форма записи появляются долго, причём на любой странице. Причина — сервер или CMS. Решает хостинг-провайдер или разработчик: тариф, кеширование, запросы к базе.
• Онлайн-школа. На странице курса стоят чат, несколько пикселей рекламы, виджет оплаты и видео. Страница появилась, но кнопка «Записаться» реагирует с задержкой. Причина — сторонние скрипты. Владелец решает, какие сервисы реально нужны, остальное убирают.

Как отличить одну причину от другой

Сравните две страницы: лёгкую, без фото и виджетов (например, «Контакты» или политику конфиденциальности), и тяжёлую — посадочную с галереей.

• Сервер. Долго «пусто» до появления хоть чего-то, причём на лёгкой странице тоже и в любое время суток.
• Картинки. Лёгкая страница открывается бодро, а у тяжёлой главный блок появляется заметно позже; в рекомендациях на первых местах изображения.
• Скрипты. Страница уже видна, но «замерзает»: прокрутка дёргается, кнопки не отвечают. Если на тестовой копии временно отключить виджет и замер улучшится — виновник найден.

Что исправлять первым: матрица «эффект × трудоёмкость»

Начинайте с того, что дёшево и заметно меняет показатели на страницах с заявками. Не все советы отчёта нужно выполнять: проверяйте, сдвигает ли пункт LCP, INP или CLS там, куда приходят клиенты. Если не сдвигает — пункт подождёт.

Порядок работ обычно такой:

1. Картинки на первом экране посадочных страниц и страниц с формой.
2. Ревизия сторонних скриптов: что из чатов, пикселей и виджетов реально используется.
3. Повторная серия замеров и сверка с таблицей «до».
4. Только если медленный ответ сервера остался — хостинг, кеширование, шаблон.

Последний шаг самый дорогой, поэтому до него стоит дойти с доказательствами, а не по совету «на всякий случай переедем». Скорость — лишь часть технического состояния сайта. Если вместе с ней хочется проверить индексацию, дубли и ошибки, это задача SEO-аудита.

Что можно сделать на Tilda и на Битрикс самому, а что нужен разработчик

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

Tilda

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

Битрикс

Перед любыми изменениями в админке Битрикс сделайте резервную копию: отключённый «ненужный» модуль иногда оказывается нужным форме заявки. Примеры сайтов на обеих платформах — в разделах кейсов на Tilda и кейсов на Битрикс.

Почему разные сервисы показывают разные результаты для одного сайта

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

Рабочее правило простое:

• берите один сервис и одни настройки: тот же режим, та же страница;
• делайте 3–5 замеров подряд и сравнивайте медианы, а не лучший результат;
• не смешивайте сервисы в одном отчёте «до и после»;
• для решений смотрите полевые данные, для проверки правок — лабораторные в одинаковых условиях.

Пример расчёта медианы (цифры условные). Пять замеров одной страницы в мобильном режиме дали оценки 38, 51, 44, 47 и 42. Шаг 1: расставляем по возрастанию — 38, 42, 44, 47, 51. Шаг 2: берём значение посередине ряда, третье. Итог: медиана 44. Если подрядчик покажет только 51, это лучший прогон, а не реальная картина.

Как принять работу подрядчика по ускорению сайта

Принимайте работу по замерам «до и после» в одинаковых условиях и по списку изменений, а не по одному скриншоту с высоким баллом. Договоритесь о правилах приёмки до начала работ — потом спорить сложнее.

Чек-лист приёмки:

• Замер до и после — в том же сервисе, в том же режиме, на тех же страницах.
• Серия из 3–5 замеров и сравнение медиан, а не одного лучшего результата.
• Проверены минимум три страницы: главная, посадочная рекламы, страница с формой или звонком.
• Чат, метрика и виджеты включены так же, как у реальных посетителей. Если их отключили на время замера, цифра красивая, но опыт клиента она не отражает.
• Есть список: что изменено, что решили не делать и почему.
• Формы и заявки работают после правок — отправлена тестовая заявка.
• Через 2–4 недели сверены полевые данные, если сервис их показывает.
• Доступы, хостинг и домен остались на владельце; резервная копия сделана до правок.

Вопросы подрядчику до старта:

1. Что именно будем замерять и на каких страницах?
2. Какой результат считаем принятым?
3. Что будет отключено, а что останется?
4. Работаете на копии сайта или сразу на рабочем?
5. Кто отвечает, если после правок перестанут приходить заявки?
6. Как откатить изменения, если что-то сломается?

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

Что делать дальше

Начните с таблицы замеров по трём-четырём страницам с заявками — это недолго и уже покажет, есть ли проблема со скоростью загрузки сайта. Если причина неочевидна или упирается в сервер и шаблон, маркетинговое агентство 360i (Челябинск) поможет измерить, найти, что именно тормозит, и исправить это на технической поддержке. Доступы, домен и хостинг остаются у вас.

Когда к нам не нужно: если сайт на Tilda небольшой, полевые данные хорошие, а проблема в паре тяжёлых картинок — вы справитесь сами по чек-листу выше.

Частые вопросы