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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И тестов на WebPageTest:

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

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