Разработка
Satom.ru
271

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

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

В закладки

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

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

  • Мы облегчили дальнейшую поддержку сайта - теперь затраты времени на добавление новых элементов и фич на сайте в разы меньше. Стоит еще отметить, что в старой версии от некоторых фич мы просто отказывались, ввиду неоправданно больших затрат на их внедрение.
  • Получили двукратное уменьшение количества кода, общий объем стилей удалось уменьшить с 585 кб до 306 кб, а объем скриптов - с 1250 кб до 600 кб. Меньше кода - меньше багов и более быстрая загрузка в браузере.

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

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

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

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

  • Основные - необходимые при загрузке страницы, то есть стили тех компонентов, которые могут быть видны посетителю непосредственно в момент загрузки;
  • Второстепенные - стили модальных окон, различных подсказок и других элементов, которые появляются при взаимодействии посетителя с сайтом;
  • Стили отдельных страниц.

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

  • Основные стили - 79 кб
  • Второстепенные стили - 77 кб
  • Стили отдельных страниц - 149 кб

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

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

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

  • основные (включая те, которые отвечают за списки товаров)
  • дополнительные - те, которые не нужны на странице со списками товаров.

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

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

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

  • Переместили основной скрипт вниз страницы, разместив его перед самым закрытием тега body.
  • Основные стили и стили для отдельных страниц (в случае необходимости их включения) разместили прямо на странице в тег style внутри head. Это добавило примерно 90кб к объему самой страницы. Второстепенные стили поместили в конце страницы перед закрытием тега body.

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

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

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

Чтобы не тормозить загрузку страницы дополнительными скриптами стандартного чата 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 декабря, поэтому изменение скорости загрузки хорошо заметно в сравнении между декабрем и январем.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Satom.ru", "author_type": "self", "tags": [], "comments": 6, "likes": -2, "favorites": 6, "is_advertisement": false, "subsite_label": "dev", "id": 110508, "is_wide": true, "is_ugc": true, "date": "Wed, 04 Mar 2020 13:18:22 +0300", "is_special": false }
0
6 комментариев
Популярные
По порядку
Написать комментарий...
0

Благодарим за наблюдательность. В нашем каталоге более 6 тыс. рубрик и мы постоянно работаем над его структурой - что-то добавляем, что-то объединяем, поэтому иногда случаются и такие казусы. Фото уже заменили, спасибо.

Ответить
0

Почему заодно дизайн хороший не сделали?!

Ответить
0

На кого предлагаете ориентироваться?

Ответить
0

Скрипты в футер переместили лол 😂
А нельзя было просто добавить defer?

Ответить
0

Конечно, можно и defer добавить и оставить подключение в head. Но в чем преимущество такого подхода перед обычным подключением скриптов внизу страницы?

Ответить

Прямой эфир