Используя реальные инструменты мониторинга пользователей и сосредоточив внимание на улучшении основных веб-показателей при рефакторинге своего приложения, они также улучшили CLS на 72 %, а также скорость реагирования приложений.
Agrofy — это онлайн-торговая площадка для рынка агробизнеса Латинской Америки. Они подбирают покупателей и продавцов сельскохозяйственных машин, земли, оборудования и финансовых услуг. В третьем квартале 2020 года команда разработчиков Agrofy из четырех человек потратила месяц на оптимизацию своего веб-сайта, поскольку предположила, что повышение производительности приведет к снижению показателей отказов. Они специально сосредоточились на улучшении LCP , который является одним из основных веб-жизненных показателей . Такая оптимизация производительности привела к улучшению LCP на 70 %, что коррелировало со снижением количества прерываний нагрузки на 76 % (с 3,8 % до 0,9 %).
70 %
Нижняя ЛКП
76 %
Меньший отказ от нагрузки
Проблема
Изучая их бизнес-показатели, команда разработчиков Agrofy заметила, что их показатели отказов кажутся выше отраслевых показателей. Технический долг также увеличивался в кодовой базе веб-сайта.
Решение
Команда Agrofy представила своих руководителей и получила поддержку:
- Перейдите со старой устаревшей платформы на новую, активно поддерживаемую.
- Оптимизируйте производительность загрузки новой кодовой базы.
Миграция заняла 2 месяца. Помимо упомянутой ранее команды разработчиков из четырех человек, в этой миграции также участвовали специалисты по продуктам и UX, а также архитектор программного обеспечения. Проект оптимизации занял у команды разработчиков из 4 человек 1 месяц. Они сосредоточились на LCP, CLS (еще одна метрика Core Web Vitals) и FCP . Конкретные оптимизации включали:
- Ленивая загрузка всех невидимых элементов с помощью Intersection Observer API .
- Ускоренная доставка статических ресурсов с помощью сети доставки контента .
- Ленивая загрузка изображений с помощью
loading="lazy". - Рендеринг на стороне сервера критического содержимого пути рендеринга.
- Предварительная загрузка и предварительное подключение критически важных ресурсов для минимизации времени установления связи.
- Использование инструментов реального мониторинга пользователей (RUM) для определения страниц с подробными сведениями о продукте, в которых претерпели многочисленные изменения макета, а затем внесения корректировок в архитектуру кодовой базы.
Более подробную техническую информацию можно найти в блоге Agrofy Engineering .
После включения новой кодовой базы для 20% трафика в начале сентября 2020 года они запустили новый сайт для всех посетителей.
Полученные результаты
Оптимизация, проведенная командой разработчиков, привела к измеримым улучшениям по многим различным показателям:
- LCP улучшился на 70%.
- CLS улучшился на 72%.
- Блокировка запросов JS снизилась на 100 %, а блокировка запросов CSS — на 80 %.
- Длинные задачи сократились на 72%.
- Первый простой процессора улучшился на 25%.
За тот же период реальные данные мониторинга пользователей (также известные как полевые данные ) показали, что процент отказов от загрузки страниц с подробными сведениями о продуктах снизился на 76 %, с 3,8 % до 0,9 %:
