Расскажите о вашей задаче
Гостевой пост

Как ускорить загрузку сайта на 30% — опыт маркетплейса Zakupka.com

Всем привет. Я маркетолог маркетплейса Zakupka.com, хочу поделится с вами опытом, как мы переписали фронтенд, тем самым ускорив загрузку сайта практически в два раза.

На сегодня Zakupka.com это 100 000 компаний, 15 млн товаров, 167 000 посетителей ежедневно. Мы входим в ТОП 3 крупнейших всеукраинских каталогов и услуг по данным liveinternet.ru.

Проекту Zakupka.com 13 лет. Когда мы стартовали — код сайта писали начинающие разработчики. За 11 лет код накопил в себе такое количество доработок и новых внедрений, что это привело к сложностями в поддержке сайта. Все чаще возникала потребность облегчить внедрение новых фич и дополнений. Так мы решили полностью переписать фронтенд-код проекта. Задача заняла у команды разработчиков более года и уже в декабре 2019-го мы включили новую версию сайта, разработанную с использованием react.js, на некоторых региональных поддоменах.

Что и как сделали, читайте в посте.

Сократили стили категорий

Css-стили — это совокупность кода, отвечающего за оформление веб-страниц. Css-стили в размере кода занимают не последнее место, особенно в таком крупном интернет-проекте как наш.

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

Перечень категорий на сайте Закупки

Перечень категорий на сайте

Мы разделили стили по роду важности: основные, второстепенные и стили отдельных страниц.

В результате получили такие показатели (без gzip-сжатия):

  • вес основных стилей — 79 кб;
  • вес второстепенных стилей — 77 кб.

И общий вес стилей отдельных страниц — 149 кб (всего 14 страниц — это около 10 кб на страницу).

Разделение позволило сократить стили каждой отдельной страницы почти в два раза.

Для сравнения:

Когда стили всего проекта были подключены на каждой странице:
79 + 77 + 149 = 305 кб
После оптимизации:
79 + 77 + 10 = 166 кб

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

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

Очистили тег head от «лишних» подключений

Когда в теге head подключаются стили и скрипты, это блокирует процесс обработки WEB-страницы браузером. Поэтому мы решили основной скрипт страницы сместить вниз, в конец тега body. Основные стили и стили страниц перенесли в тег style внутри head непосредственно на самой странице.

Перестали загружать все элементы контента, до которых посетитель еще не «дошел».

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

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

Стандартные скрипты чата Jivosite тоже неслабо грузят страницу — это связано с их размером. Поэтому мы создали свою кнопку для чата и перевели загрузку скрипта чата на клик по кнопке. Это позволило нам исключить 7 запросов (именно такое количество файлов необходимо для работы чата живосайт) с общим весом получаемых ресурсов 1,2 Мб (файлы скриптов Jivosite).

Удалили малоиспользуемые шрифты

После проверки шрифтов на сайте, оказалось что два шрифта «Light» и «Normal Italic» использовались крайне редко (например, блок «Истории успеха» на странице регистрации продавца). Конечно же, мы их удалили, сэкономив при этом 140 кб.

Что получили в итоге?

  • снизили расход трафика посетителей в 2 раза
  • сократили количество запросов, которые совершает браузер для загрузки и отображения страницы в 2,5 раза.

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

Показатель «всего» включает также сторонние скрипты статистики и ремаркетинга, шрифты и прочее. Цифры приведены в кб.

До и после

Страница

Скрипты

Стили

Картинки

Другое

Всего

Запросы, шт

Было

109

414

137

645

795

2100

125

Стало

97

200

22

114

500

933

48

Выросла наша оценка в Google Page Speed с 41 до 58 для мобильных и с 75 до 95 для десктопа:

Результаты до

Результаты после

По статистике Google Analytics среднее время загрузки нашего сайта сократилось с 6.4 до 4.4 сек.

4.4 сек — время полной загрузки страницы, то есть от момента нажатия на ссылку до момента полной готовности страницы для взаимодействия с пользователем. Сюда включается загрузка страницы, загрузка дополнительных ресурсов (стили, скрипты, шрифты, картинки и так далее) и выполнение скриптов.

Для посетителя же первые элементы на странице видны уже через 1.7 сек, как видно из показателей в Google Page Speed. Именно эта цифра определяет визуальное восприятие скорости загрузки сайта посетителем.

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

сайт маркетплейса в Беларуси

Что еще изменилось после обновления?

Во-первых, нам удалось ускорить и облегчить поддержку сайта. Ранее из-за запутанности кода на исправление незначительного бага могли потратить целый день. Например, была задача  сделать вывод атрибутов в фильтре в две колонки. На реализацию фронта ушло шесть часов. Сейчас аналогичную задачу можно выполнить за 5-10 минут.

что по скорости

Во-вторых, мы уменьшили код в два раза. А разработчики знают, чем меньше объем кода — тем меньше на сайте багов и тем быстрее он грузится.

.msg__overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.msg__body {
position: relative;
text-align: center;
min-height: 85px;
padding: 25px 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 500px;
}

После обновления кода нашего каталога, отдел разработки перешел к аналогичному обновлению кода конструктора интернет-магазинов наших клиентов. Совсем скоро пользователи ощутят позитивные изменения при использовании любого из наших продуктов.

Истории бизнеса и полезные фишки

13
2
5
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (0)

Последние комментарии

    Чтобы оставить комментарий, нужно войти

    Чтобы оставлять комментарии, переключитесь на профиль читателя

    Подписаться

    на самую полезную рассылку по интернет-маркетингу

    Самое

    обсуждаемое популярное читаемое
    Просматривая этот сайт, вы соглашаетесь с нашей политикой конфиденциальности — Принять