Скорость загрузки сайта: как ускорить за 1-2 дня и не сломать

Почему скорость критична

SEO: Google использует Core Web Vitals в ранжировании. Подробный гайд: Core Web Vitals 2026.
Конверсия: каждая секунда задержки = 7-15% потерянных конверсий. Amazon в исследовании показал: +100 мс = -1% выручки.
UX: 40% пользователей закрывают сайт, если он грузится дольше 3 секунд.

То есть быстрый сайт зарабатывает больше денег при том же трафике. Это прямой ROI.

Замер: где мы сейчас

Перед оптимизацией — базовый замер, чтобы было с чем сравнивать.

Тест скорости — за минуту даёт:

LCP, CLS, INP (Core Web Vitals).
Время до первого байта (TTFB).
Размер страницы и количество запросов.
Топ-10 самых тяжёлых ресурсов.
Конкретные рекомендации.

Запомните или сохраните результат — будете сверяться после каждой оптимизации.

Методы ускорения по приоритету

Уровень 1: «низковисящие фрукты» (1-3 часа работы)

1. Сжать изображения

Самая частая причина медленных сайтов — тяжёлые картинки. 5-15 МБ ничего не подозревающего PNG на главной — норма для сайтов, которые «никогда не оптимизировали».

План:

Конвертируйте все JPG/PNG в WebP (на 25-50% легче) или AVIF (на 50-70%).
Уменьшите до реальных размеров отображения. Картинка показывается 400×300 px — её и грузите, а не 4000×3000 px.
Включите loading="lazy" на всех картинках, кроме hero (главная картинка вверху страницы — eager).
Для retina-дисплеев используйте <picture> с srcset.

Эффект: обычно -50% от размера страницы. LCP падает на 1-3 секунды. Заметнее всего из всех оптимизаций.

2. Включить gzip / brotli

Сервер должен сжимать HTML / CSS / JS перед отправкой:

Nginx:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 256;

# brotli (если модуль установлен)
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Эффект: HTML/CSS/JS на 60-80% легче. Грубо — экономия 200-500 КБ на типичной странице.

Проверка: в HTTP-проверке увидите заголовок Content-Encoding: gzip или br.

3. Включить кеш в браузере

Заголовки Cache-Control для статики:

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|svg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Эффект: второй и последующий заходы на сайт грузятся в разы быстрее. Особенно важно для SPA и магазинов с многошаговым checkout.

4. Defer для JavaScript

Все <script>, кроме критических, — с атрибутом defer:

<script src="/main.js" defer></script>

defer означает: «скачай в фоне, выполни после парсинга HTML». Главный контент рендерится быстрее.

async — то же, но порядок выполнения непредсказуемый. Используйте только для независимых скриптов (аналитики).

5. font-display: swap

В @font-face:

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope.woff2') format('woff2');
  font-display: swap;
}

Без swap текст невидимый до загрузки шрифта (FOIT — Flash of Invisible Text). С swap показывается резервный шрифт, потом заменяется. Пользователь не ждёт.

Уровень 2: средний (1-2 дня)

6. Минификация и бандлинг

CSS и JS — минифицировать (удалить пробелы, переименовать переменные). Современные сборщики (Webpack, Vite, esbuild) делают это автоматически. Если у вас отдельные .css / .js файлы — пропустите их через любой минификатор.

7. Удалить неиспользуемый код

Часто на сайте подключён огромный jQuery ради 3 функций. Или вся библиотека lodash, когда нужно lodash/debounce. Проверьте bundle:

webpack-bundle-analyzer для Webpack.
vite-bundle-visualizer для Vite.
DevTools → Coverage tab — показывает сколько % CSS/JS реально используется.

8. Lazy-load всё некритичное

Картинки ниже первого экрана — loading="lazy".
Iframe (YouTube, карты) — loading="lazy".
Тяжёлые JS-модули (комментарии, чат, виджеты) — динамический import() при скролле.

