Если сайт грузится дольше 3 секунд, вы теряете больше половины посетителей ещё до того, как они увидят первый блок. Это руководство показывает, как ускорить сайт пошагово: от диагностики до конкретных техник под Битрикс, WordPress и Tilda.
Материал собран по 550+ проектам веб-студии Сайты2.рф (Кронштадт, СПб) с 2008 года. Внутри: 18 рабочих техник в 5 группах, таблица инструментов измерения, особенности CMS и приоритизация работ на неделю. Время чтения - 14 минут.
Почему скорость сайта = деньги
Каждая секунда задержки убирает 7% конверсии. Это данные Akamai и Walmart, подтверждённые на сотнях аудитов. Сайт грузится 5 секунд - вы теряете треть заявок. Грузится 7 - половину.
Скорость напрямую влияет на отказы. По данным Яндекс.Метрики, при росте времени загрузки с 1 до 3 секунд процент отказов растёт в 1,9 раза. На мобильных - в 2,3 раза.
Google и Яндекс с 2021 года используют скорость загрузки сайта как фактор ранжирования. Метрика LCP (главный показатель скорости) входит в Core Web Vitals и влияет на позиции в выдаче. Медленный сайт проигрывает быстрому при прочих равных, даже с лучшим контентом и ссылочной массой.
В нашей практике средний результат после оптимизации - переход с 6-7 секунд до 1,4-1,8 секунды. Рост конверсии после такой работы - от 18% до 41% в зависимости от ниши.
Как измерить скорость правильно
Перед тем как ускорять, нужно знать стартовые цифры. Без измерения вы не поймёте, что сработало.
Главное правило: разделяйте полевые данные (реальные пользователи) и лабораторные (тест в идеальных условиях). Поле показывает, как сайт работает у вашей аудитории. Лаб - что технически можно улучшить.
Таблица инструментов измерения скорости
| Инструмент | Что показывает | Поле/лаб | Когда использовать |
|---|---|---|---|
| PageSpeed Insights | Core Web Vitals, баллы 0-100, советы | Поле + лаб | Базовая диагностика, отчёт клиенту |
| GTmetrix | Waterfall запросов, размер ресурсов | Лаб | Поиск узких мест, тяжёлых файлов |
| WebPageTest | Детальные графики, тест из разных стран | Лаб | Углублённый аудит, сложные кейсы |
| Chrome DevTools | Performance-трейс в реальном времени | Лаб | Локальная отладка во время разработки |
| Яндекс.Метрика | LCP, FID, CLS по реальным пользователям | Поле | Мониторинг скорости после релиза |
| Search Console | Отчёт Core Web Vitals | Поле | Что видит Google по вашему сайту |
Тестируйте сайт минимум на трёх инструментах. PageSpeed Insights даёт быстрый общий балл и рекомендации. GTmetrix показывает, какие файлы грузятся дольше всех. Метрика и Search Console - правда о реальных пользователях за 28 дней.
Замерьте 5-7 страниц: главная, две посадочные с рекламы, страница услуги, карточка товара, страница контактов. Цифры будут разные, оптимизировать нужно каждую.
Что такое Core Web Vitals
Core Web Vitals - три метрики Google, которые отвечают за пользовательский опыт скорости. Входят в факторы ранжирования и видны в PageSpeed Insights, Search Console, Яндекс.Метрике.
LCP (Largest Contentful Paint). Время до отрисовки самого большого элемента на первом экране (обычно героическое изображение или заголовок). Цель: до 2,5 секунды. Хорошо - до 1,5 секунды.
INP (Interaction to Next Paint). Задержка отклика на действие пользователя - клик, тап, ввод. Заменила метрику FID в 2024 году. Цель: до 200 миллисекунд.
CLS (Cumulative Layout Shift). Суммарный сдвиг макета при загрузке - когда блоки прыгают, потому что подгружается шрифт или картинка без размеров. Цель: до 0,1.
Цвета в отчётах Google: зелёный (хорошо), жёлтый (нужны улучшения), красный (плохо). Чтобы пройти Core Web Vitals, все три метрики должны быть в зелёной зоне у 75% пользователей.
Группа 1. Изображения - 4 техники
Изображения дают 50-70% веса страницы. Это первое, с чего начинают оптимизацию скорости сайта.
1. Современные форматы WebP и AVIF
JPEG и PNG устарели. WebP весит на 25-35% меньше при том же качестве, AVIF - на 40-50%. Перекодируйте все картинки на сайте.
Конвертеры: Squoosh.app (бесплатно, в браузере), TinyPNG (онлайн пакетно), плагины Cwebp для Битрикс и WordPress. На Tilda WebP включается в настройках одним переключателем.
Поддержите старые браузеры через тег picture с fallback на JPEG. Современные браузеры покажут WebP, старые - JPEG.
2. Lazy-loading вне первого экрана
Все картинки ниже первого экрана грузятся только при прокрутке. В HTML это атрибут loading="lazy" на теге img. Браузер откладывает загрузку до момента, когда пользователь подходит к картинке.
Не вешайте lazy-loading на главное изображение первого экрана - это ухудшит LCP. Загружайте его в приоритете через fetchpriority="high".
3. Правильные размеры под устройства
Картинка 3000×2000 пикселей на мобильном экране 360 пикселей шириной - 90% веса впустую. Используйте srcset и атрибут sizes, чтобы браузер выбирал нужное разрешение.
Минимум 3 размера на каждое изображение: десктоп (1920px), планшет (1024px), мобильный (480px). Битрикс генерирует их через D7-API, WordPress через add_image_size, Tilda автоматически.
4. Сжатие через TinyPNG и Squoosh
После конвертации в WebP пройдите ещё раз через TinyPNG или Squoosh. Качество 80-85 визуально не отличается от 100, но размер падает на 30-40%. Для фото-героев на главных страницах - не ниже 85.
Группа 2. Код - 4 техники
Когда изображения уже сжаты, тормозить начинает JavaScript и CSS. Дальше работаем с кодом.
5. Минификация CSS и JS
Минификация убирает пробелы, переносы строк, комментарии. Файл главной CSS обычно худеет в 1,5-2 раза. Подключите минификаторы: terser для JS, cssnano для CSS. На Битрикс и WordPress есть готовые модули. Tilda минифицирует код по умолчанию.
6. Удаление неиспользуемого CSS
В большинстве проектов 40-60% CSS не используется. Это остатки шаблонов, плагинов, тестовых правок. Найдите их через Chrome DevTools - вкладка Coverage показывает, какой процент каждого CSS-файла применяется.
Удалите unused CSS через PurgeCSS или UnCSS на этапе сборки. На WordPress помогают плагины Autoptimize и Asset CleanUp.
7. Defer и async для скриптов
JavaScript блокирует рендеринг страницы. Браузер останавливается, пока не загрузит и не выполнит каждый script. Решение: атрибуты defer и async.
- async - скрипт загружается параллельно с парсингом HTML, выполняется сразу после загрузки. Подходит для независимых счётчиков (например, Google Analytics).
- defer - скрипт загружается параллельно, выполняется только после парсинга HTML. Подходит для основной логики сайта.
Правило: всё, что можно, отдавайте через defer. Только критичный JS (например, поляризация формы первого экрана) - в inline в head.
8. Критический CSS inline в head
Critical CSS - стили только для первого экрана, встроенные прямо в HTML. Браузер отрисовывает экран сразу, не дожидаясь внешнего CSS-файла. Экономия на LCP - 0,3-0,8 секунды.
Сгенерируйте critical CSS через инструмент Penthouse или плагин Critical для Gulp. На WordPress есть плагины WP Rocket и Autoptimize с автогенерацией.
Группа 3. Сервер и сеть - 4 техники
9. Сжатие Brotli или GZIP
Сервер должен отдавать текстовые файлы (HTML, CSS, JS, SVG) в сжатом виде. GZIP сжимает в 4-6 раз, Brotli - в 5-8 раз. Brotli современнее и эффективнее, поддерживается всеми актуальными браузерами.
Включите Brotli в Nginx (модуль brotli) или Apache (mod_brotli). На большинстве хостингов делается в один клик в панели управления. Tilda и Cloudflare включают сжатие по умолчанию.
10. HTTP/2 или HTTP/3
HTTP/1.1 открывает по одному соединению на каждый файл. HTTP/2 загружает все файлы по одному соединению параллельно. HTTP/3 работает по UDP вместо TCP - быстрее в нестабильных сетях.
Включается на стороне хостинга. Проверить версию: введите домен в KeyCDN HTTP/2 Test. Если у вас HTTP/1.1 в 2026 году - меняйте хостинг или включайте Cloudflare сверху.
11. Кеширование браузера
Заголовок Cache-Control говорит браузеру: "хранить этот файл локально N дней". Картинки, шрифты, иконки - кешируйте на год (max-age=31536000). CSS и JS - на месяц, с версионированием через хеш в имени файла.
Настройка в .htaccess (Apache) или серверной конфигурации Nginx. На Битрикс и WordPress подключайте плагины уровня WP Rocket или модули типа Bitrix Performance.
12. CDN Cloudflare или BunnyCDN
CDN раздаёт ваш сайт через сеть серверов по миру. Пользователь из Москвы получает файлы с московского узла, из Владивостока - с владивостокского. Экономия времени на отдаче - 100-400 миллисекунд.
Бесплатный вариант - Cloudflare (на бесплатном тарифе есть сжатие, кеширование, базовая защита). Платный быстрый - BunnyCDN (от 1 доллара в месяц). На наших проектах Cloudflare снижает TTFB с 500-800 мс до 80-150 мс.
Группа 4. Шрифты - 3 техники
Шрифты - частая причина мерцания текста при загрузке (FOIT, FOUT) и роста CLS.
13. font-display: swap
По умолчанию браузер ждёт загрузки кастомного шрифта и показывает пустоту вместо текста. С font-display: swap текст сразу показывается стандартным шрифтом, а кастомный применяется после загрузки.
Прописывается в правиле @font-face в CSS. На Google Fonts опция включается через параметр display=swap в URL подключения.
14. Preload ключевых шрифтов
Шрифт основного текста подключайте через rel="preload" в head:
<link rel="preload" href="/fonts/onest-500.woff2" as="font" type="font/woff2" crossorigin>Браузер начинает грузить шрифт параллельно с HTML, не дожидаясь парсинга CSS. Текст появляется на 200-400 миллисекунд раньше.
15. Отказ от лишних начертаний
Onest подключается в 9 начертаниях (100-900). Это 9 отдельных файлов по 200 КБ. На сайте используются 2-3: 400 (regular), 500 (medium), 700 (bold). Удалите остальные.
Раздел <link> на Google Fonts позволяет выбрать конкретные начертания. На самохосте шрифтов - просто не подключайте лишние файлы woff2.
Группа 5. Сторонние скрипты - 3 техники
16. Отложенная загрузка Метрики и Google Analytics
Счётчики аналитики не нужны в первые секунды. Загружайте их через requestIdleCallback или с задержкой 3-5 секунд после загрузки страницы:
setTimeout(() => {
// код Яндекс.Метрики
}, 3000);Эта техника не влияет на сбор данных (всё равно человек на странице больше 3 секунд), но снижает блокировку основного потока на 200-500 мс.
17. Удаление неиспользуемых пикселей
На многих сайтах висят пиксели VK Ads, Facebook, MyTarget, чат-боты Jivo - даже если рекламы давно нет. Каждый скрипт грузит 30-150 КБ и блокирует поток. Проведите ревизию через GTM или прямо в коде сайта.
Правило: пиксель ставится перед запуском рекламы, снимается через 30 дней после остановки.
18. Hosting через GTM (Google Tag Manager)
Все третьесторонние скрипты подключайте через Google Tag Manager. Это даёт единую точку контроля, отложенную загрузку и возможность отключить любой скрипт без правки кода сайта.
На WordPress используйте плагин GTM4WP, на Битрикс - готовый шаблон тега. На Tilda GTM подключается в одну строку в настройках сайта.
Особенности Битрикс, WordPress, Tilda
Битрикс
- Включите композитный кеш в настройках главного модуля. Скорость TTFB падает с 800 мс до 100-150 мс.
- Используйте D7-API для работы с изображениями (ресайз, WebP) вместо CFile.
- Подключите модуль "Push and Pull" только если реально нужны живые уведомления, иначе он тянет ресурсы.
- Очищайте журнал событий и кеш битрикса хотя бы раз в месяц - таблицы пухнут.
WordPress
- Поставьте кеширующий плагин: WP Rocket (платный, лучший) или W3 Total Cache (бесплатный). LCP падает в 2-3 раза.
- Используйте лёгкую тему: Astra, GeneratePress, Kadence. Большинство премиум-тем перегружены анимациями.
- Удалите неиспользуемые плагины. Каждый активный плагин подгружает свой CSS/JS.
- Подключите ShortPixel или Smush для автооптимизации изображений при загрузке.
Tilda
- Включите "Ускоренную загрузку" в настройках сайта (Меню - Сайт - Скорость).
- Лимитируйте число анимаций на странице (zoom-in, fade, parallax). Каждая анимация - JS-обработчик.
- Не злоупотребляйте блоками со встроенным видео-фоном - они тянут ролик автоматически.
- Используйте Tilda CDN (включён по умолчанию) и не подключайте сверху лишние внешние библиотеки.
С чего начать: 5 шагов на неделю
Приоритизация по влиянию на LCP, CLS и INP. От самого эффективного к менее заметному.
День 1-2. Изображения. Конвертируйте все картинки в WebP, добавьте loading="lazy" вне первого экрана, проставьте width и height на каждом теге img. Только эти шаги дают 30-50% улучшения LCP.
День 3. Шрифты. Включите font-display: swap, добавьте preload основного начертания, удалите неиспользуемые веса. Влияет на LCP и CLS.
День 4. Сжатие и кеширование. Включите Brotli или GZIP, настройте Cache-Control для статики, подключите Cloudflare на бесплатном тарифе. Уменьшает TTFB и общий вес страницы.
День 5. Сторонние скрипты. Перенесите Метрику, Google Analytics, пиксели в GTM с задержкой 3-5 секунд. Снижает INP и блокировку основного потока.
День 6-7. Замер и отчёт. Прогоните страницы через PageSpeed Insights и GTmetrix, зафиксируйте до/после. Сравните с реальными данными в Яндекс.Метрике через неделю.
Хотите делегировать работу - закажите бесплатный аудит скорости или SEO-оптимизацию под ключ.
Сколько стоит ускорение сайта
Цена ускорения сайта зависит от двух факторов: исходное состояние и подрядчик.
| Подрядчик | Цена | Срок | Что входит |
|---|---|---|---|
| Фрилансер | 8 000 - 25 000 ₽ | 5-14 дней | Базовые техники, без гарантий результата |
| Веб-студия | 20 000 - 60 000 ₽ | 7-21 день | Оптимизация, отчёт, гарантия зелёной зоны Core Web Vitals |
| Агентство | 50 000 - 150 000 ₽ | 14-30 дней | Глубокий аудит, ускорение + SEO-эффект, постпроект-сопровождение |
В нашей практике средний чек на ускорение - 35 000 ₽ за корпоративный сайт на 30-50 страниц. Срок - 10 рабочих дней. Гарантируем выход в зелёную зону PageSpeed Insights (мобильный балл от 80) или возвращаем деньги.
Смета зависит от стека: Битрикс с большим каталогом ускоряется в 2-3 раза дольше, чем WordPress-визитка на 10 страниц. Точную цену получите за час - присылайте ссылку в Telegram @t9424744 или через калькулятор.
FAQ
За сколько реально ускорить сайт с 7 до 1,5 секунды
В 80% случаев - за 7-10 рабочих дней. Если сайт построен на тяжёлом самописном движке без возможности настройки кеша, потребуется 3-4 недели. Самый быстрый результат - на WordPress и Tilda. Битрикс ускоряется дольше из-за объёма функционала.
Что важнее - LCP или CLS
LCP важнее для SEO и первого впечатления. CLS важнее для опыта на мобильных - когда пользователь промахивается мимо кнопки из-за прыгающего макета. Оба должны быть в зелёной зоне, иначе общий балл Core Web Vitals не пройдёт.
Нужен ли CDN для сайта по СПб
Да, даже если все клиенты в Санкт-Петербурге и Ленинградской области. CDN ускоряет отдачу статики (изображения, шрифты, скрипты), снижает нагрузку на ваш хостинг и защищает от DDoS. Cloudflare на бесплатном тарифе ставится за 30 минут.
Поможет ли смена хостинга
Иногда - да. Если у вас shared-хостинг за 200 ₽ в месяц с откликом TTFB 2-3 секунды, переезд на VPS или приличный хост (Beget, Timeweb, REG.RU Business) даёт прирост 0,5-1 секунды без правки кода. Но 80% случаев тормозов - в коде и контенте, а не в хостинге.
Можно ли обойтись без программиста
Базовая оптимизация (lazy-loading, WebP, font-display) делается через плагины WordPress или настройки Tilda. Для Битрикс уже нужен разработчик. Углублённая работа (критический CSS, defer на правильных скриптах, чистка unused CSS) требует программиста на любой CMS.
Влияет ли ускорение на SEO-позиции
Да. После выхода в зелёную зону Core Web Vitals мы видим рост позиций на 3-12 пунктов в течение 4-8 недель. Подробнее в материалах про Core Web Vitals и технический SEO-аудит.
Что в итоге
Скорость загрузки сайта - не "техническая мелочь", а прямой множитель к конверсии и позициям в поиске. 18 техник в этой статье закрывают 90% типичных проблем на любой CMS.
Хотите проверить состояние своего проекта - бесплатный аудит скорости занимает 24 часа. Нужна полная оптимизация под ключ - рассчитайте стоимость или присылайте ссылку в Telegram.
В Сайты2.рф работаем с проектами в Санкт-Петербурге, Ленинградской области и по всей России с 2008 года. 550+ проектов, NPS 9,2, рост конверсии после ускорения - 28%. Поможем ускорить ваш сайт до 1,5 секунды и удержать результат.
Заказать ускорение сайта · Telegram @t9424744 · Контакты в Кронштадте
