Создание сайтов

Как ускорить сайт

Опубликовано 2026-09-05

Резать вес картинок и JS, кэшировать статику, не ждать чуда от плагина ускорения.

Сначала измерить, потом «оптимизировать»

Сайт тормозит не «потому что хостинг плохой» по умолчанию и не «потому что нет плагина кэша». Он тормозит, потому что браузер качает слишком много, слишком поздно начинает рисовать текст и слишком долго выполняет скрипты. Пока это не видно в весах файлов и в водопаде запросов, разговор про ускорение — гадание.

Как поисковик учитывает отрисовку — отдельная тема: как скорость сайта влияет на SEO. Здесь — что менять в поставке страницы, без мифа «один тумблер в админке».

Смотреть полевой телефон и слабый канал, не только офисный гигабит. Лабораторный отчёт полезен, но спор «у меня открывается» с ноутбука разработчика ничего не доказывает.

Картинки

Чаще всего самый тяжёлый слой — изображения. Герой 3–5 МБ, фото в карточках «как из фотоаппарата», иконки PNG по 200 КБ, слайдер из восьми таких кадров. Браузер должен это скачать, декодировать и положить в вёрстку. На телефоне это секунды и пик памяти.

Практика, которая работает:

Резать физический размер под слот. Карточке 400px по ширине не нужен оригинал 4000px.
Современные форматы там, где поддерживаются, с запасным вариантом. Не «все в SVG»: фото товара — не иконка.
Сжимать с визуальной проверкой, не до артефактов на лицах и тексте на картинке.
Не грузить ниже экрана то, без чего первый экран живёт. Ленивая загрузка — для низа, не для логотипа и героя, иначе будет скачок пустоты.
Не ставить пять декоративных фото «для атмосферы» на первый экран услуги.

Слайдер из тяжёлых баннеров убивает и скорость, и смысл. Один статичный кадр с текстом в HTML почти всегда быстрее и яснее. Это совпадает с логикой Mobile First: узкий экран не прощает карусель ради карусели.

Фон-видео на первом экране — отдельный штраф. Если без него «не бренд», хотя бы не автозвук, не полный битрейт и не блокировка отрисовки текста.

JavaScript

Скрипты дороже картинок по влиянию на отклик: их мало скачать, их надо разобрать и выполнить. Трекеры, чаты, конструкторы форм, A/B, «анимационные библиотеки», виджеты отзывов — каждый просит свой кусок главного потока.

Что делать по делу:

Считать, какие скрипты нужны до взаимодействия. Остальное — отложить.
Не грузить на каждую страницу то, что нужно одной форме.
Выкинуть мёртвые теги «оставили на всякий случай».
Чаты и маркетинговые пиксели не ставить в блокирующий вид в <head> без причины.
Анимации на чистом CSS для меню и кнопок обычно дешевле тяжёлого движка «на весь сайт».

Конструкторы страниц часто тащат редакторский runtime на публичную витрину. Если страница собрана из тридцати виджетов, ускорение кэшем не отменит стоимость сборки. Граница конструктора и своей вёрстки — в статье конструктор или индивидуальная разработка.

Модальные окна, которые подключают видео с хостинга роликов сразу при загрузке, крадут канал даже закрытыми. Подключать плеер по клику.

Шрифты

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

Практика:

Оставлять те начертания, которые реально в макете. Лишний Italic и ExtraBold «на будущее» стоят запроса.
Подмножества символов, если набор языков известен.
font-display, чтобы текст был виден, даже если веб-шрифт опаздывает. Прыжок при замене — меньшее зло, чем секунды пустого героя.
Не подключать пять семейств. Интерфейс живёт на одном-двух.

Иконки шрифтом ради трёх стрелок — лишний файл. SVG точечно легче.

Кэш и протокол

Повторный заход не должен качать те же CSS, JS и логотип. Заголовки кэша для статики, версия файла в имени при выкладке — обычная схема. Без версии вы либо кэшируете навсегда и ловите «у заказчика старая вёрстка», либо не кэшируете ничего.

CDN имеет смысл, когда аудитория разъехана географически или исходный сервер далеко. CDN не лечит 4 МБ героя: он быстрее отдаст тот же кирпич.

Сжатие ответов на стороне сервера для HTML/CSS/JS — гигиена. Картинки в JPEG/WebP повторно gzip-ом почти не выигрывают — их режут иначе.

HTTPS и современные протоколы транспорта — норма хостинга, не «фича тарифа премиум». Если хостинг отдаёт HTTP/1.1 с десятком блокирующих файлов из <head>, сначала сократить файлы, потом спорить про тариф.

Хостинг и серверная работа

Хостинг виноват, когда HTML приходит долго даже без картинок: холодный старт, перегруженное общее железо, тяжёлая страница, которая на каждый хит собирается из десятков запросов к базе и внешним API.

Имеет смысл:

Смотреть время до первого байта на HTML, отдельно от веса картинок.
Не держать динамическую сборку там, где страница меняется раз в неделю — кэш полной страницы или заранее собранный HTML.
Не ставить сайт на тариф, который засыпает без трафика, если это публичная витрина.
Близость сервера к аудитории. Сервер «потому что дешёвый VPS далеко» добавляет задержку на каждый документ.

Плагин «ускорения» на CMS обычно включает смесь: минификация, отложенный JS, кэш, иногда ломает формы и админку. Это не стратегия. Это попытка спрятать лишний вес. Сначала выкинуть лишнее, потом кэш как закрепление.

Третья сторона

Метрика, пиксели, карты, встроенные ленты соцсетей, онлайн-консультанты, A/B. Каждый хост — отдельный риск таймаута. Одна медленная третья сторона держит страницу «вечно грузится».

Карта на контактах — по клику или статичный снимок. Лента соцсети — ссылка, не живой iframe на главной. Согласовать с маркетингом список тегов и не давать каждому подрядчику вставлять свой в <head>.

Порядок работ без театра

Слой	Что проверить	Типичный выигрыш
Картинки	Вес героя и карточек, размеры под слот	Часто главный
JS	Список тегов, чаты, конструкторы	Отклик и INP
Шрифты	Число семейств и начертаний	Скорость появления текста
Кэш	Повторный заход, заголовки статики	Повторные визиты
Хостинг	Время HTML без медиа	Когда «пусто, но долго»
Третья сторона	Виджеты и пиксели	Хвост загрузки

Чек-лист запуска:

Взвесить главную, услугу, статью: HTML, CSS, JS, картинки отдельно.
Убрать то, чего нет на экране смысла.
Нормализовать изображения.
Отложить необязательный JS.
Включить кэш статики с версионированием.
Повторить замер на телефоне.

Если после этого HTML всё ещё собирается секундами — это уже сервер и архитектура, не «нужен ещё один плагин». Правки шаблонов и поставки ассетов обычно делают в контуре дизайна и разработки, а не отдельной «магией скорости» поверх мёртвой вёрстки.

Чего ждать не стоит

Не будет честного «ускорить в 10 раз» без изменения состава страницы. Не будет стабильного эффекта от сжатия HTML на 3 КБ при герое 2 МБ. Не будет пользы от минификации, которая ломает скрипт формы.

Скорость — следствие дисциплины: меньше файлов, меньше работы на главном потоке, предсказуемый сервер. Всё, что обещает это кнопкой без взгляда на водопад, почти всегда врёт или чинит одно, ломая другое.