9. Preload критических ресурсов

В <head>:

<link rel="preload" href="/fonts/manrope.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

Браузер начинает загружать раньше, чем находит ссылки в HTML.

10. HTTP/2 или HTTP/3

Старый HTTP/1.1 ограничивает 6 параллельных запросов на домен. HTTP/2 — multiplexing, десятки параллельно. HTTP/3 — на UDP, ещё быстрее.

В nginx: listen 443 ssl http2; — одна строка, эффект ощутимый.

Проверить версию: в DevTools → Network → колонка «Protocol» (включается через правый клик на заголовке).

Уровень 3: серьёзный (3-7 дней)

11. CDN

Cloudflare, Selectel, BunnyCDN. Статику (картинки, CSS, JS) и иногда весь HTML отдают с edge-серверов ближе к пользователю.

Cloudflare бесплатный — настройка занимает 30 минут. TTFB падает с 200-500 мс до 30-80 мс.

12. Кеш страниц на сервере

Для CMS (WordPress, Bitrix) включить полное кеширование страниц:

WordPress: WP Rocket, W3 Total Cache, LiteSpeed Cache.
Bitrix: HTML-кеширование, кеш компонентов.
Кастомный — varnish, nginx FastCGI cache.

Готовая HTML-страница отдаётся за 5-50 мс вместо 500-2000 мс генерации PHP.

13. Database tuning

Медленный сайт часто = медленные запросы в БД.

Проиндексируйте часто используемые поля.
Включите query cache.
Перейдите с MySQL на MariaDB (часто быстрее).
Slow query log → оптимизировать самые медленные запросы.

14. SSR / Static generation

Для React/Vue/Next/Nuxt — server-side rendering или static generation обязательны. Без них CSR-сайт грузится медленно и плохо ранжируется.

15. Critical CSS inline

Извлеките CSS для первого экрана в <style> прямо в HTML. Остальной CSS — асинхронно после загрузки. LCP резко падает (на 0.5-1 сек).

Инструменты: critical npm-пакет, criticalcss.com.

Чек-лист после оптимизации

Перезамер скорости — сравните с базовым.
PageSpeed Insights — Mobile и Desktop должны быть в зелёной зоне (90+).
Search Console → Core Web Vitals — через 28 дней увидите изменение в реальных пользовательских данных.
Поведенческие в Метрике/GA — отказы должны упасть, время на сайте подрасти.

Что НЕ делать

1. Минимизировать ради минификации

Например, отключать аналитику ради экономии 50 КБ — теряете данные для оптимизации.

2. Ломать UX ради скорости

Убрали все картинки → страница грузится быстро → пользователи не покупают, потому что не видят товар. Баланс важнее «100% PageSpeed Score».

3. Слепо доверять PageSpeed Score

Score 70 при LCP 1.8 сек лучше, чем Score 95 при LCP 3.0 сек. Метрики важнее «оценки».

4. Прятать тяжёлые ресурсы вместо удаления

Lazy-load 5 МБ картинки — не решение. Сначала сожмите до 200 КБ, потом lazy-load.

Что делать дальше

Замерьте текущую скорость — запомните цифры.
Сделайте Уровень 1 за один день — сжатие картинок, gzip, кеш, defer JS, font-display.
Перезамер — обычно LCP падает на 1-3 секунды, PageSpeed Score растёт на 20-40 пунктов.
Через неделю — Уровень 2 если ещё нужны улучшения.
Уровень 3 — только если сайт коммерческий и нужны последние секунды (e-commerce, лидогенерация).

Скорость — это бесконечное поле для улучшения. Но 80% эффекта даёт первый уровень (1-3 часа работы). С него и начинайте.

🚀

Попробовать SEOAdmin бесплатно

30 SEO-инструментов в одном кабинете. 100 поинтов бесплатно при регистрации, без карты.

Зарегистрироваться Быстрая проверка →