Оптимизация интерактивности страниц с подробными сведениями о продукте для снижения максимального потенциального FID на 90 % в Lighthouse и улучшения FID на 9 % в отчете об опыте пользователя Chrome.
Mercado Libre — крупнейшая экосистема электронной коммерции и платежей в Латинской Америке. Он присутствует в 18 странах и является лидером рынка в Бразилии, Мексике и Аргентине (по числу уникальных посетителей и просмотров страниц).
Веб-производительность долгое время была в центре внимания компании, но недавно они сформировали команду для мониторинга производительности и применения оптимизации в различных частях сайта.
В этой статье обобщается работа, проделанная Гийем Пазом , Пабло Карминатти и Олегом Буркхаем из команды фронтенд-архитектуры Mercado Libre по оптимизации одного из основных веб-жизненных параметров: первой задержки ввода (FID) и его лабораторного прокси, Total Blocking Time (TBT) .
90 %
Снижение максимального потенциала FID в маяке
9 %
Все больше пользователей воспринимают FID как «быстрый» в CrUX
Длительные задачи, задержка первого ввода и общее время блокировки
Выполнение дорогостоящего кода JavaScript может привести к длительным задачам , которые выполняются более 50 мс в основном потоке браузера.
FID (первая задержка ввода) измеряет время с момента первого взаимодействия пользователя со страницей (например, когда он нажимает ссылку) до момента, когда браузер фактически может начать обработку обработчиков событий в ответ на это взаимодействие. Сайт, на котором выполняется дорогостоящий код JavaScript, скорее всего, будет выполнять несколько длительных задач, что в конечном итоге негативно повлияет на FID.
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы задержка первого ввода составляла менее 100 миллисекунд: 
Хотя сайт Mercado Libre работал хорошо в большинстве разделов, в отчете об опыте пользователей Chrome они обнаружили, что страницы с подробными сведениями о продуктах имеют плохой FID. Основываясь на этой информации, они решили сосредоточить свои усилия на улучшении интерактивности страниц продуктов на сайте.
Эти страницы позволяют пользователю выполнять сложные взаимодействия, поэтому целью была оптимизация интерактивности без вмешательства в ценную функциональность.
Измеряйте интерактивность страниц с подробными сведениями о продукте
Для ПИД требуется реальный пользователь, поэтому его нельзя измерить в лаборатории. Однако показатель общего времени блокировки (TBT) поддается измерению в лаборатории, хорошо коррелирует с FID в полевых условиях, а также фиксирует проблемы, влияющие на интерактивность.
Например, в следующей трассировке общее время , затраченное на выполнение задач в основном потоке, составляет 560 мс, только 345 мс из этого времени считаются общим временем блокировки (сумма частей каждой задачи, длительность которых превышает 50 мс):
Mercado Libre использовал TBT в качестве прокси-метрики в лаборатории, чтобы измерить и улучшить интерактивность страниц с подробными сведениями о продуктах в реальном мире.
Вот общий подход, который они использовали:
- Используйте WebPageTest , чтобы точно определить, какие сценарии задерживают основной поток на реальном устройстве.
- Используйте Lighthouse , чтобы определить влияние изменений в Max Potential First Input Delay (Max Potential FID) .
Используйте WebPageTest для визуализации длительных задач
WebPageTest (WPT) — это инструмент веб-производительности, который позволяет запускать тесты на реальных устройствах в разных местах по всему миру.
Mercado Libre использовала WPT для воспроизведения опыта своих пользователей, выбирая тип устройства и местоположение, аналогичное реальным пользователям. В частности, они выбрали устройство Moto 4G и город Даллес, штат Вирджиния , поскольку хотели приблизиться к опыту пользователей Mercado Libre в Мексике. Наблюдая за представлением основного потока WPT, Mercado Libre обнаружил, что несколько последовательных длинных задач блокировали основной поток на 2 секунды:
Анализируя соответствующий водопад, они обнаружили, что значительная часть этих двух секунд приходится на их аналитический модуль. Размер основного пакета приложения был большим (950 КБ), и его анализ, компиляция и выполнение требовали много времени.
Используйте Lighthouse, чтобы определить максимальный потенциал FID
Lighthouse не позволяет выбирать между разными устройствами и локациями, но это очень полезный инструмент для диагностики сайтов и получения рекомендаций по производительности.
При запуске Lighthouse на страницах сведений о продукте Mercado Libre обнаружил, что Max Potential FID был единственным показателем, отмеченным красным, со значением 1710 мс .
Основываясь на этом, Mercado Libre поставила цель улучшить свой показатель Max Potential 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 или CrUX API .
Панель управления CrUX — это простой способ визуализировать прогресс основных показателей:
Следующие шаги
Веб-производительность никогда не является законченной задачей, и Mercado Libre понимает, какую пользу эти оптимизации приносят пользователям. Хотя они продолжают применять несколько оптимизаций на сайте, включая предварительную загрузку на страницах списков продуктов, оптимизацию изображений и другие, они продолжают добавлять улучшения на страницы со списком продуктов, чтобы сократить общее время блокировки (TBT), а через прокси-сервер FID, даже больше. Эти оптимизации включают в себя:
- Итерация решения по разделению кода.
- Улучшение выполнения сторонних скриптов.
- Продолжающиеся улучшения в объединении ресурсов на уровне сборщика ( webpack ).
Mercado Libre имеет целостное представление о производительности, поэтому, продолжая оптимизировать интерактивность на сайте, они также начали оценивать возможности улучшения двух других текущих основных веб-показателей : LCP (наибольшая отрисовка контента) и CLS (кумулятивное изменение макета). более.