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

Часть 2 из 6 · Серия «Скорость сайта без магии»

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

Теперь начинается вопрос, ради которого всё и затевалось:

Почему сайт медленно загружается именно у меня и с чего начинать?

Соблазнительный ответ — «слабый хостинг». Иногда он верный. Гораздо чаще медленно загружаются сайты, у которых сервер отвечает нормально, а время теряется дальше: в изображениях, стилях, шрифтах и чужих скриптах.

Эта статья — диагностическая карта. Мы не будем подряд перечислять все советы о том, как ускорить сайт. Вместо этого пройдём путь: заметный симптом → группа вероятных причин → чем проверить гипотезу → какое исправление брать первым.

Загрузка страницы — это цепочка, а не одно событие

Пока посетитель ждёт, браузер успевает сделать много последовательных шагов:

1. найти сервер по домену
2. установить соединение
3. дождаться ответа сервера с HTML
4. прочитать HTML и запросить стили, шрифты, скрипты, изображения
5. дождаться того, что блокирует отрисовку
6. нарисовать первый экран
7. выполнить JavaScript и «оживить» интерфейс

Каждый шаг зависит от предыдущего. Поэтому две страницы с одинаковой оценкой PageSpeed могут тормозить совершенно по-разному: у одной время уходит на шаг 3, у другой — на шаги 4–5.

Отсюда главное правило ускорения загрузки сайта:

Сначала выясните, на каком участке теряется время. Только потом выбирайте инструмент.

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

Симптом → где искать причину

Начните не с отчёта, а с наблюдения. Откройте страницу на телефоне в мобильной сети и посмотрите, что именно происходит.

Эта таблица — не диагноз, а сужение области поиска. Дальше каждую гипотезу нужно подтвердить замером, иначе вы будете чинить то, что и так работает.

Причина 1. Сервер долго отвечает

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

Так выглядит задержка до первого байта. Браузер не может начать работу, пока не получит HTML, — он просто ждёт.

Что стоит проверить:

• сколько времени занимает ответ сервера в отчёте о скорости;
• воспроизводится ли задержка на разных страницах или только на одной;
• есть ли лишние редиректы перед нужным адресом;
• не упирается ли тариф в ограничения по процессору и памяти;
• не ходит ли страница за данными во внешний сервис при каждом открытии.

Частые виновники — тяжёлые запросы к базе, отсутствие кэширования, «холодный» запуск приложения на каждый визит и синхронные обращения к чужим API. Если сайт делит сервер с соседями, влияет и общая нагрузка тарифа: подробно это разобрано в статье «Сайт тормозит на хостинге: виноват тариф, код, база или внешний сервис», а серверная сторона вопроса — в материалах о тюнинге nginx и PHP-FPM и о кэшировании.

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

Времени ответа сервера, кэшированию, редиректам и сжатию посвящена шестая, заключительная часть серии — там мы разберём этот участок отдельно и подробно.

Причина 2. Изображения весят слишком много

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

Что стоит проверить:

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

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

Файл:      3800 × 2500, 1,8 МБ
Показан:   600 × 395
Итог:      скачано в разы больше, чем нужно

Первое исправление: привести к разумному размеру и весу одно изображение — главное на первом экране. Не всю галерею, не весь каталог. Одно. Затем повторный замер.

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

Причина 3. Стили и шрифты блокируют отрисовку

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

Так работает блокирующая отрисовку загрузка. Браузер получил HTML, но не рисует страницу, пока не разберётся со стилями, а иногда ждёт ещё и шрифт.

Что стоит проверить:

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

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

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

Критические стили, шрифты и сторонние скрипты подробно разбираются в пятой части.

Причина 4. JavaScript мешает пользоваться страницей

Симптом: страница выглядит загруженной, но меню не открывается, кнопка не нажимается, форма не реагирует. Человек нажимает ещё раз, потом ещё — и уходит.

Это работа процессора. Скрипты нужно скачать, разобрать и выполнить, и всё это время браузер занят.

