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

Короткий ответ: что делать в первую очередь

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

Главное правило: не чинить вслепую. Сначала замер, потом одно действие, потом снова замер. Иначе легко потратить день на настройку кэша, а тормозил один баннер на главной, который дизайнер загрузил в исходном качестве с фотоаппарата.

Как проверить скорость сайта

Проверить скорость сайта можно бесплатно и без регистрации. Откройте Google PageSpeed Insights, вставьте адрес страницы и дождитесь отчёта. Там две вкладки: «Мобильные» и «Компьютер». Смотрите мобильную. Она почти всегда хуже, и именно её поиск учитывает в первую очередь.

Баллы в кружке — это удобно, но не главное. Важнее три показателя, которые Google называет Core Web Vitals. По ним сайт оценивают и поисковики, и живые люди, просто люди не знают, как эти показатели называются.

• LCP — за сколько секунд появился самый крупный элемент экрана: фото, заголовок, баннер. Хорошо, когда укладывается в 2,5 секунды.
• INP — как быстро страница реагирует на нажатие. Норма — до 200 миллисекунд. Если после тапа по меню ничего не происходит секунду, это оно.
• CLS — насколько скачет вёрстка, пока грузится страница. Хорошо, когда меньше 0,1. Классический пример: хотели нажать «Позвонить», а сверху вылез баннер, и вы нажали на рекламу.

Проверяйте не только главную. Возьмите страницу услуги, карточку товара, статью — то, куда люди реально приходят из поиска. Главную обычно вылизывают, а карточка товара с двадцатью фотографиями на 4G не открывается вообще.

Если хочется увидеть, что именно тормозит, откройте свой сайт в Chrome, нажмите F12, перейдите на вкладку Network, поставьте галочку Disable cache и в выпадающем списке выберите Fast 3G. Обновите страницу. Внизу появится список всего, что загрузил браузер, с размером и временем. Отсортируйте по размеру — и виновники окажутся сверху.

Сайт медленно грузится: причины, которые встречаются чаще всего

Набор причин из года в год почти не меняется. Вот они, примерно в порядке частоты.

1. Тяжёлые картинки. Фото с телефона весом в несколько мегабайт положили в слайдер как есть. Пять таких фото — и страница весит больше, чем иная программа.
2. Слишком много скриптов. Метрика, Analytics, пиксели соцсетей, онлайн-чат, виджет обратного звонка, карта, калькулятор, шрифты с чужого сервера. Каждый — отдельные запросы и работа для процессора телефона.
3. Нет кэширования и сжатия. Сервер собирает страницу заново для каждого посетителя и отдаёт файлы в несжатом виде. Это лечится настройкой, а не переделкой.
4. Слабый или перегруженный хостинг. Дешёвый тариф, где на одной машине живут сотни чужих сайтов. Ваш сайт ждёт очереди, и первый байт приходит через секунду-другую.
5. Плагины и темы CMS. WordPress с сорока плагинами или тема, купленная за красивое демо, которая тянет за собой десяток библиотек ради одной анимации.
6. Старый PHP и старый движок. Каждая новая версия PHP заметно быстрее предыдущей, а на многих сайтах стоит та, что была при запуске.
7. Блокирующие ресурсы в начале страницы. Скрипты и стили, которые браузер обязан скачать до того, как покажет хоть что-то.

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

Оптимизация скорости сайта: план по шагам

Шаг 1. Картинки

Самый дешёвый и самый заметный шаг. Каждую картинку нужно уменьшить до того размера, в котором она реально показывается: если баннер на экране шириной 1200 пикселей, файл в 4000 пикселей не нужен. Затем сжать и по возможности перевести в формат WebP — он даёт тот же вид при заметно меньшем весе. Для этого есть бесплатные сервисы вроде Squoosh или TinyPNG, а в большинстве CMS — плагины, которые делают это автоматически при загрузке.

Второе — отложенная загрузка. Картинки ниже первого экрана не должны грузиться, пока пользователь до них не долистал. Технически это атрибут loading="lazy" у картинки; в современных CMS он включается одной галочкой.

Шаг 2. Кэширование и сжатие

Кэширование бывает двух видов. Кэш страниц на сервере: сайт один раз собирает готовый HTML и потом отдаёт его всем, а не пересобирает из базы данных для каждого визита. Для WordPress это плагин, для Битрикса — встроенный композитный кэш, для самописных движков — настройка от разработчика. И кэш в браузере: заголовки, которые говорят посетителю «эти картинки и стили не менялись, не скачивай заново». Тогда вторая и третья страницы открываются почти мгновенно.

Сжатие — это gzip или brotli на сервере. Текстовые файлы (HTML, CSS, JavaScript) ужимаются в разы. Проверить просто: в той же вкладке Network кликните на любой файл и найдите в заголовках ответа строку content-encoding. Если её нет — сжатие выключено, и это одна из самых быстрых побед.

Шаг 3. Скрипты и виджеты

Выпишите всё, что подключено к сайту: счётчики, чаты, пиксели, виджеты. Рядом с каждым ответьте на вопрос «кто смотрит эти данные». Как правило, треть списка не нужна никому. Остальное можно загружать позже: чат — после первого скролла или по клику на иконку, карту — когда пользователь долистал до контактов. Шрифты лучше положить на свой сервер и оставить два-три начертания вместо восьми.

Шаг 4. Хостинг и движок

Если первый байт медленный, а сжатие и кэш уже включены, пора смотреть на хостинг. Что спросить у поддержки: какая версия PHP, есть ли HTTP/2, стоят ли SSD-диски, сколько сайтов на сервере. Переезд на нормальный тариф или VPS обычно даёт больше, чем месяц возни с плагинами. Для картинок и статики помогает CDN — сеть серверов, которая отдаёт файлы с ближайшей к посетителю точки.

Шаг 5. Замерить снова

Ту же страницу, в той же вкладке «Мобильные», в то же время суток. Сравните три показателя из начала статьи. Если цифры сдвинулись — шаг сработал, идите к следующему. Если нет — вы чинили не то, и это тоже полезно узнать до того, как потратите деньги.

Как ускорить сайт на телефоне

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

• Отдавайте телефону свои картинки, а не уменьшенные десктопные. Технически это атрибут srcset, который позволяет браузеру выбрать подходящий размер.
• Не грузите на мобильной версии то, что там не показывается: десктопный слайдер, скрытые блоки, видео-фон.
• Уберите всплывающие окна, которые появляются в первые секунды и сдвигают контент, — это и CLS, и раздражение.
• Проверьте, что кнопки и ссылки не слиплись: на маленьком экране промахнуться легко, и пользователь уходит.
• Тестируйте на настоящем телефоне через мобильный интернет, а не на Wi-Fi в офисе. Это самый честный замер.

Что можно сделать самому, а что отдать инженеру

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

Скорость сайта — это не одна большая проблема, а десять маленьких. Уберите пять самых тяжёлых, замерьте — и только потом решайте, стоит ли трогать остальные.

Если не хочется разбираться в отчётах самому, в кабинете ARTGK Code можно бесплатно проверить здоровье сайта: скорость, Core Web Vitals, аптайм и SSL показываются на одном экране, а рядом — что именно тянет страницу вниз. Мелкие правки делают инженеры по ставке 3 500 ₽ за час, полное ускорение сайта из маркетплейса стоит 14 900 ₽. Первый месяц тарифа «Бизнес» — бесплатно и без карты, так что замерить и понять масштаб можно, ничего не тратя.