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