Скорость загрузки лендинга: как ускорить сайт до 95+ по PageSpeed

Зачем гоняться за скоростью

Скорость загрузки это не про “приятно пользователю”. Это про три вещи: цену рекламы, позицию в поиске и процент отказов. Медленный лендинг теряет до 40% трафика ещё до первого клика на кнопку.

Google и Яндекс публично учитывают Core Web Vitals в ранжировании. Директ и ВК Реклама считают качество посадочной при определении ставки аукциона. Если лендинг грузится 5 секунд, клик стоит дороже, чем у конкурента с лендингом на 1,5 секунды. При одинаковом бюджете вы получаете меньше показов и заявок.

В цифрах: переход с 4 секунд загрузки на 1,5 секунды снижает процент отказов на 30–50% и сокращает стоимость клика на 10–20%. Это не теория, это наблюдается в любом рекламном кабинете.

Из чего складывается скорость

Все меряют PageSpeed Insights от Google. Оценка формируется из 6 метрик:

• LCP (Largest Contentful Paint) — как быстро показывается самый большой элемент. Цель < 2,5 с.
• FID или INP (Input Delay) — задержка реакции на первое действие. Цель < 200 мс.
• CLS (Cumulative Layout Shift) — скачки элементов при загрузке. Цель < 0,1.
• FCP (First Contentful Paint) — когда показывается первый элемент. Цель < 1,8 с.
• TTFB (Time to First Byte) — время ответа сервера. Цель < 800 мс.
• TBT (Total Blocking Time) — сколько JS тормозит интерфейс.

Средний лендинг “из коробки” без оптимизации выдаёт 50–70 баллов на мобильном. Основная причина — тяжёлые картинки, шрифты из Google Fonts, несколько счётчиков аналитики, рекламные пиксели.

Что делает скорость медленной

Картинки без оптимизации

Самая частая причина. Заказчик присылает фото из iPhone весом 4 МБ, дизайнер ставит на лендинг как есть. Одно такое фото съедает 2–3 секунды загрузки на мобильном 4G.

Что делать:

1. Конвертировать в WebP. Экономия 25–35% размера при том же качестве.
2. Указывать правильные размеры. Если картинка показывается 600×400 пикселей на экране, незачем держать 3000×2000.
3. Использовать адаптивные варианты (srcset). Мобильному отдавать маленькую картинку, десктопу большую.
4. Включать lazy loading для всех изображений кроме первого экрана. Картинка на 8-м блоке загружается, только когда посетитель долистывает.

Одна только оптимизация изображений поднимает PageSpeed на 15–25 баллов.

Шрифты

Google Fonts это красиво, но в 2025 году для РФ ещё и медленно. Подключение внешнего шрифта добавляет 300–500 мс на каждый вариант начертания. Если на лендинге 3 начертания (Regular, Bold, Italic), это 1–1,5 секунды только на шрифты.

Решение:

• Хранить шрифты локально (self-host).
• Использовать WOFF2 формат, он меньше на 30% чем WOFF и TTF.
• Подгружать только нужные начертания и subset (кириллица + латиница base).
• Ставить font-display: swap, чтобы текст показывался системным шрифтом до подгрузки веб-шрифта.

JavaScript

Несколько внешних скриптов подряд (Яндекс.Метрика, Google Analytics, чат, пиксель ВК, пиксель Директа) блокируют рендеринг. Каждый скрипт это 100–300 мс задержки.

Что делать:

• Отказаться от скриптов, которые не используются. Часто на лендинге висит 5 счётчиков, из которых активно работают 2.
• Ставить async или defer на оставшиеся скрипты.
• Яндекс.Метрику подключать через отложенную загрузку (после взаимодействия пользователя).
• Заменять чат-плагины на простые ссылки в Telegram и MAX.

Тема и конструктор

На Tilda и WordPress базовые шаблоны тянут за собой 200–500 КБ CSS и JS для всех возможных виджетов, даже если вы используете 10% функционала. Почистить это невозможно без взлома конструктора.

