Как проверить скорость загрузки сайта

За 15-20 минут вы проверите скорость загрузки сайта на компьютере и телефоне, найдете медленные страницы и поймете, что исправлять первым. Для проверки хватит Google PageSpeed Insights, Яндекс Вебмастера и встроенных инструментов браузера.

Почему скорость важна

Скорость загрузки сайта влияет на поведение посетителя и видимость страниц в поиске. Если первый экран долго остается пустым, человек закрывает вкладку, возвращается к результатам поиска или несколько раз нажимает на кнопку. Каждое лишнее действие повышает вероятность отказа.

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

Проверяйте важные шаблоны, а не только главную страницу:

• главную;
• страницу услуги или категории;
• карточку товара;
• статью из органического поиска;
• страницу контактов или оформления заказа.

Какие показатели смотреть

Главный инструмент для первичной проверки, Google PageSpeed Insights. Откройте сервис, вставьте полный адрес страницы и нажмите кнопку "Анализировать". После проверки переключитесь между вкладками "Мобильные устройства" и "Компьютеры".

Сначала смотрите блок "Основные показатели веб-страниц" (Core Web Vitals, набор метрик реального пользовательского опыта). В отчетах встречаются три главных показателя:

Для Core Web Vitals ориентируйтесь прежде всего на LCP, INP и CLS. Полевые данные собираются с реальных устройств за предыдущий период, поэтому после правок они обновляются не сразу. Лабораторные данные в разделе "Диагностика" появляются после каждого запуска, но зависят от выбранного режима теста.

Затем откройте блоки "Возможности" и "Диагностика". Ищите пункты с большой экономией времени или объема. Часто там встречаются такие отчеты:

• "Эффективно кодируйте изображения" - файлы занимают больше места, чем нужно;
• "Используйте современные форматы изображений" - стоит перейти на WebP или AVIF;
• "Удалите неиспользуемый JavaScript" - браузер загружает лишний код;
• "Устраните ресурсы, блокирующие отображение" - CSS или скрипты задерживают первый экран;
• "Сократите время ответа сервера" - сервер долго начинает отдавать HTML;
• "Избегайте огромных сетевых полезных нагрузок" - страница передает слишком много данных;
• "Задайте размеры изображений" - без width и height блоки могут прыгать.

Один балл PageSpeed не заменяет анализ. Оценка зависит от сети, процессора, рекламы, кеша и случайного состояния сервера. Смотрите на конкретные рекомендации и их влияние на LCP, INP, CLS.

Проверка на компьютере и телефоне

Проверка через Google PageSpeed Insights

1. Откройте страницу, которую хотите измерить.
2. Скопируйте ее полный URL, включая протокол HTTPS.
3. Вставьте адрес в PageSpeed Insights и нажмите "Анализировать".
4. Запишите значения LCP, INP, CLS, FCP и TTFB для мобильного режима.
5. Откройте вкладку "Компьютеры" и повторите запись показателей.
6. Разверните рекомендации из разделов "Возможности" и "Диагностика".
7. Сохраните список проблем и оценку потенциальной экономии.

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

Проверка в Chrome без внешнего сервиса

1. Откройте страницу в режиме инкогнито.
2. Нажмите F12 или выберите "Дополнительные инструменты", затем "Инструменты разработчика".
3. Перейдите на вкладку "Lighthouse".
4. Выберите категорию "Performance", устройство "Mobile" и режим "Navigation".
5. Нажмите "Analyze page load".
6. После отчета изучите разделы "Metrics", "Opportunities" и "Diagnostics".

Для ручного замера откройте вкладку "Network", включите "Disable cache", выберите throttling "Fast 4G" или "Slow 4G", затем обновите страницу. Внизу появятся общий объем передачи и количество запросов. Включайте "Preserve log", если переходите по нескольким страницам.

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

Проверка в Яндексе

В Яндекс Вебмастере откройте нужный сайт и найдите раздел с диагностикой качества сайта. В отчете "Показатели страницы" или в разделе, связанном с производительностью, смотрите данные по Core Web Vitals и скорости ответа. Названия пунктов могут меняться вместе с интерфейсом.

Для проверки конкретного URL используйте доступный инструмент проверки страниц, вставьте адрес и запустите анализ. Если Яндекс показывает медленную скорость загрузки, сопоставьте адрес с отчетом PageSpeed Insights. Разные сервисы используют разные устройства, сети и точки измерения, поэтому цифры не обязаны совпадать.

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

Основные причины медленной загрузки

Тяжелые изображения

Фотография с камеры может весить 4-10 МБ, хотя на экране занимает 600 пикселей. Браузер сначала скачивает файл целиком, а потом уменьшает его. Это особенно заметно на мобильном интернете.

Медленный сервер

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

Лишний JavaScript

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

CSS и шрифты

Большой общий файл стилей задерживает первый экран. Несколько начертаний шрифта увеличивают объем и создают задержку текста. Оставьте используемые варианты, примените preload только к действительно критичному шрифту и проверьте, не блокирует ли он отображение.

Неправильный кеш

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

Скачки макета

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

Оптимизация изображений и кода

Начните с ресурсов, которые попадают в первый экран. Откройте отчет PageSpeed, разверните "Эффективно кодируйте изображения" и выпишите файлы из списка. Для каждого изображения пройдите такой порядок:

