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

PageSpeed 95+ на мобильном достигается тремя вещами: сжатыми картинками в WebP или AVIF с точными размерами, локальными шрифтами формата WOFF2 без лишних начертаний и минимумом внешних скриптов аналитики с отложенной загрузкой. Средний лендинг без оптимизации выдаёт 50-70 баллов, а на конструкторах вроде Tilda потолок обычно 80-85.

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

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

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

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

Из каких метрик состоит оценка PageSpeed?

Все меряют 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 на всех картинках, включая первый экран. Первый экран начинает грузиться медленнее.
• Добавляют кэширование, но не делают инвалидацию при обновлении. Пользователи месяцами видят старую версию.

Частые вопросы

Сколько времени занимает оптимизация скорости готового лендинга?

По моей практике - от нескольких часов до одного рабочего дня, если сайт собран на чистом HTML. Основное время уходит на пересжатие картинок и перенос шрифтов на локальный хостинг, остальные пункты чек-листа делаются быстро.

Влияет ли скорость сайта на позиции в Яндексе?

Прямо - слабо, косвенно - заметно. Яндекс не публикует скорость как жёсткий фактор ранжирования так же явно, как Google, но медленный сайт теряет часть посетителей до просмотра контента, а поведенческие метрики Яндекс учитывает прямо.

Можно ли поднять PageSpeed без переделки дизайна?

Можно, и это самый частый случай. Картинки, шрифты и скрипты не относятся к дизайну: их меняют в разметке и настройках сборки, визуально страница остаётся прежней. Дизайн приходится трогать только при видео-фоне на первом экране.

Что делать, если хостинг сам по себе медленный?

Проверьте TTFB отдельно от остальных метрик: если сервер отвечает дольше 800 мс даже на пустой странице, дело в хостинге, а не в вёрстке. В таком случае оптимизация фронтенда даёт максимум половину возможного прироста, вторую половину закрывает только смена тарифа или хостера.

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

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

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

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