Ускорение работы сайта

Наш проект стартовал в 2012 году, шло время, вносилось множество доработок, но поддержка становилась все более тяжелой в силу разных причин. От реализации некоторых идей порой приходилось отказываться из-за неоправданно большого времени на их внедрение. И, спустя  6 лет после нашего старта, мы решили переписать с нуля наш фронтенд-код. К концу 2019 года мы закончили полное обновление кода фронтенд части нашего маркетплейса, попутно переведя его на react.js

Помимо облегчения дальнейшей поддержки, мы также получили двукратное уменьшение количества кода. Общий объем стилей уменьшился с 585 кб до 306 кб, а объем скриптов сократился с 1250 кб до 600 кб. Цифры приведены с учетом минификации файлов. Также мы провели ряд работ по оптимизации, которые были представлены в отчете Google Page Speed. Речь о них пойдет ниже.

Сразу необходимо отметить, что в процессе обновления кода мы также ставили перед собой цель - максимально ускорить работу страниц со списками товаров. Именно эти страницы самые посещаемые (более 90% просмотров) и являются точками входа на сайт. Среди многочисленных способов оптимизации фронтенд-части хотим выделить те, которые дали наиболее заметный результат.

Максимальное уменьшение размеров стилей и скриптов. 

У нас достаточно много css-стилей, но всё свести к минималистичному дизайну ради их уменьшения мы не можем. Поэтому мы их разбили на три категории:

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

Вот, что у нас получилось (вес файлов без gzip-сжатия):

• Основные стили - 79 кб
• Второстепенные стили - 77 кб
• Стили отдельных страниц - 149 кб (14шт - в среднем по 10кб на страницу)

После разделения удалось уменьшить количество стилей почти в 2 раза для каждой отдельной страницы 

• Было 79 + 77 + 149 = 305 кб
• Стало 79 + 77 + 10 = 166 кб

Что же касается скриптов, то их мы разделили на две категории: основные (включая отвечающие за список товаров) и дополнительные - которые не нужны на странице со списком товаров. Получилась не такая заметная экономия, но все же на страницах со списком товаров будет грузиться на 20% меньше скриптов, чем на всех остальных страницах.

• Основные - 480 кб
• Скрипты для второстепенных страниц - 114 кб

Удаление подключения файлов стилей и скриптов, находящихся в теге head и блокирующих отрисовку страницы.

По данной рекомендации мы предприняли следующие действия:

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

Таким образом, у нас не осталось ни одного ресурса, который надо получить перед отрисовкой страницы посетителю.

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

Этот пункт достаточно логичен - зачем грузить достаточно объемные элементы контента, до которого пользователь еще не доскролил? Поэтому мы постарались перевести все изображения на основных страницах в режим отложенной загрузки. Это значит, они будут подгружаться и появляться на странице по мере того, как посетитель будет скролить страницу и часть страницы, содержащая изображение, будет попадать в поле видимости. 

По изображениям:

• Было - 645 кб
• Стало - 114 кб

Также изменили дизайн кнопки для чата jivosite, и перевели его скрипт на загрузку при клике на кнопку. Таким образом, при загрузке страницы мы сэкономили 7 запросов на 1200 кб.

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

Итоги 

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

	Страница	Скрипты	Стили	Картинки	Другое	Всего	Запросы, шт
Было	1016	1250	585	856	2390	6100	125
Стало	491	600	77	114	1118	2400	48

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

	Страница	Скрипты	Стили	Картинки	Другое	Всего	Запросы, шт
Было	109	414	137	645	795	2100	125
Стало	97	200	22	114	500	933	48

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

Благодаря обновлению кода и оптимизациям, наша оценка в Google Page Speed поднялась с 41 до 58 для мобильных устройств и с 75 до 95 для ПК.

 

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