Производительность

Оптимизация скорости загрузки сайта: полное руководство

Опубликовано: 11.03.2026 · 6 мин чтения · 16 просмотров

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

Core Web Vitals: ключевые метрики производительности

В 2021 году Google ввёл набор метрик Core Web Vitals как официальный фактор ранжирования. Эти метрики отражают реальный пользовательский опыт и измеряются в полевых условиях.

LCP — Largest Contentful Paint

LCP измеряет время отрисовки самого крупного видимого элемента на странице. Это может быть изображение-баннер, видео или крупный блок текста. Целевое значение — менее 2,5 секунд.

Основные причины плохого LCP:

Медленный серверный ответ (высокий TTFB)
Блокирующие рендеринг ресурсы — CSS и JavaScript в <head>
Неоптимизированные изображения большого размера
Клиентский рендеринг без серверной предварительной отрисовки
Медленная загрузка шрифтов, блокирующих отображение текста

FID и INP — отзывчивость интерфейса

FID (First Input Delay) измерял задержку первого взаимодействия пользователя. С марта 2024 года его заменила метрика INP (Interaction to Next Paint), которая оценивает отзывчивость на протяжении всей сессии. Целевое значение INP — менее 200 миллисекунд.

Для улучшения INP необходимо:

Разбивать длительные задачи JavaScript на более мелкие (менее 50 мс каждая)
Использовать requestIdleCallback и requestAnimationFrame
Минимизировать работу в основном потоке
Применять отложенную загрузку и code splitting

CLS — Cumulative Layout Shift

CLS оценивает визуальную стабильность страницы. Сдвиги макета раздражают пользователей — они случайно нажимают не на те элементы, теряют место при чтении. Целевое значение — менее 0,1.

Как предотвратить сдвиги макета:

Всегда указывайте атрибуты width и height для изображений и видео
Резервируйте место под рекламные блоки и динамический контент
Избегайте вставки контента выше видимой области после загрузки
Используйте font-display: swap или font-display: optional

TTFB — Time to First Byte

TTFB измеряет время от отправки запроса до получения первого байта ответа от сервера. Это базовая метрика, влияющая на все остальные показатели. Рекомендуемое значение — менее 800 мс, а в идеале — менее 200 мс.

Факторы, влияющие на TTFB:

Фактор	Влияние	Решение
Расстояние до сервера	Высокая задержка для удалённых пользователей	CDN, edge-серверы
Серверная обработка	Медленные запросы к БД, тяжёлые вычисления	Кеширование, оптимизация запросов
TLS-рукопожатие	Дополнительные раундтрипы	TLS 1.3, OCSP stapling, HTTP/2
Перенаправления	Каждый редирект добавляет TTFB	Минимизация цепочек редиректов

Проверить TTFB вашего сайта можно с помощью инструмента проверки HTTP-заголовков enterno.io — он показывает время ответа сервера и все заголовки кеширования.

Оптимизация изображений

Изображения обычно составляют 40–60% от общего веса страницы. Их оптимизация — самый быстрый способ ускорить сайт.

Современные форматы

WebP обеспечивает сжатие на 25–35% лучше, чем JPEG, при сопоставимом качестве. AVIF — ещё более эффективный формат, сжимающий изображения на 50% лучше JPEG. Используйте элемент <picture> для прогрессивного применения:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание" width="800" height="600" loading="lazy">
</picture>

Ленивая загрузка

Атрибут loading="lazy" откладывает загрузку изображений за пределами видимой области. Однако для LCP-элемента (главного баннера) используйте loading="eager" и добавьте fetchpriority="high".

Responsive images

Атрибут srcset позволяет браузеру выбирать оптимальный размер изображения в зависимости от экрана. Не загружайте изображение 2000 пикселей на мобильный телефон с экраном 375 пикселей.

Минификация и сжатие ресурсов

Минификация удаляет из кода пробелы, комментарии и сокращает имена переменных. Это уменьшает размер файлов на 20–40%.

JavaScript — используйте Terser, esbuild или SWC для минификации
CSS — cssnano, Lightning CSS или PostCSS
HTML — html-minifier-terser

