Примечание: Instagram, Facebook и Meta Ads принадлежат Meta Platforms Inc., деятельность которой признана экстремистской и запрещена в РФ; размещение рекламы на этих площадках для российских рекламодателей запрещено.
Скорость загрузки сайта — <2 секунды для мобильных. Google PageSpeed Insights — оценка 85+. Факторы — изображения, CSS/JS, шрифты, сервер, кэширование, CDN. Оптимизация — WebP, минификация, ленивая загрузка, gzip/brotli, HTTP/2, HTTP/3. Конверсия падает на 7% при каждой секунде задержки. SEO — Google Core Web Vitals, LCP, FID, CLS.
Почему важна скорость загрузки сайта
Скорость — фактор ранжирования Google и Яндекс. Конверсия падает на 7% при каждой секунде задержки. 53% мобильных пользователей уходят, если загрузка длится дольше 3 секунд.
- SEO: Google учитывает скорость с 2010 года. Core Web Vitals — с 2021. Яндекс «Владивосток» — с 2016. Быстрый сайт — выше в выдаче. Медленный — ниже;
- Конверсия: Amazon — 1 секунда задержки = $1,6 млрд потерь в год. Walmart — ускорение на 1 секунду = +2% конверсии. Каждая секунда — минус 7% конверсии;
- Отказы: 53% мобильных уходят при загрузке >3 секунд. 1–3 секунды — вероятность отказа 32%. 1–5 секунд — 90%. 1–6 секунд — 106%;
- Пользовательский опыт: быстрый сайт — приятный опыт. Медленный — раздражение. Лояльность падает. Возвратность — ниже;
- Мобильный трафик: 70–80% трафика — мобильный. Мобильные сети — медленнее. Скорость — критичнее. Mobile-first индексация Google — с 2020;
- Бизнес-показатели: скорость → конверсия → выручка. Ускорение сайта — самый дешёвый способ увеличить продажи без рекламных бюджетов.
Как измерить скорость сайта
Измерение — первый шаг к оптимизации. Инструменты — бесплатные, метрики — стандартизированные. Без измерения — не понять, что оптимизировать.
- Google PageSpeed Insights: оценка 0–100. Скорость и удобство. Отдельно — мобильный и десктоп. Рекомендации — с приоритетами. Core Web Vitals — LCP, FID, CLS. Бесплатно;
- Lighthouse: встроен в Chrome DevTools. Аудит — Performance, Accessibility, SEO, Best Practices. Детальный отчёт. Бесплатно;
- GTmetrix: оценка PageSpeed и YSlow. Водопад загрузки — каждый ресурс. Видео — как загружается страница. Бесплатный тариф — ограниченный;
- WebPageTest: детальный тест. Места тестирования — разные страны. Браузеры — Chrome, Firefox, Safari. Водопад, блокировка, фильм. Бесплатно;
- Яндекс Метрика: скорость загрузки реальных пользователей. Отчёт — по страницам, браузерам, устройствам. Бесплатно;
- Метрики Core Web Vitals: LCP (Largest Contentful Paint) — <2,5 сек. FID (First Input Delay) — <100 мс. CLS (Cumulative Layout Shift) — <0,1. TTFB (Time to First Byte) — <200 мс. FCP (First Contentful Paint) — <1,8 сек. Speed Index — <3,4 сек;
- Chrome DevTools: Network — водопад. Performance — профайлинг. Lighthouse — аудит. Coverage — неиспользуемый CSS/JS. Бесплатно.
Оптимизация изображений
Изображения — 50–80% веса страницы. Оптимизация — самый быстрый способ ускорить сайт. WebP, ленивая загрузка, responsive images.
- Формат: WebP — на 30% меньше JPEG, на 25% меньше PNG. AVIF — на 50% меньше JPEG. Современные браузеры — поддерживают. Fallback — JPEG/PNG для старых;
- Сжатие: lossy — для фото (качество 80–85). lossless — для графики. Инструменты — TinyPNG, Squoosh, ImageOptim. Автоматизация — gulp-imagemin, sharp;
- Responsive images:
srcset— разные размеры для разных экранов. - Ленивая загрузка:
loading="lazy"— изображения загружаются при появлении в viewport. Экономия — 50–80% трафика. Для первых изображений — не использовать (above the fold); - Размеры: указывайте width и height — браузер резервирует место. Без них — CLS (сдвиг контента). Максимальный размер — не больше отображаемого. Не загружайте 4000 px для 400 px блока;
- CDN для изображений: Cloudflare Images, Cloudinary, Imgix. Автоматическое сжатие, ресайз, формат. Доставка с ближайшего сервера;
- SVG: для иконок и логотипов — вектор. Вес — минимальный. Масштабирование — без потерь. Inline — без запроса;
- Видео: вместо GIF — MP4/WebM (в 10–100 раз меньше).
preload="none"— для ниже первого экрана. Poster — изображение до загрузки.
Оптимизация CSS, JavaScript и шрифтов
CSS и JavaScript — блокируют рендеринг. Шрифты — блокируют текст. Оптимизация — отложенная загрузка, минификация, удаление лишнего.
- Минификация: CSS и JS — удаление пробелов, комментариев, переносов. Terser (JS), cssnano (CSS), Webpack, Rollup. Уменьшение — на 20–50%;
- Объединение: несколько CSS/JS → один файл. Меньше запросов. Для HTTP/1.1 — критично. Для HTTP/2 — менее важно (мультиплексирование);
- Отложенная загрузка JS:
defer— после парсинга HTML.async— асинхронно. Некритичный JS — defer. Критичный — inline в; - Critical CSS: CSS для первого экрана — inline в
. Остальной CSS — отложенная загрузка. Инструменты — Critical, Penthouse. Ускоряет FCP; - Удаление неиспользуемого: Coverage в Chrome DevTools — показывает неиспользуемый CSS/JS. Удалите или отложите. Tree shaking — для JS (Webpack). PurgeCSS — для CSS;
- Шрифты:
font-display: swap— текст виден сразу (системный шрифт → ваш).preload— предзагрузка шрифта. Подмножества — только нужные символы (кириллица). Локальные шрифты — не с Google Fonts (замедляет); - Сторонние скрипты: аналитика, пиксели, виджеты — каждый замедляет. Отложите — после загрузки. Partytown — изоляция. Удалите неиспользуемые. Самые тяжёлые — Google Analytics, Facebook Pixel, чаты;
- Кэширование в браузере:
Cache-Control— для статических ресурсов.max-age=31536000— год для неизменных.immutable— для файлов с хэшем. ETag — для валидации.
Сервер, хостинг и CDN
Сервер — основа скорости. TTFB <200 мс — цель. SSD, HTTP/2, gzip/brotli, кэширование. CDN — доставка с ближайшего сервера.
- TTFB: Time to First Byte — время до первого байта. Цель — <200 мс. >500 мс — медленно. Зависит — сервер, база данных, кэширование, сеть;
- SSD: твердотельные накопители — в 10–100 раз быстрее HDD. Выбирайте хостинг с SSD. Виртуальный хостинг — медленнее VPS. VPS — для скорости;
- HTTP/2 и HTTP/3: мультиплексирование — несколько запросов в одном соединении. Сжатие заголовков. Server push. HTTP/3 — на QUIC, быстрее при потере пакетов. Проверьте — поддерживает ли хостинг;
- Сжатие: gzip — стандарт. Brotli — на 15–20% эффективнее. Включите на сервере. Для CSS, JS, HTML, SVG, JSON. Проверьте — в DevTools → Network → Headers → Content-Encoding;
- Кэширование сервера: Redis, Memcached — кэш в оперативной памяти. Varnish — reverse proxy кэш. Nginx FastCGI cache. Для WordPress — WP Rocket, W3 Total Cache;
- CDN: Content Delivery Network — серверы по всему миру. Пользователь получает контент с ближайшего сервера. Cloudflare — бесплатно. Amazon CloudFront, Fastly, Akamai — платно. Для международной аудитории — обязательно;
- Хостинг: виртуальный — дёшево, медленно. VPS — от 300 ₽/мес, быстрее. Выделенный — для крупных. Cloud — масштабируемость. Выбирайте — по расположению (близко к аудитории), SSD, HTTP/2, кэширование;
- База данных: индексы — для частых запросов. Очистка — от старых данных. Оптимизация запросов — EXPLAIN. Кэширование — Redis. Для WordPress — очистка ревизий, оптимизация таблиц.
Часто задаваемые вопросы
Как увеличить скорость загрузки сайта?
Оптимизируйте изображения (WebP, ленивая загрузка, srcset), минифицируйте CSS/JS, отложите некритичный JS (defer/async), включите gzip/brotli, настройте кэширование, подключите CDN, используйте HTTP/2, SSD-хостинг. Цель — PageSpeed 85+, LCP <2,5 сек, TTFB <200 мс.
Как проверить скорость сайта?
Google PageSpeed Insights — оценка 0–100, рекомендации. Lighthouse — в Chrome DevTools, детальный аудит. GTmetrix — водопад загрузки. WebPageTest — тест из разных стран. Яндекс Метрика — скорость реальных пользователей. Метрики — LCP, FID, CLS, TTFB, FCP.
Что такое Core Web Vitals?
Три метрики от Google: LCP (Largest Contentful Paint) — <2,5 сек, скорость загрузки основного контента. FID (First Input Delay) — <100 мс, скорость реакции на первое действие. CLS (Cumulative Layout Shift) — <0,1, стабильность макета. Влияют на ранжирование с 2021 года.
Какой должна быть скорость загрузки сайта?
Менее 2 секунд для мобильных. Менее 1,5 секунд для десктопа. PageSpeed — 85+. LCP — <2,5 сек. TTFB — <200 мс. CLS — <0,1. Каждая секунда сверх 2 — минус 7% конверсии. 53% мобильных уходят при >3 секунд.
Как оптимизировать изображения для сайта?
WebP или AVIF — вместо JPEG/PNG. Сжатие — TinyPNG, Squoosh (качество 80–85). Responsive — srcset для разных экранов. Ленивая загрузка — loading="lazy". Указывайте width и height. Не загружайте больше отображаемого. SVG — для иконок. CDN — для автоматизации.
Влияет ли скорость на SEO?
Да. Google — скорость с 2010, Core Web Vitals с 2021. Яндекс «Владивосток» — с 2016. Быстрый сайт — выше в выдаче. Mobile-first — с 2020. PageSpeed 85+ — преимущество. Медленный — ниже, меньше трафика, меньше конверсий.
Что такое CDN и зачем нужен?
CDN (Content Delivery Network) — сеть серверов по всему миру. Пользователь получает контент с ближайшего сервера — быстрее. Cloudflare — бесплатно. Amazon CloudFront, Fastly — платно. Для международной аудитории — обязательно. Ускоряет загрузку на 30–60%, снижает нагрузку на сервер.