Именно поэтому лендинги на чистом HTML почти всегда обходят Tilda по PageSpeed на 10–20 баллов при той же внешней сложности.

Таблица: типовые показатели до и после оптимизации

Цифры из типичного проекта на чистом HTML. Для Tilda цифры “после” будут на 10–15 баллов скромнее при тех же оптимизациях.

Чек-лист: 15 действий для PageSpeed 95+

1. Все картинки в WebP или AVIF формате.
2. Для каждой картинки указаны width и height в HTML (убирает CLS).
3. Картинки за пределами первого экрана имеют loading=“lazy”.
4. Первая картинка первого экрана имеет fetchpriority=“high”.
5. Шрифты self-hosted, формат WOFF2, подгружены только нужные начертания.
6. font-display: swap включён для всех кастомных шрифтов.
7. CSS минифицирован и объединён в 1–2 файла.
8. Критический CSS (для первого экрана) встроен инлайн в HTML.
9. Остальной CSS подгружается асинхронно.
10. JS минифицирован, используется defer или async.
11. Отключены неиспользуемые скрипты аналитики и пикселей.
12. Яндекс.Метрика загружается с задержкой после первого взаимодействия.
13. Включён gzip или brotli на сервере.
14. Включено HTTP/2 на хостинге (проверяется curl -I —http2).
15. Кэширование статики настроено на 1 год через заголовки Cache-Control.

Каждый пункт даёт от 1 до 5 баллов PageSpeed. Совокупно поднимает типовой лендинг с 55 до 95+ на мобильном.

Что делать, если сайт на Tilda

Tilda сложнее оптимизировать, но до 80 баллов можно дотянуть:

• Сжать все изображения до загрузки в Tilda (максимальная ширина 1920 пикселей, качество 80%).
• Удалить неиспользуемые блоки. Даже скрытые блоки загружаются.
• Отключить pagefonts Tilda в пользу одного локального шрифта через Zero-блок.
• Убрать пикселей и внешние скрипты, которые не дают прямой пользы.
• Использовать Tilda Sitespeed (платная опция) для автоматической оптимизации.

Выше 85 баллов на Tilda выйти сложно. Это потолок конструктора.

Если бюджет рекламы больше 50 тысяч рублей в месяц, разница PageSpeed 70 (Tilda оптимизированная) и 95 (чистый HTML) даёт экономию 5–10 тысяч рублей в месяц на ставках аукциона. За год это 60–120 тысяч, а стоимость перехода с Tilda на HTML — 20 тысяч разово.

Как замерить скорость правильно

Не делайте выводы по одному запуску. Минимум 3 прогона с разных инструментов:

• PageSpeed Insights (pagespeed.web.dev) — официальный от Google, учитывается в ранжировании.
• GTmetrix — подробная разбивка причин медленности.
• WebPageTest — можно выбрать регион и тип соединения.
• Yandex Metrika в своём проекте показывает реальное время загрузки у реальных пользователей.

Результаты синтетических тестов и реального пользовательского опыта отличаются на 10–20%. Реальный показатель в Метрике важнее идеальных 100 баллов в Insights.

Частые ошибки с оптимизацией

• Оптимизируют картинки, но забывают про видео-фон. Автовоспроизведение видео с первого экрана убивает скорость даже при идеальных картинках.
• Чистят скрипты, но забывают проверить, что Метрика продолжает работать. Результат: ускорение есть, статистики нет.
• Встраивают шрифты локально, но оставляют ссылку на Google Fonts в CSS. Получают двойную загрузку.
• Включают lazy loading на всех картинках, включая первый экран. Первый экран начинает грузиться медленнее.
• Добавляют кэширование, но не делают инвалидацию при обновлении. Пользователи месяцами видят старую версию.

Короткий итог

PageSpeed 95+ достижим для любого лендинга на чистом HTML и CSS при правильной сборке. Для Tilda потолок около 80–85 баллов, и это нормально, если бюджет рекламы небольшой.

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

Проверьте свой лендинг на pagespeed.web.dev прямо сейчас. Меньше 85 на мобильном — знак, что оптимизация не помешает.