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, чтобы проанализировать время ответа сервера и заголовки кеширования вашего сайта.