Поиск корреляции между производительностью сайта и бизнес-показателями стал ключом к успеху их усилий по оптимизации.
Swappie — успешный стартап по продаже восстановленных телефонов. В течение нескольких лет они отдавали приоритет добавлению новых функций, а не производительности сайта, однако, когда они заметили, что бизнес-результаты мобильного сайта отстают от версии для настольных компьютеров, произошел сдвиг. Они сосредоточились на оптимизации производительности и вскоре увидели рост доходов от мобильной связи.
42 %
Увеличение дохода от мобильных посетителей
10 чел.*
*процент увеличения Rel mCvR
Подчеркивая возможность
Относительный коэффициент конверсии для мобильных устройств (Rel mCvR) рассчитывается путем деления коэффициента конверсии для мобильных устройств на коэффициент конверсии для настольных компьютеров. Существует множество возможностей для отслеживания показателей скорости, но связать их с бизнес-показателями может быть довольно сложно. Поскольку одни и те же кампании и сезонность охватывают как мобильные, так и настольные устройства, метрика Rel mCvR исключает влияние этих внешних параметров и показывает только, улучшается мобильный сайт или нет.
Средний показатель для десяти крупнейших сайтов электронной коммерции в США составляет 50 % , а для Swappie — 24 %. Это указывало на то, что у мобильного сайта возникли проблемы и что компания упускала доход, что привело к запуску проекта по повышению производительности.
Измерение влияния улучшения производительности
Сваппи использовал Google Analytics, чтобы настроить ежедневное отслеживание Rel mCvR и среднего времени загрузки страницы на мобильных устройствах, используя этот шаблон электронной таблицы . (Прочтите инструкции по использованию электронной таблицы .) Они также начали отслеживать основные веб-показатели через Google Analytics и BigQuery . После внедрения отслеживания разработчики начали работать над производительностью сайта.
Всего через три месяца работы эффект был очевиден: показатель Rel mCvR увеличился с 24% до 34%, а доход от мобильной связи увеличился на 42%!
23 %
Более низкое среднее время загрузки страницы
55 %
Нижняя ЛКП
91 %
Нижний CLS
90 %
Нижний ПИД
Оптимизации
Оптимизация для LCP и CLS
Команда разработчиков Swappie обнаружила, что есть много возможностей для улучшения мелких вещей, на которые долгое время не обращали внимания. Изучение сайта в разных окнах просмотра и на разных языках выявило проблемы с LCP и CLS, которые было легко решить и которые оказали большое влияние на общую производительность. Например, рендеринг элемента LCP на сервере, а не на клиенте, когда это возможно, приводил к уменьшению LCP.
Обнаружить изменения макета было непросто, поскольку они могли сильно различаться в зависимости от области просмотра и подключения. Получив от пользователей основные веб-показатели для своей аналитики , они поняли, что находятся на правильном пути, поскольку CLS снизился.
Изображений
Изображения были оптимизированы с помощью предварительной загрузки, отложенной загрузки и правильного размера. Они предварительно загружают основные изображения (например, LCP), а изображения за пределами области просмотра загружают только при необходимости.
Шрифты
Оптимизированные шрифты Swappie путем переключения провайдера. Это оказало большое влияние, поскольку им нужен был оптимальный способ обработки шрифтов, необходимых для разных языков.
Сторонние скрипты
Swappie приложил немало усилий для проверки каждого стороннего скрипта и виджета, места их использования и предоставляемых ими функций. После обсуждений со всеми заинтересованными сторонами они разработали план по снижению влияния скриптов на сайт, сохранив при этом функциональность. Удалили лишнее и оптимизировали остальное, существенно уменьшив количество стороннего JavaScript на сайте.
Удаление неиспользуемого кода и оптимизация бандлинга
Оптимизация импорта и удаление неиспользуемых JS и CSS способствовали небольшому улучшению производительности сайта Swappie, однако эти небольшие улучшения со временем накапливаются. Они также оптимизировали настройку своих пакетов.
Создание культуры производительности в Swappie
Достигнутый Swappie результат обусловлен не только изменениями в коде, но и изменениями в организации и ее приоритетах.
Руководитель разработки Теему Хуовинен поясняет:
Вам необходимо связать скорость сайта с бизнес-показателями, чтобы по-настоящему подчеркнуть ее важность. Все сводится к расстановке приоритетов, когда у вас мало времени и ресурсов, а это всегда так. Приоритезация потребительской ценности — это правильный путь, но слишком легко сосредоточиться на новых функциях и более прямых улучшениях конверсии, если вы считаете, что скорость сайта только улучшает «ощущение» сайта. Связать скорость сайта с бизнес-показателями не всегда легко, и здесь нам очень помог расчет с помощью Rel mCvR .
Теему Хуовинен
Как только команде разработчиков была предоставлена возможность в течение квартала полностью сосредоточиться на скорости сайта, у них появилась дополнительная мотивация погружаться глубже.
Сочетание нашего влияния с ростом нашей команды делает его еще более впечатляющим. Четверо из семи наших разработчиков начали работу в течение месяца, когда мы начали работать над производительностью. Надо отдать должное команде, просто удивительно, как нам удалось сплотиться вокруг этой темы и оказать такое большое влияние.
Теему Хуовинен
Теему также отмечает, что с самого начала важно потратить время на составление планов на основе данных, изучение того, как использовать вкладку «Производительность DevTools» и настройку пользовательской аналитики, прежде чем вносить какие-либо улучшения. Графики (особенно те, которые идут в правильном направлении) — отличный источник обратной связи и подтверждения вашей работы! Анализ основных веб-показателей в полевых условиях наряду с оценками Lighthouse (лабораторными данными) помог им сосредоточиться на оптимизации правильных вещей, которые затрагивают большинство людей.