Кейс: оптимизировали скорость загрузки сайта в 10 раз

Поисковые системы «Яндекс» и Google уделяют много внимания скорости загрузки сайтов. Медленные ресурсы могут пессимизировать и они недополучат трафик. Поэтому, мы в процессе SEO-продвижения, всегда уделяем внимание скорости работы продвигаемого проекта. В этом кейсе на примере покажем, как происходит ускорение загрузки сайта.

Медленная загрузка по сути убивает всю поисковую оптимизацию сайта. Медленно грузящийся ресурс имеет много отказов, что отрицательно сказывается на поведенческих факторах. Соответственно в «Яндекс» сразу возникают проблемы.
Но, и поисковые краулеры (роботы) не любят такие сайты. Если документ медленно загружается, его вполне могут понизить в поисковой выдаче после очередного переобхода.
Коммерческая эффективность сайта также снижается. Часть пользователей не дождавшись полной загрузки ресурса уйдут к конкурентам. Зачастую «подтормаживают» отдельные элементы страницы, и потенциальный клиент может просто не увидеть искомую информацию, и отправиться искать ее в другое место.
Таким образом, скорость загрузки сайта оказывает комплексное влияние на SEO-продвижение. Медленная загрузка страниц уменьшает эффективность остальных работ.

Продвигаемый сайт при аудите показал медленную скорость загрузки контента. Проверка проводилась с помощью PageSpeed Insights. Показатели на момент проверки:

• Мобильная версия 31-43 баллов, находится в красной зоне
• ПК версия от 46-51 баллов, красная зона с редким заходом в желтую зону.

При этом реальная скорость загрузки сайта в консоли в секундах: от Load: 4.92 s до Load: 7.89 s и выше. На скриншоте ниже показан замер скорости сайта с минимальной скоростью.

В некоторых случаях сайт показывал еще более медленный результат. Скорость могла достигать 7,85–7,95 ms. На скриншоте показан пример такой «удачной» загрузки

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

Перед началом работ изучили аудит и выделили основные направления для работы. Это необходимо чтобы понять с помощью каких действий возможно увеличить производительность сайта. В случае с ускорением загрузки интернет-ресурса не может быть единого рецепта, иногда оказывается, что поднять этот параметр без серьезной переделки сайта. А подобное решение не всегда возможно, например, когда основным лидогенерующим элементом оказывается калькулятор или квиз, и как раз они тормозят сайт.
Также прежде чем начинать работы обязательно делаем бекап. Так мы защищаем проект от возможных случайностей. Если в какой-то момент окажется, что действие по ускорению сайта нарушает его работу, можно быстро восстановить его из бекапа.

Сайт сделан на Wordpress, поэтому было решено не трогать сервер. Работали только с ускорением самих документов. Сделали копию сайта, чтобы протестировать возможности по ускорению, без риска «положить» рабочие страницы. Только после того как убедились в том, что примененные методы работают как полагается, занялись переносом настроек на рабочий сайт. Вот какие изменения были внесены.
Для начала обратили внимание на скорость обработки JavaScript. Загрузка скриптов занимала значительную часть всего рендеринга страницы. Инструмент для тестирования, рекомендовал сократить время работы в основном потоке. Для этого после установки плагина W3 Total Cache, включили в его настройках минификатор JavaScript кода. Использовали для этого сайта настройку со значением — JSMin (default).

Следующий этап это работа с изображениями. На сайте было одно изображение, отрисовка которого съедала значительную часть скорости. У проблемы было два способа решения: загрузить изображение с меньшим размером или применить плагины для автоматической оптимизации картинок. Решили применить второй способ. Заодно это устраняет вероятность появления подобных проблем в дальнейшем.

Возникали проблемы при загрузки CSS. Для решения задачи подходит плагин W3 Total Cache. Этот плагин отключает при загрузке неиспользуемый код CSS. Заодно настроили отложенную загрузку не важных для качественной работы сайта элементы.

После предыдущего этапа проверили работоспособность сайта. При работе с CSS и второстепенными элементами сайта, всегда есть риск получить проблемы с версткой и отдельными компонентами загружаемого документа.
В отчете отмечена проблема с загрузкой JS-кода счетчиков аналитики. Разобраться с ними сложнее, оптимизация общего JS-кода с помощью плагина не дает эффекта. Пришлось исправлять код скрипта самостоятельно, фактически сделав отложенную загрузку. Здесь также пришлось проверять работоспособность такого подхода, но смотрели уже не на внешний вид ресурса. Тестировали правильность передачи данных в системы аналитики.

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

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

Теперь посмотрим на результаты в тесте PageSpeed Insights. Сначала посмотрим сколько баллов сайт набирал до работ по ускорению. Смотреть будем вкладку «Мобильные устройства». Google при ранжировании учитывает в основном технические показатели мобильной версии. Основной трафик сейчас идет с мобильных устройств. На скриншоте видно, что производительность сайта всего 33 балла. Это маленький показатель

Обратимся к PageSpeed Insights уже после проведенных работ. Здесь также смотрим на показатель производительности. В этот раз тестирование дало сайту 93 балла, это достойный результат.

Помимо баллов имеет смысл посмотреть эффективность работ в понятных цифрах. В том же PageSpeed Insights посмотрим на скорость загрузки страницы в секундах. Как видно на скриншоте, изначально время до появления первых элементов на экране составляло 6,1 секунду, а самое крупное изображение отрисовывалось 13,7 секунд.

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

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

Поисковые роботы учитывают скорость загрузки сайтов, и могут пессимизировать медленные страницы. Работа с ускорением загрузки документов на сайте дает дополнительное преимущество перед конкурентами в поисковой выдачи.
Клиентский сайт имел проблемы с медленной загрузкой, наши специалисты выяснили в чем причина такой некорректной работы ресурса. Выявили те места на которые можно обратить внимание при ускорении сайта, и устранили недочеты. В результате получилось увеличить скорость загрузки примерно в 10 раз.
Из этого кейса делаем следующие выводы:

• На скорость загрузки сильно влияет неоптимизированный JS-код. После его доработки сайт значительно ускоряется.
• Неиспользуемый CSS-код все равно загружается и замедляет сайт. Лучше его отключить.
• Тяжелые изображения негативно влияют на рендеринг страниц. Рекомендуется или снижать вес картинок перед загрузкой, или использовать дополнительные плагины или модули уже на самом сайте.