Как увеличить скорость загрузки сайта: пошаговый план

Почему медленный сайт стоит денег

Человек из Instagram или Telegram нажимает на ссылку в профиле, видит белый экран и закрывает вкладку. Вы заплатили за рекламу в Meta Ads или Google Ads, а заявки нет: бюджет ушёл на клик, который так и не дошёл до сайта. Поэтому скорость — не каприз оптимизаторов, а часть воронки продаж.

Есть и вторая сторона. Google учитывает удобство страницы для пользователя, поэтому тяжёлый сайт слабее выглядит и в поиске. Но главный аргумент проще: на быстром сайте легче читать, заполнять форму и оплачивать заказ через Click или Payme.

Шаг первый: измерьте, прежде чем менять

Откройте PageSpeed Insights и проверьте не только главную. Возьмите по одной странице каждого типа: услуга, категория, карточка товара, статья. Шаблоны ведут себя по-разному, и тормозить может именно карточка товара, на которую приходит весь платный трафик.

Результат для мобильной версии смотрите отдельно. Лабораторный балл — ориентир, а не цель: сайт с красивой цифрой может раздражать людей, а сайт с чуть более скромной — работать быстро. Запишите исходные значения, чтобы потом честно сравнить.

• LCP — за какое время появляется самый крупный элемент первого экрана, обычно главное фото или заголовок;
• INP — как быстро сайт реагирует на нажатие кнопки, открытие меню, выбор размера;
• CLS — прыгает ли страница во время загрузки, из-за чего легко нажать не туда;
• отчёт Core Web Vitals в Search Console — данные реальных посетителей по группам страниц;
• вкладка «Сеть» в браузере — какие файлы грузятся и какой из них самый тяжёлый.

Шаг второй: изображения — самое быстрое улучшение

В большинстве случаев страницу тянут вниз именно фото. Типичная история: SMM-менеджер или контент-менеджер загрузил снимки прямо с телефона или из макета, и баннер весит как небольшая программа. Порядок действий такой:

Отдельно о слайдерах. Карусель из нескольких крупных фото на главной — классика для салонов, клиник и учебных центров. Посетитель чаще всего видит только первый слайд, остальные грузятся зря. Замените карусель одним сильным изображением и понятной кнопкой.

• сожмите файлы до загрузки в CMS: для фото обычно хватает умеренного сжатия без заметной потери качества;
• переведите картинки в WebP или AVIF, а для старых браузеров оставьте запасной вариант, если он нужен;
• подбирайте размер под реальный блок: баннеру в узкой колонке не нужна ширина во весь монитор;
• для разных экранов отдавайте разные размеры через srcset;
• включите отложенную загрузку для картинок ниже первого экрана;
• пропишите ширину и высоту, чтобы текст не прыгал при появлении фото;
• главное фото первого экрана не откладывайте — оно как раз должно грузиться первым.

Шаг третий: кеш, сжатие и CDN

Кеш нужен, чтобы сайт не делал одну и ту же работу заново. Различают три уровня: браузер запоминает стили, скрипты и картинки; сервер хранит готовые страницы, и CMS не собирает их из базы при каждом визите; CDN держит копии файлов ближе к посетителю.

Сжатие текстовых файлов gzip или Brotli включается на сервере и уменьшает объём HTML, CSS и JavaScript без потери функций. Обычно это одна настройка, и хостинг-провайдер может включить её по запросу.

CDN полезен не всегда. Если почти вся аудитория в Ташкенте и регионах, а сервер расположен недалеко, выигрыш будет скромнее, чем у сайта с трафиком из разных стран. Проверяйте скорость именно из Узбекистана, а не только по зарубежным тестам.

Шаг четвёртый: скрипты, виджеты и шрифты

Каждый чат, пиксель, счётчик и виджет соцсетей добавляет запросы к чужим серверам, которые вы не контролируете. Со временем на сайте копятся старые коды: пиксели прошлых кампаний, несколько систем аналитики, чат, на который никто не отвечает.

Пиксели Meta и Google для рекламы и сквозной аналитики нужны, их не стоит выключать ради красивого балла. Задача — убрать дубли и подключать коды аккуратно, чтобы не остаться без данных по заявкам.

• составьте список всех подключённых кодов через Google Tag Manager и исходный код страницы;
• удалите то, чем вы не пользуетесь;
• некритичные скрипты подключайте отложенно, после показа основного содержимого;
• чат, карты и виджет отзывов загружайте после действия пользователя или после основной загрузки;
• не подключайте тяжёлую библиотеку ради одной анимации;
• оставьте один-два шрифта и только нужные начертания, настроив показ текста до загрузки шрифта.

Шаг пятый: хостинг и CMS

Если страница долго не начинает отдаваться ещё до загрузки картинок, дело в сервере или самой CMS. Сравним основные варианты.

На WordPress и Битрикс сайт чаще всего тормозит из-за плагинов и модулей. Отключите ненужные, обновите версию PHP, подключите проверенный плагин кеширования. После каждой настройки открывайте сайт и проверяйте формы, корзину и оплату: агрессивная оптимизация иногда ломает кнопки и вёрстку.

• дешёвый общий хостинг: подходит небольшой визитке, но при росте посещаемости и тяжёлой CMS ресурсов не хватает, а ответ сервера плавает;
• VPS или облачный сервер: больше ресурсов и контроля, но нужен специалист, который следит за настройками и обновлениями;
• управляемый хостинг под вашу CMS: меньше забот, кеш и сжатие часто уже включены;
• CDN поверх любого варианта: снимает нагрузку со статических файлов, но не лечит медленную базу данных.

Пример: интернет-магазин одежды в Ташкенте

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

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

Типичные ошибки

Большинство неудач связано не со сложностью задачи, а с тем, что работы делают вслепую. Вот что встречается чаще всего.

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

Чек-лист и следующий шаг

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

Если хотите, чтобы диагностику и доработки провели специалисты, markdev занимается SEO-оптимизацией сайтов в Узбекистане, включая техническую часть и скорость. Опишите свой сайт и источники трафика — обсудим, с чего начать именно в вашем случае.

• измерены ключевые шаблоны страниц на мобильной версии;
• фото сжаты, нужного размера и формата;
• ниже первого экрана включена ленивая загрузка;
• кеш и сжатие работают;
• список скриптов пересмотрен, дубли удалены;
• шрифты сокращены;
• хостинг и версия PHP проверены, повторный замер сделан.