Как ускорить загрузку сайта — 10 рабочих способов
Скорость загрузки сайта — это прямые деньги. Исследования Google показывают: задержка в 1 секунду снижает конверсию на 7%, а задержка в 3 секунды увеличивает процент отказов на 32%. С 2021 года Core Web Vitals — часть алгоритма ранжирования Google, а в 2026 они обязательны для попадания в топ-10 по коммерческим запросам. Вот подробное руководство по ускорению сайта — 10 способов с кодом, примерами и реальным кейсом.
Что такое Core Web Vitals
Google выделяет три метрики, критически важные для пользовательского опыта:
LCP (Largest Contentful Paint) — время загрузки самого большого элемента на странице (обычно изображение или заголовок). Норма: менее 2.5 секунд.
INP (Interaction to Next Paint) — задержка между взаимодействием пользователя (клик, тап) и откликом браузера. Заменил FID в 2024. Норма: менее 200 мс.
CLS (Cumulative Layout Shift) — сколько «прыгает» контент при загрузке. Норма: менее 0.1.
Эти метрики измеряет PageSpeed Insights, Lighthouse и Search Console. Если хотя бы одна в красной зоне — сайт не попадёт в топ по конкурентным запросам.
1. Сжимайте изображения — даёт +15-25 баллов
Изображения составляют 60-70% веса страницы. Типичная фотография с камеры телефона — 3-5 МБ. Для сайта это смертельно.
Форматы нового поколения:
WebP — сжимает на 25-35% по сравнению с JPEG. Поддерживается всеми браузерами. Команда для конвертации:
cwebp -q 80 input.jpg -o output.webp
AVIF — сжимает ещё на 50% по сравнению с WebP. Поддерживается Chrome, Firefox, Safari (с 2023). Для совместимости используйте picture:
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Описание" loading="lazy"> </picture>
Responsive images (srcset). Зачем грузить десктопную картинку на телефоне:
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px"
alt="Фото">
Lazy loading. Изображения ниже экрана загружайте только когда пользователь доскроллит: <img loading="lazy">. Для критических — уберите атрибут.
Предзагрузка критических изображений:
<link rel="preload" as="image" href="hero.webp">
2. Включите кэширование — подробно
Кэширование позволяет браузеру не скачивать одни и те же файлы при каждом визите. Правильная настройка даёт +10-15 баллов.
Cache-Control для разных типов файлов (Nginx):
# Статические файлы с версией в имени
location ~* \.(css|js)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Изображения и шрифты
location ~* \.(jpg|jpeg|png|gif|webp|avif|svg|ico|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# HTML — не кэшировать
location / {
add_header Cache-Control "no-cache, must-revalidate";
}
# ETag и Last-Modified — включаются по умолчанию в Nginx
Service Worker (PWA кэш):
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll(['/', '/style.css', '/script.js', '/fonts/roboto.woff2']);
})
);
});
3. Подключите CDN
CDN размещает копии ваших файлов на серверах по всему миру. Пользователь из Владивостока получает контент с сервера в Токио, а не из Москвы.
Cloudflare (бесплатно). Меняете NS-записи на Cloudflare, включаете прокси (оранжевая тучка). Cloudflare автоматически сжимает изображения (Polish), минимизирует JS/CSS (Auto Minify) и включает HTTP/3.
QUIC.cloud. Бесплатный CDN с HTTP/3 и QUIC. Даёт +5-10 баллов.
После подключения проверьте заголовки ответа: cf-cache-status: HIT означает кэш Cloudflare.
4. Минификация и сборка: Webpack, Vite, esbuild
Минификация удаляет пробелы, комментарии, переименовывает переменные. Разница между сырым и минифицированным CSS — 30-50% объёма.
Vite — современный сборщик, рекомендованный для новых проектов. В 10 раз быстрее Webpack за счёт esbuild:
npm create vite@latest my-project -- --template vanilla cd my-project && npm install && npm run build
Vite автоматически минифицирует, добавляет хеши (style.a1b2c3.css) — решает проблему кэширования при обновлении.
esbuild — самый быстрый сборщик. Можно запускать отдельно:
npx esbuild app.js --bundle --minify --outfile=dist/app.js
5. Отложите загрузку скриптов — не блокируйте рендеринг
Скрипты по умолчанию блокируют парсинг HTML. Браузер останавливается, загружает и выполняет скрипт, и только потом продолжает.
defer — загружается параллельно, выполняется после загрузки документа. Для скриптов, нужных для работы страницы.
async — загружается параллельно, выполняется сразу после загрузки. Для независимых скриптов (счётчики, реклама).
<!-- Плохо: блокирует рендеринг --> <script src="script.js"></script> <!-- Хорошо: загружается параллельно --> <script src="script.js" defer></script> <!-- Для независимых скриптов --> <script src="analytics.js" async></script>
6. Критический CSS — первый экран мгновенно
Стили для первого экрана (above the fold) встраивают прямо в HTML, а основной CSS подгружают асинхронно:
<style>
/* Критический CSS */
header { ... }
.hero { ... }
@font-face { ... }
</style>
<!-- Основной CSS асинхронно -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
Инструменты: Critical (npm-пакет), Penthouse, criticalcss.com.
7. Оптимизация шрифтов: woff2, font-display, подвыборка
Шрифты — частая причина CLS (текст перерисовывается после загрузки шрифта).
WOFF2. Конвертируйте шрифты в woff2 — он сжимает на 30-50% лучше woff. Используйте transfonter.org или npx glyphhanger --woff2 *.ttf.
font-display: swap. Текст отображается системным шрифтом, пока загружается кастомный. Предотвращает невидимый текст (FOIT).
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-Regular.woff2') format('woff2');
font-display: swap;
font-weight: 400;
}
Подвыборка (subsetting). Если сайт на русском, не загружайте греческие символы. Оставьте кириллицу + базовую латиницу. Инструмент: glyphhanger.
8. HTTP/2 и HTTP/3: разница
HTTP/2 — мультиплексирование: несколько запросов в одном TCP-соединении. Включается через HTTPS. В Nginx:
listen 443 ssl http2; listen [::]:443 ssl http2;
HTTP/3 — поверх QUIC (UDP). Быстрая установка (0-RTT), лучше на плохих каналах. Включается в Cloudflare (по умолчанию) или в Nginx (сборка с quic). HTTP/2 даёт +10-20%, HTTP/3 — ещё +10-15% на мобильных.
9. Оптимизация базы данных (для CMS)
Для WordPress, Joomla, 1С-Битрикс база данных — частое узкое место. Симптомы: страница 3-5 секунд, хотя статика быстрая.
Кэширование запросов. WordPress: WP Rocket, W3 Total Cache. Серверный кэш: Redis, Memcached.
Оптимизация таблиц. Регулярно выполняйте OPTIMIZE TABLE и ANALYZE TABLE в MySQL.
Индексы. Проверьте, что поля в WHERE и JOIN проиндексированы. В WordPress таблица wp_postmeta часто тормозит без индексов.
Object Cache. Кэшируйте сложные запросы в Redis. WordPress: плагин Redis Object Cache.
10. Инструменты диагностики
PageSpeed Insights (pagespeed.web.dev) — официальный инструмент Google. Даёт оценку 0-100 и рекомендации.
Lighthouse — встроен в Chrome DevTools (вкладка Audits). Проверяет SEO, accessibility, best practices.
GTmetrix — показывает waterfall загрузки: какой файл сколько грузится, что блокирует рендеринг.
WebPageTest (webpagetest.org) — самый подробный. Выберите сервер (Москва, Лондон), тип соединения (3G, 4G). Показывает видео загрузки.
Реальный кейс: 45 → 92 балла
Интернет-магазин на WordPress. Страница грузилась 8 секунд, PageSpeed — 45 баллов. Что сделали:
1. Изображения (+35 баллов). Конвертировали 1200 фото в WebP — размер уменьшился с 45 МБ до 12 МБ. Добавили lazyload.
2. Кэширование (+15 баллов). Настроили Cache-Control, Cloudflare, WP Rocket.
3. Шрифты (+10 баллов). Google Fonts грузились 1.2 с. Скачали, конвертировали в woff2, загрузили локально — шрифт стал весить 40 КБ вместо 180 КБ.
4. Критический CSS (+10 баллов). 150 строк CSS для первого экрана встроили в head.
5. Отключили лишние плагины (+7 баллов). Было 23 плагина, оставили 9.
Итог: время загрузки с 8 секунд до 1.8 секунд. PageSpeed — 92 балла. Конверсия выросла на 23%, отказы снизились на 15%.
Скорость — это системная работа. Начните с замеров (PageSpeed Insights), найдите самые жирные проблемы и исправляйте по одной. Каждый пункт даёт от +5 до +20 баллов. Делайте их все — сайт будет летать.