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

0
6 комментариев
Написать комментарий...
Стартапер-пессимист

Серьёзно?

Ответить
Развернуть ветку
Satom.ru
Автор

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

Ответить
Развернуть ветку
Альберт Штерн

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

Ответить
Развернуть ветку
Константин Александров

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

Ответить
Развернуть ветку
Альберт Штерн

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

Ответить
Развернуть ветку
Виталий А

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

Ответить
Развернуть ветку
3 комментария
Раскрывать всегда