TL;DR
Ускорение сайта в 2026 = доведение Core Web Vitals в зелёную зону + общая оптимизация UX. Главные точки роста: оптимизация изображений (WebP/AVIF + lazy load), удаление лишнего JS, минификация CSS, кэширование, CDN, шрифты с font-display swap.
С чего начать
Замер текущего состояния
- PageSpeed Insights — основные метрики.
- Lighthouse в DevTools — детально.
- WebPageTest — глубокий анализ.
- Chrome User Experience Report — реальные данные.
Сделайте скриншоты «до» — потом сравните с «после».
Приоритизация проблем
В Lighthouse в разделе Opportunities — список оптимизаций с прогнозируемой экономией времени. Начните с самых больших.
Оптимизация изображений
Форматы
| Формат | Размер vs JPEG | Поддержка |
|---|---|---|
| WebP | -25-35% | Все современные |
| AVIF | -50% | 95%+ браузеров |
| JPEG | базовый | Все |
| PNG | для прозрачности | Все |
Рекомендация: WebP как основной, AVIF где возможно, fallback JPEG.
Адаптивные изображения
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg"
width="800" height="600"
alt="Описание"
loading="lazy"
decoding="async">
</picture>Размеры
<img srcset="small.jpg 320w,
medium.jpg 768w,
large.jpg 1200w"
sizes="(max-width: 768px) 100vw, 800px"
src="large.jpg" alt="...">Браузер выберет нужное под устройство.
Lazy loading
Для всех изображений ниже первого экрана:
<img src="image.jpg" loading="lazy" alt="...">Для главного (LCP) — наоборот:
<img src="hero.jpg" fetchpriority="high" alt="...">Width и height
Всегда указывайте размеры — это убирает CLS:
<img src="image.jpg" width="800" height="600" alt="...">Сжатие
- TinyPNG / TinyJPG — браузерный сервис.
- Squoosh — продвинутый.
- ImageMagick / Sharp — серверная обработка.
- Cloudinary / ImageKit — облачные сервисы с автоматической оптимизацией.
CSS
Минификация
# Через postcss-cli
npx postcss styles.css -o styles.min.css --use cssnanoЭкономит 20-40%.
Удаление неиспользуемого
PurgeCSS, UnCSS — удаляют неиспользуемые селекторы.
Критический CSS
CSS, нужный для отрисовки первого экрана, — inline в <head>. Остальной — асинхронно:
<style>/* критический CSS */</style>
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">Загрузка из CDN
Bootstrap, Tailwind с CDN загружаются быстрее. Но осторожно — CDN может тормозить.
JavaScript
Минификация
npx terser script.js -o script.min.jsTree-shaking
Удаление неиспользуемого кода. Webpack, Rollup, Vite делают автоматически.
Code splitting
Разбиение на чанки. Загружаются по необходимости:
const Component = () => import('./HeavyComponent.js');Async и defer
<script src="analytics.js" async></script>
<script src="non-critical.js" defer></script>- async — выполняется как только загружен.
- defer — после парсинга HTML.
Для большинства скриптов — defer.
Удаление лишнего
Часто на сайте десятки скриптов, из которых половина не нужна:
- jQuery, если не используется.
- Старые библиотеки.
- Дубликаты.
Аудит через Coverage в DevTools.
Сторонние скрипты
Главный убийца скорости:
- Аналитика.
- Чаты.
- Виджеты.
- Реклама.
Решения:
- Загружать после взаимодействия (
requestIdleCallback). - Отключать ненужное.
- Использовать lite-версии (WhatsApp Lite Widget вместо тяжёлого).
Шрифты
Форматы
WOFF2 — современный, сжатый. Используйте.
font-display
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}swap — показывает fallback пока шрифт грузится. Убирает FOIT.
Preload
Для главных шрифтов:
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>Subsetting
Удаление неиспользуемых символов из шрифта. Экономит 30-70%.
Сервисы: glyphhanger, Google Fonts с фильтром символов.
Размер
- 1-2 шрифта максимум.
- 2-3 начертания каждого.
- Не загружать всё семейство.
Кэширование
HTTP-заголовки
Cache-Control: public, max-age=31536000, immutableДля статики (CSS, JS, шрифты, изображения) — длительный кэш с версионированием в URL.
Apache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>nginx
location ~* \.(jpg|jpeg|png|webp|css|js|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}Service Worker
Для PWA — service worker кэширует ресурсы в браузере. Полное оффлайн-режим.
Сжатие
Gzip / Brotli
Включить на сервере. Brotli лучше Gzip на 15-25%.
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript;
gzip on;
gzip_comp_level 6;
gzip_types text/html text/css application/javascript;Сервер
TTFB
Должен быть < 600 мс.
Что влияет:
- Качество хостинга.
- PHP версия (8.2+).
- OPcache.
- Database optimization.
- CDN.
HTTP/2 и HTTP/3
Включить на сервере. Параллельная загрузка ресурсов = быстрее.
CDN
Раздача статики с edge-серверов:
- Cloudflare (бесплатно есть).
- BunnyCDN.
- ImageKit.
- KeyCDN.
Особенно эффективно для глобального трафика.
База данных
Индексы
Без индексов на популярных запросах — каждый запрос скандает всю таблицу.
Кэширование запросов
Redis, Memcached, OPcache.
Денормализация
Иногда правильно — хранить вычисленные данные, а не считать на лету.
Чек-лист
Изображения
- [ ] WebP/AVIF.
- [ ] Lazy loading.
- [ ] Width/height указаны.
- [ ] Сжаты.
- [ ] Адаптивные (srcset).
CSS
- [ ] Минифицирован.
- [ ] Критический inline.
- [ ] Удалён неиспользуемый.
JS
- [ ] Минифицирован.
- [ ] Async/defer.
- [ ] Удалены лишние библиотеки.
- [ ] Сторонние с задержкой.
Шрифты
- [ ] WOFF2.
- [ ] font-display: swap.
- [ ] Preload главных.
Сервер
- [ ] HTTPS.
- [ ] HTTP/2 или HTTP/3.
- [ ] Gzip/Brotli.
- [ ] Кэширование.
- [ ] PHP 8.2+.
CDN
- [ ] Раздача статики.
Инструменты
- PageSpeed Insights
- Lighthouse
- WebPageTest
- GTmetrix
- Pingdom
- Cloudflare Analytics
Заказать ускорение
Доведу ваш сайт до зелёной зоны Core Web Vitals. Услуга — от 30 000 ₽. С отчётом до и после.