Оптимизация интерактивности страниц сведений о продукте для снижения максимального потенциального FID на 90% в Lighthouse и улучшения FID на 9% в отчете об опыте использования Chrome.
Mercado Libre — крупнейшая экосистема электронной коммерции и платежей в Латинской Америке. Она присутствует в 18 странах и является лидером рынка в Бразилии, Мексике и Аргентине (по уникальным посетителям и просмотрам страниц).
Производительность веб-сайта уже давно находится в центре внимания компании, но недавно они сформировали команду для мониторинга производительности и применения оптимизаций в различных частях сайта.
В этой статье подводится итог работы, проделанной Гилле Пасом , Пабло Карминатти и Олегом Буркаем из команды архитектуры интерфейса Mercado Libre по оптимизации одного из основных показателей Web: задержки первого ввода (FID) и его лабораторного прокси, общего времени блокировки (TBT) .
90 %
Снижение максимального потенциала FID в Lighthouse
9 %
Больше пользователей воспринимают FID как «быстрый» в CrUX
Длительные задачи, задержка первого ввода и общее время блокировки
Выполнение ресурсоемкого кода JavaScript может привести к длительным задачам , то есть тем, которые выполняются более 50 мс в основном потоке браузера.
FID (First Input Delay) измеряет время с момента, когда пользователь впервые взаимодействует со страницей (например, когда он нажимает на ссылку), до момента, когда браузер фактически может начать обработку обработчиков событий в ответ на это взаимодействие. Сайт, который выполняет дорогой код JavaScript, скорее всего, будет иметь несколько длительных задач, что в конечном итоге негативно повлияет на FID.
Чтобы обеспечить удобство использования, сайты должны стремиться к тому, чтобы задержка первого ввода составляла менее 100 миллисекунд: 
Хотя сайт Mercado Libre работал хорошо в большинстве разделов, в отчете Chrome User Experience Report они обнаружили, что страницы с подробностями о продуктах имели плохой FID. На основе этой информации они решили сосредоточить свои усилия на улучшении интерактивности страниц продуктов на сайте.
Эти страницы позволяют пользователю выполнять сложные взаимодействия, поэтому целью была оптимизация интерактивности без ущерба для ценных функций.
Измерение интерактивности страниц с описанием продукта
FID требует реального пользователя и, таким образом, не может быть измерен в лаборатории. Однако метрика Total Blocking Time (TBT) измерима в лаборатории, хорошо коррелирует с FID в полевых условиях, а также фиксирует проблемы, которые влияют на интерактивность.
Например, в следующей трассировке общее время, потраченное на выполнение задач в основном потоке, составляет 560 мс, но только 345 мс из этого времени считаются общим временем блокировки (сумма частей каждой задачи, превышающих 50 мс):
Компания Mercado Libre использовала TBT в качестве контрольной метрики в лабораторных условиях, чтобы измерить и улучшить интерактивность страниц с подробной информацией о продуктах в реальном мире.
Вот общий подход, который они использовали:
- Используйте WebPageTest , чтобы точно определить, какие скрипты занимают основной поток на реальном устройстве.
- Используйте Lighthouse для определения влияния изменений максимального потенциала первой задержки ввода (максимальный потенциал FID) .
Используйте WebPageTest для визуализации длительных задач
WebPageTest (WPT) — это инструмент для проверки производительности веб-сайтов, позволяющий проводить тесты на реальных устройствах в разных точках мира.
Mercado Libre использовал WPT для воспроизведения опыта своих пользователей, выбрав тип устройства и местоположение, схожие с реальными пользователями. В частности, они выбрали устройство Moto 4G и Даллес, Вирджиния , потому что они хотели приблизиться к опыту пользователей Mercado Libre в Мексике. Наблюдая за видом основного потока WPT, Mercado Libre обнаружил, что было несколько последовательных длинных задач, блокирующих основной поток на 2 секунды:
Анализируя соответствующий водопад, они обнаружили, что значительная часть этих двух секунд пришлась на их аналитический модуль. Основной размер пакета приложения был большим (950 КБ) и требовал много времени для анализа, компиляции и выполнения.
Используйте Lighthouse для определения максимального потенциала FID
Lighthouse не позволяет выбирать между различными устройствами и местоположениями, но это очень полезный инструмент для диагностики сайтов и получения рекомендаций по производительности.
При запуске Lighthouse на страницах с подробностями о продукте компания Mercado Libre обнаружила, что единственным показателем, отмеченным красным цветом, был максимальный потенциальный FID со значением 1710 мс .
Исходя из этого, Mercado Libre поставила перед собой цель улучшить свой максимальный потенциальный показатель FID в лабораторном инструменте, таком как Lighthouse и WebPageTest, предполагая, что эти улучшения повлияют на реальных пользователей и, следовательно, отобразятся в реальных инструментах мониторинга пользователей, таких как отчет об опыте использования Chrome.
Оптимизируйте длительные задачи
Первая итерация
На основе трассировки основного потока Mercado Libre поставила цель оптимизировать два модуля, выполняющих дорогостоящий код.
Они начали оптимизировать производительность внутреннего модуля отслеживания. Этот модуль содержал задачу, загружающую процессор, которая не была критичной для работы модуля, и поэтому ее можно было безопасно удалить. Это привело к сокращению JavaScript на 2% для всего сайта.
После этого они начали работать над улучшением общего размера пакета :
Mercado Libre использовал webpack-bundle-analyzer для выявления возможностей оптимизации:
- Изначально они требовали полный модуль Lodash . Это было заменено требованием для каждого метода загружать только подмножество Lodash вместо всей библиотеки и использовалось в сочетании с lodash-webpack-plugin для еще большего сокращения Lodash.
Они также применили следующие оптимизации Babel :
- Использование @babel/plugin-transform-runtime для повторного использования вспомогательных функций Babel во всем коде и значительного уменьшения размера пакета.
- Использование babel-plugin-search-and-replace для замены токенов во время сборки с целью удаления большого файла конфигурации внутри основного пакета.
- Добавление babel-plugin-transform-react-remove-prop-types для экономии дополнительных байтов за счет удаления типов свойств.
В результате этих оптимизаций размер пакета был уменьшен примерно на 16% .
Измерить воздействие
Изменения сократили время выполнения последовательных длительных задач Mercado Libre с двух секунд до одной секунды :
Lighthouse продемонстрировал снижение максимальной потенциальной задержки первого ввода на 57% :
Вторая итерация
Команда продолжила работу над длительными задачами с целью поиска дальнейших улучшений.
На основании этой информации было принято решение о внедрении следующих изменений:
- Продолжайте уменьшать размер основного пакета, чтобы оптимизировать время компиляции и анализа (например, путем удаления дублирующихся зависимостей в различных модулях).
- Применяйте разделение кода на уровне компонентов, чтобы разделить JavaScript на более мелкие фрагменты и обеспечить более разумную загрузку различных компонентов.
- Отложить гидратацию компонента , чтобы обеспечить более разумное использование основного потока. Этот метод обычно называют частичной гидратацией .
Измерить воздействие
Полученная трассировка WebPageTest показала еще меньшие фрагменты выполнения JS:
А их максимальное потенциальное время FID в Lighthouse сократилось еще на 60% :
Визуализируйте прогресс для реальных пользователей
Хотя инструменты лабораторного тестирования, такие как WebPageTest и Lighthouse, отлично подходят для итерации решений в процессе разработки, их истинная цель — улучшить опыт реальных пользователей.
Отчет об опыте пользователя Chrome предоставляет метрики пользовательского опыта для того, как реальные пользователи Chrome воспринимают популярные направления в Интернете. Данные из отчета можно получить, выполнив запросы в BigQuery , PageSpeedInsights или API CrUX .
Панель управления CrUX — это простой способ визуализации прогресса основных показателей:
Следующие шаги
Производительность веб-сайта никогда не является завершенной задачей, и Mercado Libre понимает ценность, которую эти оптимизации приносят их пользователям. В то время как они продолжают применять несколько оптимизаций по всему сайту, включая предварительную выборку на страницах со списком продуктов, оптимизацию изображений и другие, они продолжают добавлять улучшения на страницы со списком продуктов, чтобы сократить общее время блокировки (TBT) и, по доверенности, FID, даже больше. Эти оптимизации включают:
- Итерация решения по разделению кода.
- Улучшение выполнения сторонних скриптов.
- Продолжаются улучшения в объединении ресурсов на уровне упаковщика ( webpack ).
У Mercado Libre целостный взгляд на производительность, поэтому, продолжая оптимизировать интерактивность на сайте, они также начали оценивать возможности для улучшения двух других текущих основных веб-показателей : LCP (наибольшая отрисовка контента) и CLS (кумулятивное смещение макета) .