Скорость загрузки сайта: как ускорить

Опубликовано: 8 января  |  Рубрика: Создание сайтов  |  Автор: мастер «Гизмы»
Скорость загрузки сайта: как ускорить

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

Почему скорость так важна

  • Конверсия. Чем дольше грузится страница, тем больше людей уходит, не дождавшись. Особенно чувствительны мобильные пользователи с нестабильным интернетом.
  • Поисковое ранжирование. Поисковые системы учитывают скорость и удобство загрузки как один из факторов. При прочих равных быстрый сайт окажется выше.
  • Стоимость рекламы. Вы платите за клик, а человек уходит до загрузки. Медленный сайт увеличивает стоимость каждой заявки.
  • Нагрузка на сервер. Неоптимизированный сайт требует больше ресурсов, и при наплыве посетителей хостинг может просто не выдержать.

Как измерить скорость загрузки

Ощущения «вроде быстро» недостаточно. Используйте инструменты:

  • онлайн-сервисы анализа скорости страниц от поисковых систем — они показывают оценку и конкретные рекомендации отдельно для мобильных и компьютеров;
  • вкладку Network и Lighthouse в инструментах разработчика браузера (F12): видно, какие файлы загружаются, сколько весят и сколько времени занимают;
  • отчёты о скорости в панелях вебмастеров, основанные на данных реальных пользователей;
  • мониторинг доступности, который регулярно проверяет время ответа сервера.

Проверяйте не только главную, но и типовые внутренние страницы: карточку товара, страницу услуги, статью блога. Часто главная оптимизирована, а каталог грузится вдвое дольше.

Ключевые метрики

МетрикаЧто показываетОриентир хорошего значения
TTFBвремя до первого байта ответа серверадо 0,6–0,8 секунды
LCPкогда отрисован самый крупный элемент первого экранадо 2,5 секунды
INPнасколько быстро страница реагирует на действиядо 200 миллисекунд
CLSнасколько «прыгает» вёрстка при загрузкедо 0,1

Если TTFB большой, проблема на стороне сервера или движка. Если сервер отвечает быстро, а LCP плохой — виноваты тяжёлые изображения, шрифты и скрипты.

Изображения: главный источник лишнего веса

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

  1. Уменьшайте размер до реально нужного. Если изображение показывается шириной 800 пикселей, не нужно загружать файл шириной 4000.
  2. Используйте современные форматы WebP или AVIF: при том же качестве они весят на 25–50% меньше JPEG.
  3. Сжимайте. Качество 75–85% визуально неотличимо от исходника, а вес падает в разы.
  4. Включите отложенную загрузку (lazy loading) для картинок ниже первого экрана — они подгружаются, только когда пользователь до них прокручивает.
  5. Указывайте размеры изображений в вёрстке, чтобы браузер заранее резервировал место и страница не прыгала.
  6. Отдавайте разные размеры разным экранам — телефону не нужна картинка для широкого монитора.

Большинство CMS умеют делать это автоматически с помощью модуля оптимизации, достаточно правильно его настроить.

Серверная часть и хостинг

Если сервер долго думает перед тем, как отдать страницу, никакая оптимизация картинок не поможет. На что обратить внимание:

  • Кеширование страниц. Вместо того чтобы при каждом запросе собирать страницу из базы данных, сервер отдаёт готовую копию. Время ответа сокращается в разы.
  • Кеширование объектов. Хранение результатов частых запросов к базе в оперативной памяти.
  • Актуальная версия PHP или другого языка. Переход со старой версии на современную часто даёт прирост производительности без единой строки нового кода.
  • Сжатие ответа gzip или Brotli: текстовые файлы передаются в сжатом виде.
  • HTTP/2 или HTTP/3 — позволяют параллельно загружать множество файлов по одному соединению.
  • Адекватный тариф. Если сайт упирается в лимиты процессора, самая дешёвая оптимизация — перейти на тариф повыше или на VPS.
  • Расположение сервера близко к аудитории. Для крупных проектов — CDN, раздающая статические файлы с ближайшего к пользователю узла.

Скрипты, стили и шрифты

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

  • проведите ревизию и удалите виджеты, которыми никто не пользуется;
  • подключайте некритичные скрипты с атрибутами defer или async, чтобы они не блокировали отрисовку;
  • загружайте тяжёлые элементы вроде карт и видео по клику, показывая вместо них статичную превью-картинку;
  • объединяйте и минифицируйте CSS и JavaScript, убирайте неиспользуемые стили;
  • ограничьте число шрифтов и их начертаний, используйте формат WOFF2 и параметр font-display: swap, чтобы текст появлялся сразу.

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

Плагины и движок

На популярных CMS скорость часто убивает избыток модулей. Каждый плагин добавляет свои запросы к базе, стили и скрипты — иногда на всех страницах, даже там, где он не используется. Что делать:

  1. Составьте список всех плагинов и отметьте, какие действительно нужны.
  2. Удалите неиспользуемые, а не просто деактивируйте.
  3. Замените несколько мелких плагинов одним комплексным или небольшой доработкой кода.
  4. Проверьте, нет ли в базе данных мусора: тысяч ревизий записей, устаревших временных данных, логов.
  5. Выберите лёгкую тему оформления вместо «универсального» шаблона с сотней встроенных функций.

Как сохранить скорость после оптимизации

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

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

С чего начать: порядок действий

Если времени мало, двигайтесь по списку — от самого эффективного к менее заметному:

  1. Замерить скорость ключевых страниц и сохранить результаты для сравнения.
  2. Оптимизировать изображения.
  3. Включить кеширование и сжатие на сервере.
  4. Убрать лишние скрипты и виджеты.
  5. Обновить версию PHP и почистить плагины.
  6. Повторно замерить и сравнить с исходными данными.

Не забывайте делать резервную копию перед изменениями: агрессивная оптимизация скриптов иногда ломает формы или слайдеры, и важно быстро вернуться назад.

Итог

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

Специалисты «Гизмы» в Новосибирске проведут аудит скорости, найдут узкие места и ускорят ваш сайт — от оптимизации изображений до настройки сервера. Эти работы можно заказать разово или в составе поддержки сайтов, чтобы скорость не проседала после каждого обновления.

Последнее обновление: 8 января

Комментарии

Комментариев пока нет. Будьте первым — задайте вопрос мастеру или поделитесь опытом.

Написать комментарий