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

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

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

Что измерять: одной цифры «скорость сайта» не существует

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

Показатель	Что описывает	Ориентир	Куда копать при превышении
Время до первого байта	Сколько сервер думал, прежде чем начать отвечать	до 0,5 с, хорошо — до 0,2 с	Хостинг, версия PHP, кэш, база данных
Отрисовка основного содержимого	Когда человек увидел главный блок экрана	до 2,5 с на мобильном	Вес картинок, блокирующие стили и шрифты
Отклик на действие	Задержка между нажатием и реакцией	до 200 мс	Тяжёлые скрипты, чужие виджеты
Сдвиг вёрстки при загрузке	Прыгает ли содержимое, пока страница грузится	не более 0,1	Не заданы размеры картинок, поздние шрифты, баннеры
Полный вес страницы	Сколько мегабайт качает браузер	до 1,5 МБ на мобильном	Изображения, видео, наборы шрифтов
Число запросов	Сколько отдельных файлов запрашивается	до 50–60	Несобранные скрипты и стили, сторонние сервисы

Первый показатель — разделительная линия. Если сервер отвечает за 1,5 секунды, а вы сжали картинки и выиграли 300 миллисекунд на отрисовке, посетитель всё равно смотрит на белый экран полторы секунды до начала загрузки. Сначала сервер, потом страница — порядок не обсуждается.

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

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

Время ответа сервера: из чего оно складывается

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

• Тариф хостинга. На виртуальном хостинге сотни сайтов делят одни процессоры и диски. Признак упора в лимиты — плавающее время ответа: утром 300 миллисекунд, вечером две секунды при той же посещаемости. Средняя цифра при этом выглядит приемлемо, поэтому смотреть надо разброс, а не среднее.
• Версия языка. Разница между устаревшей и актуальной версией PHP на типовом сайте даёт 20–30 процентов скорости без единой правки кода. Переключается в панели хостинга, но требует проверки: старые плагины на новой версии иногда падают.
• Отсутствие кэша. Без него страница собирается заново на каждый заход: запросы к базе, обработка шаблона, работа плагинов. С кэшем сервер отдаёт готовый файл.
• Запросы к базе. Обычно следствие избытка расширений и тяжёлой темы. Диагностируется профилировщиком: он показывает, сколько запросов выполняется на странице и какие из них самые долгие. Сто с лишним запросов на одну страницу — верный признак, что тема или набор плагинов работают неэффективно.
• Удалённость сервера. Физическое расстояние добавляет десятки миллисекунд на каждый запрос. Для сайта с российской аудиторией сервер в России или ближайшем регионе — разумный выбор по умолчанию.
• Лишние редиректы. Каждый шаг цепочки — отдельный запрос к серверу. Цепочка из трёх редиректов на мобильном канале легко съедает полсекунды до того, как началась загрузка полезного содержимого.

Практический способ понять, в хостинге ли дело: замерить время ответа в разное время суток несколько дней подряд и посмотреть на разброс. Стабильные 400 миллисекунд — вопрос к сайту. Скачки от 200 миллисекунд до трёх секунд — вопрос к тарифу или соседям по машине.

Кэширование: три уровня и что даёт каждый

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

Уровень	Как работает	Что даёт	Чем опасен
Кэш страниц	Готовый HTML сохраняется файлом и отдаётся без обработки	Сокращает время ответа в разы	Ломает динамические блоки: корзину, формы с токеном, личный кабинет
Кэш кода	Скомпилированный код держится в памяти сервера	Заметный выигрыш без риска для содержимого	Требует доступа к настройкам сервера
Кэш браузера	Статика хранится у посетителя и не качается повторно	Ускоряет второй и последующие заходы	При обновлении файлов нужен новый адрес или версия в имени
Кэш базы данных	Результаты частых запросов держатся в памяти	Помогает каталогам и сайтам с фильтрами	Настраивается на стороне сервера, не в панели
Сеть доставки содержимого	Статика раздаётся с ближайшего к посетителю узла	Помогает при географически широкой аудитории	Лишнее звено, которое само может стать точкой отказа

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

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

Картинки: самый тяжёлый груз обычной страницы

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

