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

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

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

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

• PageSpeed Insights — бесплатный сервис Google. Вставляете адрес страницы и получаете два отчёта: вверху — данные реальных посетителей, заходивших из Chrome за последние 28 дней (если посещаемость маленькая, этого блока не будет), ниже — лабораторный тест с конкретными советами. Начинайте с вкладки для мобильных.
• Lighthouse в Chrome — тот же лабораторный тест прямо в браузере: инструменты разработчика (F12, на Mac — Cmd + Option + I), вкладка Lighthouse. Им можно проверить и страницу, которая ещё не опубликована. Запускайте его в окне инкогнито, чтобы не мешали расширения.
• Яндекс Метрика — отчёт «Время загрузки страниц» в разделе «Мониторинг»: сколько ждали настоящие посетители и на каком этапе — ответ сервера, загрузка страницы, отрисовка.
• Яндекс Вебмастер — если из мобильного поиска на сайт приходит достаточно людей, в разделе «Качество сайта» появляется оценка скорости по данным Яндекс Браузера.

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

Core Web Vitals: какие цифры считать нормой

Google оценивает скорость и отзывчивость страниц по трём метрикам — Core Web Vitals. Их показывают PageSpeed Insights и отчёт «Основные интернет-показатели» в Google Search Console.

Метрика	Что показывает	Хорошо	Плохо
LCP	Когда появился самый крупный элемент первого экрана: фото, видео или блок текста	≤ 2,5 с	> 4 с
INP	Как быстро страница отзывается на нажатия и ввод	≤ 200 мс	> 500 мс
CLS	Насколько сдвигается вёрстка, пока страница догружается	≤ 0,1	> 0,25

Порог должен выполняться не в среднем, а как минимум для трёх четвертей визитов: если медленных посещений больше четверти, страница норму не проходит. В лабораторном тесте INP не измеряется — там никто ничего не нажимает, — поэтому отклик оценивают косвенно, по общему времени блокировки (TBT). А если в старой инструкции встречается метрика FID, это прежний показатель отклика: в 2024 году его заменил INP.

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

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

Тяжёлые картинки и видео

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

Что сделать:

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

Лишние скрипты и виджеты

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

Что сделать:

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

Анимация тоже расходует ресурсы: когда её много и сделана она тяжёлыми средствами, страница дёргается на недорогих телефонах. Как сделать движение лёгким, разбираем в статье об анимации на сайте.

Шрифты

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

Что сделать:

• оставить только начертания, которые действительно есть в дизайне;
• подключать шрифты в формате WOFF2 и только с нужными наборами символов — для русскоязычного сайта это кириллица и латиница;
• хранить файлы шрифтов на своём сервере, а не подтягивать с внешнего сервиса;
• показывать текст сразу системным шрифтом, пока грузится фирменный (font-display: swap), и подобрать запасной шрифт близким по ширине, чтобы строки не прыгали при подмене; основной шрифт первого экрана загружать заранее.

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

Пока сервер не ответил, браузеру нечего показывать. Это время видно в отчётах как «время до первого байта» (TTFB); Google советует укладываться в 0,8 секунды. Тормозить может перегруженный хостинг, сервер далеко от посетителей или система управления сайтом, которая собирает каждую страницу заново для каждого посетителя.

Что сделать:

• включить кеширование, чтобы готовые страницы отдавались без пересборки;
• включить сжатие (gzip или Brotli) и протокол HTTP/2;
• раздавать картинки, шрифты и скрипты через CDN — сеть серверов, которая отдаёт файлы с ближайшего к посетителю узла;
• обновить систему управления и убрать тяжёлые плагины, а если не помогает — переехать на хостинг с запасом ресурсов.

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

Код конструктора

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

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

С чего начать ускорение

1. Проверьте главную и две-три ключевые страницы в PageSpeed Insights на вкладке для мобильных и запишите LCP, INP и CLS.
2. Найдите в отчёте элемент LCP — чаще всего это картинка или видео первого экрана — и начните с него.
3. Сожмите изображения и отложите загрузку всего, что ниже первого экрана.
4. Отключите лишние скрипты и виджеты, наведите порядок в шрифтах.
5. Если время до первого байта больше 0,8 секунды, займитесь сервером.
6. Повторите замеры. Данные реальных посетителей обновятся не сразу: они собираются за 28 дней.

Частые ошибки

• Проверять скорость только на компьютере с быстрым интернетом.
• Гнаться за сотней баллов в PageSpeed Insights. Баллы — сводка лабораторного теста; важнее, укладываются ли в норму LCP, INP и CLS у реальных посетителей.
• Прятать медленную загрузку за заставкой-прелоадером: ждать приходится столько же, только с анимацией.
• Ускорить сайт один раз и забыть. Каждый новый баннер, виджет или фотография добавляет вес — повторяйте замеры после заметных правок.

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