Как мы ускорили загрузку сайта на 30%: опыт маркетплейса Satom.ru

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

Полное обновление клиентской части кода кода заняло у нашей команды разработчиков более года, и к концу 2019-го мы запустили новую версию Satom.ru, основанную на react.js.

Какие изменения мы получили в результате обновления?

Важна ли скорость загрузки для посетителей нашего маркетплейса?

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

Уменьшили размеры стилей

В любом, достаточно крупном интернет-проекте, сайт которого имеет множество страниц, соответственно много и кода, который за ним стоит. Не последнее место занимают css-стили. У нас их тоже достаточно много и уменьшить их количество путем реализации более минималистического дизайна мы не могли, поэтому все стили разделили на три части:

Таким образом нам удалось выделить три категории файлов стилей:

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

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

Для работы по оптимизации веса скриптов, мы разделили их на две категории:

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

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

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

Убрали загрузку изображений и другие элементов контента, которые не видны посетителю

Зачастую замедление загрузки страниц сайта связано с загрузкой достаточно объемных элементов контента, до которого пользователь еще не доскролил. Мы просто перевели все изображения на основных страницах в режим отложенной загрузки (они будут подгружаться и появляться на странице по мере того, как посетитель будет скролить страницу и часть страницы, включающая изображение, будет попадать в поле видимости).

Оптимизировали скрипт чата

Чтобы не тормозить загрузку страницы дополнительными скриптами стандартного чата jivosite - сделали свою кнопку и перевели скрипт чата на загрузку при клике на кнопку. Таким образом удалось сэкономить при загрузке страницы на 7 запросах с общим объемом получаемых ресурсов 1,2 мегабайта.

Убрали лишние шрифты

Еще проверили, как обстоят дела со шрифтами на сайте. Как оказалось, два шрифта “Light” и “Normal Italic” использовались в единичных и малозаметных местах. Их удаление позволило сэкономить еще 140 кб.

Какой результат?

Расход трафика у посетителей снизился более, чем в 2 раза, количество запросов при этом сократилось в 2.5 раза.

Далее приведена сравнительная таблица по количеству запросов и объем страниц.

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

Реальный расход трафика посетителя с учетом gzip сжатия:

Благодаря обновлению кода и оптимизациям в Google Page Speed наша оценка поднялась с 41 до 65 для мобильных и с 75 до 97 для десктопа.

Что же касается временных показателей, то согласно статистике Google Analytics, среднее время загрузки нашего сайта сократилось с 6.4 до 4.4 сек.*

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