Оставить заявку

Кейс: ускорение сайта на Битрикс за 6 шагов для фонда «Бельканто»

Ускорение и оптимизация сайта в современном мире — вещь необходимая. Как для удобства использования сайта в виде быстрой загрузки, так и для улучшения позиций в поисковых системах. В этом кейсе расскажем, как за 60+ часов удалось ускорить сайт из красной зоны в зеленую.

Стартовая позиция

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

1. Замеры PageSpeed Insights показывали 10 для мобильной версии и 57 для компьютеров.

На мобилке (слева) — 10, на десктопе (справа) — 57

На мобилке (слева) — 10, на десктопе (справа) — 57

2. Тест на сервисе GTmetrix. Использовалось два варианта теста — на скорости 3G Mobile и максимально высокой скорости. Но в обоих результатах мы увидели максимально низкую оценку F.

 Mobile (Мобильная версия)
Mobile (Мобильная версия)
Cable (версия для десктопа)
Cable (версия для десктопа)

3. Следующим был замер через сервис WebPageTest. Здесь также было два теста — один проверял скорость загрузки мобильной версии сайта, а второй десктопной.

Mobile (мобильная версия)
Mobile (мобильная версия)
Cable (версия для десктопа)
Cable (версия для десктопа)

4. Ну и ,напоследок, замерили скорость загрузки через старый добрый Google Chrome, также в двух вариантах. На скорости Fast 3g получили скорость загрузки в 21,97 секунд, на максимальной скорости — 1,86 секунд.

План действий

Мы проанализировали результаты тестов и сразу обратили внимание, что огромное количество запросов ведет на различные метрики, YouTube, соцсети, шрифты и т.п. Это и стало первым пунктом в нашем плане!

  1. Сократить количество запросов к внешним ресурсам.
  2. Оптимизировать загрузку JS.
  3. Обработка и отложенная загрузка изображений.
  4. Настройка и оптимизация работы сервера и Bitrix.
  5. Отключение не влияющих на функционал сайта файлов ядра Битрикса и сжатие html через init.php.
  6. И напоследок, после выполнения всего описанного выше - отработка замечаний после проведения промежуточных тестов.

Оптимизация JS

Начали мы все же с оптимизации JS. Здесь можно выделить два основных подпункта:

Перенос файлов JS

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

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

Отложенная загрузка JS

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

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

 

Сокращение количества запросов к внешним ресурсам

Запросов было огромное количество — около 150. Были и очень “тяжелые” запросы, как, например, YouTube или Яндекс-карты. В итоге все не участвующие в отображении страницы запросы были отложены до первой активности пользователя и настроены на асинхронную загрузку. Наиболее наглядно проделанную работу по этому пункту отображает карта запросов:

Было/Стало

Обработка и отложенная загрузка изображений

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

Настройка и оптимизация работы сервера и Bitrix

Кэширование сайта в Bitrix было уже настроено, но требовало точечной донастройки, что и было сделано нами. Так же через битрикс была произведена оптимизация базы данных. Но одним из самых главный и важных пунктов было произвести настройку nginx для gzip сжатия. Был выставлен максимальный уровень сжатия 9. Именно gzip сжатие позволило ощутимо ускорить загрузку страниц сайта.

Отключение файлов ядра Битрикса

Также была произведена работа с файлом init.php для оптимизации сайта. Были отключены не влияющие на функционал, но сильно откладывающие загрузку страницы kernel-файлы. Было произведено сжатие html, но впоследствии отключено, так как влияло на редактирование контента непосредственно через сайт (без входа в административный раздел). Вообще любая работа с файлом init.php должна производиться максимально осторожно, так как этот файл напрямую влияет на работоспособность как всего сайта в целом, так и почти на любую из составляющих сайта.

Рекомендации PageSpeed Insights

После выполнения всех вышеописанных действий, мы вручную проверяли и проводили замер скорости для каждой страницы сайта, чтобы устранить недочеты, имевшие место для каких-то конкретных страниц. Например, на некоторых страницах сильно проседала оценка скорости из-за совокупного смещения макета (CLS). Тогда мы открывали макет и вносили правки, чтобы при загрузке страница не “прыгала”. Одновременно мы проверяли работоспособность каждой страницы и редактировали код, подключали необходимые скрипты там, где это было необходимо, а не в общем для всего сайта, как это было реализовано изначально.

Итоги работы

По результатам работы, занявшей чуть меньше недели, скорость загрузки сайта по различным тестам увеличилась для мобильной версии в 2,5 — 5 раз, для десктопа — в 2,5 — 3 раза. Очень многозначительно о проведённой работе говорят оценки PageSpeed Insights, где оценка для десктопа выросла в 2 раза, а для мобильной версии в 7 раз!

На мобилке (слева) — 75, на десктопе (справа) — 99, после оптимизации

На мобилке (слева) — 75, на десктопе (справа) — 99, после оптимизации

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

 

Результаты тестов на сервисе GTmetrix:

Mobile (мобильная версия после ускорения)
Mobile (мобильная версия после ускорения)
Cable (версия для десктопа после ускорения)
Cable (версия для десктопа после ускорения)

И тестов на WebPageTest:

 Mobile (мобильная версия после ускорения)
Mobile (мобильная версия после ускорения)
Cable (версия для десктопа после ускорения)
Cable (версия для десктопа после ускорения)

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

Вывод

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

Хотите ускорить свой сайт?

Обращайтесь, сделаем сайт быстрым!

Рекомендуем почитать

Хотите попробовать с нами?

Оставьте заявку или позвоните нам по номеру 8 (800) 775-67-49.

Оставить заявку
след самолета
Нажмите и держите для максимального увеличения