Что делаем	Механика	Типичный выигрыш
Приводим к реальному размеру	Не грузить фото шириной 4000 пикселей в блок шириной 800	Кратное уменьшение веса файла
Меняем формат	WebP вместо JPEG и PNG при том же визуальном качестве	25–50% веса
Включаем отложенную загрузку	Всё, что ниже первого экрана, грузится при прокрутке	Ускоряет первую отрисовку, а не общий вес
Задаём размеры в разметке	Браузер заранее резервирует место под картинку	Убирает прыжки вёрстки при загрузке
Отдаём разные размеры под устройства	Телефон получает узкую версию, десктоп — широкую	Основной выигрыш именно на мобильных

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

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

Скрипты, стили и шрифты: очередь на отрисовку

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

• Некритичные скрипты откладываются. Атрибуты defer и async убирают скрипт из очереди, блокирующей отрисовку. Для аналитики, чатов и слайдеров это безопасно.
• Стили первого экрана встраиваются в страницу, остальное грузится следом. Приём даёт самый заметный выигрыш по времени до появления содержимого.
• Лишние файлы удаляются. Типовой сайт тянет тридцать-сорок файлов, половина которых нужна на одной странице из десяти. Слайдер и его стили не нужны на странице контактов, скрипт корзины — в блоге.
• Шрифты сокращаются до нужных начертаний. Четыре толщины одного шрифта в двух форматах — это восемь файлов; обычно хватает двух начертаний. Полезно ещё указать браузеру показывать текст системным шрифтом, пока грузится основной, иначе первые секунды страница стоит без текста.
• Иконочные шрифты заменяются на SVG. Целый шрифтовой файл ради пяти иконок — распространённая и легко устраняемая трата.

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

Сторонние сервисы: чужой сервер тормозит вашу страницу

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

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

Что с этим делают:

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

Почему на мобильных всё хуже и что с этим делать

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

Практические выводы отличаются от десктопных:

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

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

Порядок работы и до каких значений доводить

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

Шаг	Что делаем	Ожидаемый эффект
1	Замер исходного состояния и резервная копия	Точка отсчёта и возможность отката
2	Замер времени ответа сервера в разное время суток	Разделение проблем сервера и страницы
3	Версия PHP, кэш кода, кэш страниц	Самый крупный выигрыш при наименьших усилиях
4	Проверка форм и динамических блоков после кэша	Гарантия, что заявки доходят
5	Размеры и формат изображений, отложенная загрузка	Основное снижение веса страницы
6	Скрипты и стили: удаление лишнего, откладывание	Ускорение первой отрисовки, особенно на мобильных
7	Ревизия сторонних сервисов	Снятие зависимости от чужих серверов
8	Повторный замер и проверка всех типов страниц	Подтверждение результата и поиск регрессий

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

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

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

Влияет ли скорость на позиции напрямую?
Через доступность и поведение. Медленная страница теряет часть посетителей до загрузки, и это видно в поведенческих данных; медленный сервер замедляет обход сайта роботом. Прямого коэффициента «минус секунда — плюс пять позиций» не существует, но при прочих равных медленный сайт проигрывает.

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

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

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

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

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

Как понять, на каком хостинге сайт и не в нём ли причина медленной работы:

1:30

Коротко

• Повышать скорость загрузки сайта начинают с замера ответа сервера: он отделяет проблемы хостинга от проблем страницы, и лечатся они по-разному.
• Самый крупный выигрыш при наименьших усилиях дают актуальная версия PHP, кэш кода и кэш страниц.
• После включения кэша обязательно отправьте заявку своими руками: полностраничный кэш регулярно ломает формы, и ускорение оборачивается потерей обращений.
• Картинки приводят к реальному размеру, переводят в WebP, задают им размеры в разметке и грузят отложенно — кроме изображения первого экрана.
• На мобильных главный резерв не в весе картинок, а в объёме исполняемого кода: откладывать и удалять скрипты выгоднее, чем дожимать фотографии.
• Скорость — порог, а не соревнование: ответ сервера до полусекунды и содержимое на телефоне за две с половиной секунды, дальше отдача выше от работы над содержанием.

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