Скорость сайта: что замедляет загрузку и как это исправить

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

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

Что такое скорость сайта?

Путь от запроса до действия

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

Браузер не просто отображает полученный HTML. Он читает структуру документа, загружает CSS для построения интерфейса, выполняет JavaScript, применяет шрифты и размещает медиа в макете. После этого страница становится видимой. Доступной для действий — когда код не мешает нажимать кнопки, открывать меню или отправлять форму.

Поэтому слово «медленно» без уточнения мало что значит. Оно может указывать на задержку до первого ответа сервера. Может означать, что HTML уже пришёл, но браузер ждёт стили. Иногда видимое содержимое есть, но взаимодействие задерживается из-за скриптов. Бывает, что проблема возникает только на определённом шаблоне, где страница подтягивает дополнительные данные или интеграции.

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

Ошибки в работе с медиа, которые задерживают видимое содержимое

Адаптивные изображения и шрифты

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

Для изображений нужны адаптивные варианты. srcset даёт браузеру выбор между подготовленными файлами, а sizes объясняет, сколько места изображение займёт в макете. Атрибуты width и height резервируют место до загрузки картинки. Без них страница может смещаться, когда появится медиа.

123456789<img
  src="/media/product-default.jpg"
  srcset="/media/product-small.jpg small, /media/product-large.jpg large"
  sizes="(max-width: mobile) full-width, content-width"
  width="media-width"
  height="media-height"
  loading="eager"
  alt="Товар на светлом фоне"
>

loading="lazy" уместен для медиа ниже видимой части страницы. На изображении первого экрана он даёт обратный эффект: браузер откладывает ресурс, который должен показать сразу.

Видео не должно загружать тяжёлый файл без действия пользователя. Для превью нужен poster, а запуск — после нажатия. Встроенные ролики стоит рассматривать как сторонний код, а не как декоративный блок.

Со шрифтами тот же принцип. Оставляйте только нужные гарнитуры и начертания. Добавьте font-display: swap, чтобы текст не ждал загрузки файла шрифта перед отображением. Это убирает одну из причин пустого или нестабильного первого экрана.

CSS и JavaScript, блокирующие рендеринг

Код для первого экрана

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

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

Для JavaScript, который не должен останавливать разбор HTML, используют defer. Такой скрипт загружается параллельно, а выполняется после того, как браузер прочитает документ. Для модулей, не нужных при первом отображении, применяют code splitting: код загружается, когда человек открывает маршрут или взаимодействует с компонентом.

Порядок проверки простой:

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

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

Когда проблема на сервере, в кеше или в доставке контента

Ответ сервера и кеш

Фронтенд не всегда виноват в медленной загрузке. Если браузер долго ждёт первый байт ответа, проверяйте путь запроса до сервера: конкретный маршрут, запросы к базе данных, внешние API и серверный рендеринг. Пока HTML не поступил, браузеру нечего стилизовать или показывать.

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

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

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

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

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

Внешний код в браузере

Сторонний скрипт может задерживать загрузку страницы, даже если его элемент не виден на первом экране. Чат, карта, пиксель, аналитика, обратный звонок, встроенное видео или A/B-инструмент загружают ресурсы и выполняют код в браузере. Они конкурируют с кодом страницы за сеть и главный поток.

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

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

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

Распространённая ошибка — добавить сервис через менеджер тегов и считать, что он не влияет на загрузку. Менеджер тегов меняет способ подключения. Код всё равно загружается, выполняется и может задерживать взаимодействие.

Когда скорость сайта становится частью SEO-работы

Проблема, общая для шаблонов

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

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

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

Что ускорять в первую очередь: порядок без хаотичных правок

По одному изменению за раз

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

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

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

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

Выводы

Ищите источник задержки

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

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

Сравнение

Симптомы и зоны проблем

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

Ответы о загрузке сайта