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

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

Разберём, как ускорить загрузку сайта по шагам. Без общих фраз про «оптимизацию». Конкретные точки, где теряются секунды, и что с ними делать.

Сначала измерьте, потом чините

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

Ориентируйтесь на метрики Core Web Vitals. Это то, что реально видит пользователь и учитывает поиск:

• LCP (Largest Contentful Paint): за сколько отрисовывается главный видимый блок. Цель: до 2.5 секунды.
• INP (Interaction to Next Paint): насколько быстро сайт реагирует на клик или тап. Цель: до 200 мс.
• CLS (Cumulative Layout Shift): не прыгает ли вёрстка при загрузке. Цель: меньше 0.1.

Замеряйте на мобильном профиле и на медленном соединении. Именно там теряется большинство клиентов. Красивая цифра на десктопе с оптоволокном ничего не говорит о реальном трафике.

Изображения: главный пожиратель веса

В типичном проекте картинки занимают больше половины веса страницы. Здесь же лежит самый быстрый выигрыш.

Что делать по порядку:

• Переведите картинки в современные форматы WebP или AVIF. Вес падает в разы без потери качества.
• Отдавайте изображение под реальный размер контейнера. Не грузите фото 3000 пикселей в блок шириной 400.
• Включите ленивую загрузку (lazy loading) для всего, что ниже первого экрана. Атрибут loading=»lazy» закрывает большую часть задачи.
• Для картинки в первом экране, наоборот, поставьте приоритет и предзагрузку. Она формирует LCP, её нельзя откладывать.
• Задавайте ширину и высоту у тегов изображений. Это убирает скачки вёрстки и чинит CLS.

Один этот блок часто снимает от одной до трёх секунд загрузки на мобильном.

Шрифты, которые тормозят первый экран

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

Решения простые. Используйте font-display: swap, чтобы текст сразу показывался системным шрифтом и подменялся, когда подгрузится ваш. Подключайте шрифты локально, а не сторонним запросом на чужой домен: меньше соединений, меньше задержек. Грузите только те начертания, которые реально используете. Три веса вместо девяти уже заметно легче.

Скрипты и сторонние сервисы

JavaScript блокирует отрисовку сильнее всего. Каждый счётчик, чат, пиксель и виджет добавляет запросы и нагружает поток.

Наведите порядок:

• Отложите некритичные скрипты через defer или async. Аналитика и чаты не должны блокировать первый экран.
• Проведите аудит сторонних тегов. Часто половина пикселей стоит от старых кампаний и уже не нужна.
• Уберите неиспользуемый CSS и JS. Инструменты покрытия кода в браузере покажут, что грузится впустую.
• Минифицируйте и объединяйте файлы, где это уместно.

Отдельно про виджеты чатов и всплывающие сервисы: они удобны, но нередко тянут по несколько сотен килобайт. Взвесьте пользу против скорости.

Кэширование и доставка контента

Самый быстрый запрос: тот, которого не было. Кэш решает эту задачу.

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

Для сайтов на CMS добавьте серверный кэш страниц. Тогда сервер не собирает страницу заново под каждого гостя, а отдаёт готовую.

Сервер и ответ бэкенда

Если сервер думает над ответом секунду, никакая оптимизация фронтенда это не спасёт. Метрика здесь: время до первого байта (TTFB).

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

Скорость и SEO: почему это связано

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

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

С чего начать

Не пытайтесь сделать всё сразу. Порядок действий такой:

• Снимите метрики Core Web Vitals на мобильном. Зафиксируйте стартовые цифры.
• Оптимизируйте изображения. Это самый быстрый выигрыш по весу.
• Разберитесь со шрифтами и сторонними скриптами.
• Настройте кэш, сжатие и CDN.
• Проверьте ответ сервера, если TTFB высокий.

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

Если разбираться в этом самому некогда, а сайт теряет клиентов уже сейчас: напишите нам в Telegram-бот Neurounit. Проведём аудит скорости, найдём узкие места и составим план, что чинить в первую очередь. Быстрый сайт окупается ростом конверсии и позиций, а не только красивыми цифрами в отчёте.