Блог · Производительность
5 августа 2026
Скорость загрузки
сайта: максимум
Почему статика быстрее WordPress и Tilda — и как выжать из неё максимум: кэширование, CDN, изображения и критический CSS.
Почему статика быстрее WordPress и Tilda — и как выжать из неё максимум: кэширование, CDN, изображения и критический CSS.
Разница — в том, что происходит на сервере до ответа
Когда открывают страницу на WordPress, сервер на лету: подключается к базе данных, находит нужную запись, собирает HTML из десятков PHP-шаблонов и плагинов — и только потом отдаёт готовую страницу браузеру. Каждый плагин добавляет свои JS- и CSS-файлы, даже если использует их одна кнопка внизу страницы.
Статический HTML-файл сервер просто отдаёт как есть — без сборки на лету. Конструкторы вроде Tilda добавляют к этому свой JS-фреймворк для редактора, который продолжает грузиться даже на опубликованном сайте, хотя он там уже не нужен.
Обычно именно они — самая тяжёлая часть страницы
| Формат | Когда использовать |
|---|---|
| WebP | Фото и сложные изображения — на 25–35% легче JPEG при том же качестве |
| AVIF | Ещё легче WebP, но чуть медленнее кодируется — подходит для главных hero-картинок |
| SVG | Иконки, логотипы, простая графика — векторный формат, весит килобайты |
| PNG | Только если нужна прозрачность и WebP не подходит |
Помимо формата важны два атрибута: loading="lazy" откладывает загрузку картинок ниже экрана, а width/height резервируют место под изображение, чтобы страница не «прыгала» при загрузке.
<img src="photo.webp"
width="1200" height="800"
loading="lazy"
alt="Описание изображения">Отдавайте файлы из точки ближе к пользователю
CDN (Content Delivery Network) — это сеть серверов по всему миру. Файлы вашего сайта копируются на серверы рядом с пользователем — и загружаются быстрее, чем если бы каждый раз ехали с одного сервера в другой конец света.
Для статичных файлов (картинки, шрифты, CSS с версией в имени) ставьте долгий кэш — например, max-age=31536000 (год). Браузер не будет перекачивать их при следующем визите.
Показываем экран за миллисекунды, а не секунды
Браузер не может отрисовать страницу, пока не получит и не обработает весь CSS-файл — даже если стили нужны только для футера, который пользователь ещё не видит. Критический CSS — это стили только для первого экрана (above the fold), вставленные прямо в <head> страницы, а остальной CSS подгружается уже после.
<link rel="preload" as="style"> — не блокирует рендерВажно: для небольших сайтов (одностраничники, лендинги) эффект от критического CSS обычно заметен слабее, чем от оптимизации картинок — начинайте с них.
Без замера оптимизация — гадание
Главные метрики, на которые смотрит Google: LCP (когда отрисовался главный контент), CLS (насколько страница «прыгает» при загрузке) и INP (как быстро сайт отвечает на клик).
Короткие ответы на главное
90+ на мобильной версии — отличный результат. 70–90 — нормально для большинства сайтов. Ниже 50 обычно означает тяжёлые неоптимизированные картинки.
Базовый тариф Cloudflare бесплатный и покрывает большинство небольших и средних сайтов. Платные планы нужны для расширенной аналитики и правил.
Да — используйте font-display: swap, чтобы текст не был невидимым во время загрузки шрифта, и подключайте только реально используемые начертания.
Соберём статический сайт с оптимизацией картинок, кэшем и CDN из коробки.