Создание панели мониторинга веб-производительности и оптимизация JavaScript, ресурсов и домашней страницы для достижения успеха в бизнесе.
Tokopedia — одна из крупнейших компаний электронной коммерции в Индонезии. Имея более 2,7 млн общенациональных торговых сетей, более 18 млн товарных списков и более 50 млн посетителей в месяц, веб-команда знала, что инвестиции в производительность сети необходимы. Создав культуру, ориентированную на эффективность, они добились увеличения рейтинга кликов (CTR) на 35% и увеличения конверсий (CVR) на 8%.
35 %
Увеличение CTR
8 %
Увеличение CVR
4 секунды
Улучшение TTI
Подчеркивая возможность
Веб-команда поговорила со своим руководством о важности инвестиций в веб-производительность для улучшения пользовательского опыта и вовлеченности, а также продемонстрировала влияние производительности с использованием передовых шаблонов и API.
Подход, который они использовали
JavaScript и оптимизация ресурсов
Блокировка рендеринга или длительная работа JavaScript — частая причина проблем с производительностью. Команда предприняла несколько шагов, чтобы свести это к минимуму:
- Создана библиотека контроллера сценариев для выборочной загрузки сторонних сценариев для оптимизации критического пути рендеринга.
- Заменены более тяжелые библиотеки на более легкие.
- Реализовано разделение кода и оптимизировано для содержимого, расположенного выше сгиба.
- Реализована адаптивная загрузка , например загрузка только изображений высокого качества для устройств в быстрых сетях и использование изображений более низкого качества для устройств в медленных сетях.
- Лениво загружаемые изображения ниже сгиба.
- Отложенная загрузка некритического JavaScript.
Оптимизация домашней страницы
Команда использовала Svelte для создания облегченной версии домашней страницы для новых посетителей, гарантируя быструю работу с сайтом. В этой версии также использовался сервис-воркер для кэширования необлегченных ресурсов в фоновом режиме.
Бюджетирование и мониторинг эффективности
Команда создала панель мониторинга производительности с использованием Lighthouse и других инструментов для улучшения качества веб-страниц:
- Измеряет качество сети, мониторинг инфраструктуры, производительность внешнего интерфейса и производительность сервера.
- Использует комбинацию API-интерфейсов веб-платформы (таких как API синхронизации ресурсов и заголовок
Server-Timing), API PageSpeed Insights (PSI) и данные отчета об опыте пользователя Chrome для мониторинга показателей на местах и в лаборатории. - Анализирует изображения из Lighthouse, чтобы определить возможности оптимизации изображений.
- Обеспечивает соблюдение бюджета размера пакета во время непрерывной интеграции (CI). Выполнение CI завершается неудачей, если размер пакета превышает бюджет.
Поскольку мы занимаемся электронной коммерцией, привлечение пользователей лежит в основе нашего успеха. Мы признаем важность Интернета и поэтому стремимся инвестировать во все инструменты и функции, которые обеспечат нашим пользователям лучший пользовательский опыт.
Денди Сунарди, технический менеджер веб-платформы Tokopedia
Посетите страницу масштаба онлайн-кейсов, чтобы узнать больше историй успеха из Индии и Юго-Восточной Азии.