Помимо минификации, настройте серверное сжатие. Gzip уменьшает размер текстовых ресурсов на 70–80%, а Brotli — на 80–90%. Проверьте наличие заголовка Content-Encoding: br или Content-Encoding: gzip с помощью анализатора HTTP-заголовков.

CDN — сеть доставки контента

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

Преимущества CDN:

Снижение TTFB на 50–80% для удалённых пользователей
Защита от DDoS-атак
Автоматическая оптимизация изображений (у Cloudflare, Fastly)
Edge-кеширование статики и даже динамического контента

Кеширование

Правильно настроенное кеширование — один из самых эффективных способов ускорить повторные посещения.

HTTP-кеширование

Заголовок Cache-Control управляет кешированием на уровне браузера и промежуточных прокси. Рекомендуемые стратегии:

Тип ресурса	Рекомендуемый Cache-Control
Статические ресурсы с хешем	`max-age=31536000, immutable`
HTML-страницы	`no-cache` (с ETag-валидацией)
API документацию-ответы	`no-store` или короткий `max-age`
Изображения без хеша	`max-age=86400, stale-while-revalidate=604800`

Серверное кеширование

На серверной стороне используйте:

OPcache — для кеширования скомпилированного PHP-кода
Redis / Memcached — для кеширования результатов запросов к БД
Varnish — для полностраничного кеширования
FastCGI cache (nginx) — простое и эффективное решение

Оптимизация JavaScript

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

Code splitting

Разбивайте бандл на части, загружая только необходимый для текущей страницы код. Динамический import() позволяет загружать модули по требованию:

// Загружаем модуль только при необходимости
const module = await import('./heavy-module.js');
module.init();

Tree shaking

Убедитесь, что бандлер (webpack, Rollup, esbuild) удаляет неиспользуемый код. Для этого используйте ES-модули (import/export) вместо CommonJS (require).

Отложенная загрузка скриптов

Используйте атрибуты async и defer для скриптов, не критичных для первоначального рендеринга. Скрипты аналитики, чат-виджеты и социальные плагины должны загружаться после основного контента.

Оптимизация шрифтов

Веб-шрифты могут значительно замедлять отображение текста. Рекомендации:

Используйте font-display: swap для мгновенного отображения текста системным шрифтом
Предзагружайте критические шрифты через <link rel="preload">
Подключайте только необходимые начертания и подмножества символов
Рассмотрите формат WOFF2 — он на 30% компактнее WOFF
Хостите шрифты локально вместо Google Fonts для уменьшения DNS-запросов

HTTP/2 и HTTP/3

HTTP/2 поддерживает мультиплексирование — загрузку множества ресурсов через одно соединение. HTTP/3 (на базе QUIC) ещё быстрее благодаря устранению блокировки очереди и встроенному TLS 1.3.

Убедитесь, что ваш сервер поддерживает как минимум HTTP/2. Проверить протокол можно через анализатор HTTP-заголовков enterno.io.

Инструменты мониторинга

Регулярно отслеживайте производительность сайта с помощью:

Google PageSpeed Insights — лабораторные и полевые данные
Chrome DevTools (Lighthouse) — локальный аудит
WebPageTest — детальный анализ водопада загрузки
enterno.io — проверка заголовков, SSL, DNS и время ответа
Chrome UX Report — реальные данные от пользователей Chrome

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

Проверьте TTFB — он должен быть менее 200 мс
Настройте сжатие Brotli/Gzip
Оптимизируйте и конвертируйте изображения в WebP/AVIF
Добавьте ленивую загрузку для изображений за пределами экрана
Минифицируйте CSS, JS и HTML
Настройте Cache-Control для всех типов ресурсов
Внедрите code splitting для JavaScript
Подключите CDN
Оптимизируйте загрузку шрифтов
Устраните цепочки редиректов
Обновите серверный протокол до HTTP/2 или HTTP/3
Настройте мониторинг сайтов производительности

Проверьте сами

Используйте инструмент проверки HTTP-заголовков enterno.io, чтобы проанализировать время ответа сервера и заголовки кеширования вашего сайта.

Проверьте ваш сайт прямо сейчас

Проверить →