1. Обрежьте лишнее содержимое в редакторе.
2. Подберите размер под реальный контейнер, например 800 пикселей вместо исходных 4000.
3. Сохраните фото в WebP или AVIF, а простую графику и логотипы оставьте в SVG.
4. Сожмите файл без заметной потери качества.
5. Добавьте атрибуты width и height.
6. Для изображений ниже первого экрана включите lazy loading.
7. Главную картинку первого экрана не откладывайте, если она формирует LCP.

Для адаптивной выдачи используйте srcset и sizes. Например, браузер сможет взять маленький файл на узком экране, а не загрузить большую фотографию для монитора.

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" loading="lazy" alt="Описание изображения">

Не ставьте loading="lazy" на логотип, обложку статьи или главный баннер, если они видны сразу. Отложенная загрузка первого экрана ухудшит LCP.

Дальше уменьшите код:

• удалите плагины и библиотеки, которыми никто не пользуется;
• объедините повторяющиеся CSS-правила и удалите неиспользуемые стили;
• подключите minify для CSS, JavaScript и HTML;
• используйте defer для скриптов, которым не нужен запуск до построения страницы;
• перенесите чат, карту и рекламные скрипты после согласия или действия пользователя;
• включите Brotli или Gzip для текстовых файлов;
• настройте CDN для статических ресурсов, если посетители находятся далеко от сервера;
• включите серверный кеш и проверьте, что он работает для гостя без авторизации.

Отдельно проверьте сторонние ресурсы. Вкладка "Network" покажет домены и время загрузки. Поочередно отключайте виджеты в тестовой копии сайта и сравнивайте результат. Не удаляйте код из рабочего сайта без резервной копии.

Этот же список можно получить готовым: Seohand собирает его бесплатно за пару минут.

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

• Проверяют только главную. Главная может быть легкой, а карточка товара содержать галерею, отзывы и несколько виджетов. Проверяйте по одному URL каждого важного типа.
• Смотрят только на зеленый балл. Оценка меняется от запуска к запуску. Ориентируйтесь на Core Web Vitals и конкретные файлы.
• Проверяют только на мощном компьютере. На офисном ноутбуке проблема может быть незаметна. Сравните Mobile и Desktop.
• Запускают тест с включенным кешем. Так часть файлов уже находится в браузере, и новый посетитель получит другой результат. Используйте "Disable cache".
• Сжимают все изображения одинаково. Логотип, фотография и скриншот требуют разных форматов и степени сжатия. Сравнивайте качество глазами.
• Откладывают все скрипты. Если отложить код меню, оплаты или доступности, интерфейс сломается. Сначала определите зависимость скрипта от первого взаимодействия.
• Сразу покупают новый хостинг. Медленный TTFB может появиться из-за одного тяжелого запроса или неисправного кеша. Посмотрите серверные логи и время ответа до переноса.
• Оценивают страницу по одному запуску. Сеть и нагрузка меняются. Сделайте несколько замеров до и после исправлений в одинаковом режиме.
• Исправляют проблему на странице и не проверяют мобильную версию. Адаптивный шаблон может загружать отдельные изображения, шрифты и скрипты. Повторите тест для телефона.

Как поставить задачу нейросети

Нейросеть пригодится для разбора отчета, составления очередности работ и подготовки кода. Передайте ей URL, скриншоты или текст из разделов "Возможности" и "Диагностика". Не просите ее угадать причину по одному баллу.

Скопируйте промпт ниже и замените данные в квадратных скобках:

Ты технический SEO-специалист и веб-разработчик. Проанализируй данные PageSpeed Insights для страницы [URL]. Устройство: [Mobile или Desktop]. Результаты: LCP [значение], INP [значение], CLS [значение], FCP [значение], TTFB [значение]. Рекомендации отчета: [вставьте текст]. Список сетевых ресурсов: [вставьте домен, размер и время для самых тяжелых запросов]. Составь таблицу: проблема, возможная причина, что проверить вручную, конкретное исправление, риск для сайта, приоритет от 1 до 5, ожидаемый показатель после исправления. Не выдумывай отсутствующие данные. Если причины нельзя установить по отчету, напиши, какой дополнительный замер нужен. Отдельно предложи безопасные изменения для изображений, CSS, JavaScript, кеша и сервера. Для каждого изменения укажи, как откатить его и как повторно измерить результат. Не советуй удалять скрипты без проверки их назначения.

Нейросеть может ошибиться. Она не видит настройки сервера, реальный код страницы и поведение пользователей, если вы их не передали. Она иногда путает причину с рекомендацией, советует добавить preload для каждого файла или называет lazy loading универсальным исправлением. Модель может придумать несуществующую кнопку в интерфейсе PageSpeed и неверно оценить влияние стороннего скрипта.

Проверяйте каждый совет в DevTools, исходном коде и тестовой копии сайта. После одного изменения снова запускайте PageSpeed, очищайте кеш и сравнивайте LCP, INP, CLS, TTFB, объем страницы и число запросов. Если цифры улучшились, но меню, форма или оплата перестали работать, откатите правку.

Повторное измерение

1. Зафиксируйте исходные значения и URL.
2. Внесите одно логически связанное изменение, например замените изображения одного шаблона.
3. Очистите кеш сборки и CDN, если они используются.
4. Проверьте страницу в обычном окне и в режиме "Disable cache".
5. Сделайте три запуска на Mobile и три на Desktop.
6. Сравните медианные результаты с исходными.
7. Проверьте реальную страницу с телефона через мобильную сеть.
8. После публикации следите за полевыми данными Core Web Vitals, поскольку они обновляются с задержкой.

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