Что стоит проверить:

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

Чужие скрипты — отдельная история. Виджет чата, пиксель рекламной сети и система аналитики ставятся в один клик, живут годами и продолжают выполняться даже тогда, когда сервис уже не используется.

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

Причина 5. Страница прыгает во время загрузки

Симптом: содержимое сдвигается, пока страница догружается. Читатель промахивается мимо ссылки, а на карточке товара — мимо кнопки покупки.

Формально это не «медленно». Но ощущается именно так: сайтом нельзя пользоваться, пока он не успокоится.

Что стоит проверить:

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

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

Метрике сдвигов и двум её соседям посвящена третья часть серии.

Порядок, в котором стоит исправлять

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

Разумный порядок:

1. ответ сервера
2. то, что блокирует появление первого экрана
3. главное изображение первого экрана
4. тяжёлый и ненужный JavaScript
5. сдвиги вёрстки
6. всё остальное

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

Коротко о платформах

Причины у всех сайтов одни и те же, а вот рычаги отличаются.

• WordPress. Чаще всего время съедают тема с конструктором страниц и набор плагинов, каждый из которых подключает свои стили и скрипты на всех страницах подряд. Начинать стоит с инвентаризации: что реально используется.
• Bitrix. Обычно вопрос упирается в кэширование и в тяжёлые запросы к базе на страницах каталога. Отрисовка при этом может быть в порядке.
• Tilda и другие конструкторы. Возможностей вмешаться меньше: код страницы вы не контролируете. Зато полностью контролируете, какие изображения загружены и какие внешние виджеты подключены, — а это как раз основные источники веса.

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

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

Наблюдение сужает круг, а подтверждает его замер. Turbo делает мобильную проверку по методике Google PageSpeed и превращает её в короткий список причин: сначала общий вердикт, затем найденные проблемы по влиянию, у каждой — понятное объяснение и технические подробности по клику. Сервис пытается определить платформу сайта и отмечает, что можно поправить в админке, а где потребуется специалист.

Для диагностики удобно так:

1. проверьте страницу и сохраните ссылку на отчёт;
2. найдите в отчёте ту группу причин, которую вы заподозрили по симптому;
3. сделайте одно исправление;
4. проверьте страницу ещё раз и сравните с сохранённым отчётом.

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

Чего делать не стоит

Менять хостинг, не посмотрев на цепочку

Переезд помогает, когда время действительно теряется на ответе сервера. Если страница тянет восемь мегабайт изображений, на новом тарифе она будет тянуть ровно столько же.

Проверьте характеристики текущего тарифа — процессор, память и лимиты описаны в статье «Гигабайты ничего не решают». Возможно, вы упираетесь совсем не в них.

Ставить несколько плагинов оптимизации сразу

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

Гнаться за зелёной зоной вместо ощущения скорости

Балл — это следствие. Если после исправлений оценка выросла на десять пунктов, а главная фотография товара всё так же появляется последней, работа сделана не там.

Чек-лист диагностики

[ ] симптом описан словами, а не баллом
[ ] выбрана одна страница и один сценарий
[ ] гипотеза подтверждена замером
[ ] сделано одно изменение
[ ] замер повторён в тех же условиях
[ ] проверено ключевое действие пользователя
[ ] сохранены ссылки на отчёты «до» и «после»

Короткие ответы на частые вопросы

Почему сайт медленно загружается?

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

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

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

Как ускорить загрузку сайта без переезда на другой хостинг?

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

С чего начать оптимизацию скорости загрузки сайта?

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

Почему сайты медленно загружаются только на телефоне?

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

Что дальше

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

В третьей части разберём метрики, которыми этот опыт измеряют: что на самом деле означают LCP, CLS и INP, какой симптом стоит за каждой из них и как проверить их на своём сайте.

Проверить страницу и увидеть, какая группа причин у вашего сайта на первом месте, можно бесплатно на turbo.siteko.net.