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

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

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

Почему скорость важна для бизнеса

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

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

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

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

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

1. Лабораторные тесты. Инструменты проверки скорости от поисковых систем и браузерные инструменты разработчика показывают подробную картину загрузки и конкретные рекомендации.
2. Данные реальных пользователей. Системы аналитики и отчёты поисковиков о пользовательском опыте отражают то, что видят люди на разных устройствах и сетях.
3. Каскадная диаграмма загрузки. Показывает, какие файлы загружаются, в каком порядке и сколько каждый занимает времени.
4. Мониторинг сервера. Время ответа сервера, нагрузка на процессор и базу данных.

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

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

Самые частые причины медлительности

Разбирая сайты, которые приходят к нам на аудит, мы раз за разом видим одни и те же проблемы.

Тяжёлые изображения

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

Сторонние скрипты

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

Раздутые темы и плагины

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

Слабый хостинг и отсутствие кэширования

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

Быстрые победы: что можно сделать за несколько дней

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

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

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

Прежде чем устанавливать очередной виджет «для конверсии», проверьте, как он влияет на скорость. Иногда его удаление приносит больше заявок, чем его работа.

Глубокая оптимизация

Когда быстрые меры исчерпаны, а результат всё ещё не устраивает, нужна более серьёзная работа. Она требует участия разработчиков и тщательного тестирования.

1. Оптимизация критического пути отрисовки. Стили, нужные для первого экрана, встраиваются прямо в страницу, остальное загружается позже. Скрипты, которые не нужны для первоначального отображения, откладываются.
2. Разделение и минификация кода. Каждая страница загружает только тот код, который ей нужен, а файлы очищаются от лишних пробелов и комментариев.
3. Работа со шрифтами. Подключение только нужных начертаний и наборов символов, предзагрузка основного шрифта, корректное отображение текста до загрузки шрифта.
4. Серверное кэширование. Готовые страницы хранятся в памяти и отдаются без обращения к базе данных.
5. Оптимизация базы данных. Индексы, очистка устаревших данных, переписывание медленных запросов.
6. Сеть доставки контента. Статичные файлы раздаются с серверов, расположенных ближе к пользователю.
7. Переезд на более мощный сервер. Иногда это самое рациональное решение, особенно для интернет-магазинов с большим каталогом.

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

Как удержать скорость после оптимизации

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

Чтобы этого избежать, мы советуем:

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

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

Итоги: с чего начать ускорение

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

Что стоит запомнить:

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

Если ваш сайт кажется медленным или вы не уверены в его показателях, закажите у нас аудит — пришлите адрес сайта на [email protected], и мы подготовим список конкретных мер с оценкой эффекта.