Исходная ситуация

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

Все измерения мы проводим с помощью собственного экземпляра системы WebPagetest с использованием соединения 3G Fast и браузера Chrome.

В данном случае серверная часть справлялась удовлетворительно. Время до первого байта при использовании 3G Fast составляло чуть больше секунды с учётом времени подключения.

Таким образом, обращаем основные усилия на клиентскую часть. И здесь ситуация действительно плачевная: главная страница начинает рендериться через 53 (!) секунды после начала загрузки сайта. Конечно, такие показатели находятся за гранью приличий и приводят к значительным потерям аудитории, а также эффективности рекламных кампаний.

Результаты анализа

Чтобы найти основную причину проблемы нам пришлось подробно изучить процесс рендернига сайта с помощью инструментов разработчика браузера. Картина выглядела странно: основные ресурсы для начальной отрисовки (HTML, CSS, шрифты) загружались достаточно быстро, но рендеринг не запускался. Единственной причиной такого поведения может стать код JavaScript, который искусственно замедляет отрисовку страницы.

Действительно, мы нашли кусок кода, который откладывал показ реального контента до наступления события Load. А это событие в свою очередь наступает при загрузке всех основных элементов страницы, включая все картинки (даже те, которые не показываются сразу). Видимо, идея разработчиков была в том, что пользователь должен увидиеть сайт сразу "во всей красе", а не ждать догрузки элементов на лету. Однако, они не учли большого веса сайта (более 10 МБ) и условий медленных подключений.

Решение проблемы лежало на поверхности: перенести начало инициализации рендернига на более раннее событие: DOMContentLoaded, которое наступает при формировании DOM для документа. То есть мы должны загрузить основной HTML-документ, CSS и JS, после чего можно начинать показ страницы. Объём этих ресурсов в разы меньше и все они загружаются с высоким приоритетом.

Кроме того, мы прошлись традиционными методами оптимизации для сокращения трафика сайта. В первую очередь это эффективное сжатие текстовых ресурсов (CSS, JS). Также провели настройку Битрикса на использование встроенных оптимизаций подкдючения CSS и JS. С точки зрения объёма страницы основным компонентом традиционно были картинки. Мы сократили их объём на главной странице в 2 раза без потери визуального качества.

Результаты ускорения

Решение всех основных проблем в клиентской части позволило кократить время начала рендеринга более чем в 10 раз: с 53 секунд до 4 секнуд. Трафик главной страницы сократился примерно в 2 раза: с 10 до 5 мегабайт.

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

Перейти на сайт