Оптимизация работы сайтов и приложений eBay для более быстрого взаимодействия с пользователем.
Скорость была инициативой всей компании для eBay, начиная с 2019 года, и многие команды были полны решимости сделать сайт и приложения максимально быстрыми для пользователей.
На каждые 100 миллисекунд времени загрузки страницы поиска eBay зафиксировал увеличение количества «Добавить в корзину» на 0,5 %.
Улучшение времени загрузки
Благодаря принятию Бюджетов производительности (полученных после проведения конкурентного исследования с Отчетом об опыте использования Chrome) и сосредоточения внимания на ключевых ориентированных на пользователя показателях производительности eBay смогла значительно улучшить скорость работы сайта.
… и данные их отчета об опыте использования Chrome также подчеркивают эти улучшения.
Даже при повторном тестировании eBay.com с использованием PageSpeed Insights и отчета Chrome UX в 2023 году (по LCP, CLS и FID) мы видим, что сайт проходит метрики Core Web Vitals и остается быстрым по всем показателям. количество областей:
Впереди еще много работы, но вот уроки eBay.
Веб-производительность «сокращается»
Улучшения, сделанные eBay, стали возможны благодаря сокращению или «сокращению» (по размеру и времени) различных объектов, которые принимают участие в путешествии пользователя. Этот пост охватывает темы, которые имеют отношение к сообществу веб-разработчиков в целом, а не к темам, специфичным для eBay.
Уменьшите полезную нагрузку на все текстовые ресурсы
Один из способов сделать сайты быстрыми — просто загрузить меньше кода. eBay сократил свои текстовые полезные нагрузки, обрезав все неиспользуемые и ненужные байты ответов JavaScript, CSS, HTML и JSON, отправляемых пользователям.
Раньше с каждой новой функцией eBay продолжал увеличивать полезную нагрузку своих ответов, не очищая то, что не использовалось. Со временем это накапливалось и стало узким местом в производительности. Команды обычно откладывали эту уборку, но вы удивитесь, сколько сэкономил eBay.
«Отрезок» здесь — это потерянные байты в полезной нагрузке ответа.
Оптимизация критического пути для контента верхней части страницы
Не каждый пиксель на экране одинаково важен. Контент вверху более критичен, чем что-то внизу. iOS/Android/настольные и веб-приложения знают об этом, но как насчет сервисов? В сервисной архитектуре eBay есть слой под названием Experience Services, с которым взаимодействуют внешние интерфейсы (зависимые от платформы приложения и веб-серверы). Этот уровень специально разработан для просмотра или устройства, а не для объекта, такого как элемент, пользователь или заказ. Затем eBay представила концепцию критического пути для Experience Services.
Когда к этим службам поступает запрос, они работают над немедленным получением данных для содержимого верхней части страницы, параллельно вызывая другие вышестоящие службы. Как только данные готовы, они мгновенно сбрасываются. Данные ниже сгиба отправляются в более позднем блоке или загружаются отложенно. Результат: пользователи быстрее видят контент в верхней части экрана.
«Срез» здесь — это время, затрачиваемое сервисами на отображение релевантного контента.
Оптимизация изображений
Изображения являются одним из крупнейших факторов раздувания страниц. Даже небольшая оптимизация имеет большое значение. eBay сделал две оптимизации для изображений.
Во-первых, eBay стандартизировал формат изображений WebP для результатов поиска на всех платформах, включая iOS, Android и поддерживаемые браузеры. Страница результатов поиска — самая насыщенная изображениями страница на eBay, и они уже использовали WebP, но не всегда.
Во-вторых, хотя изображения листинга eBay сильно оптимизированы (как по размеру, так и по формату), такая же строгость не применялась к тщательно подобранным изображениям (например, к верхнему модулю на домашней странице). На eBay есть множество изображений, созданных вручную, которые загружаются с помощью различных инструментов. Раньше оптимизация зависела от загрузчика, но теперь eBay применяет правила в инструментах, поэтому все загруженные изображения будут оптимизированы соответствующим образом.
«Отрезок» здесь — это потраченные впустую байты изображения, отправленные пользователям.
Предиктивная предварительная выборка статических ресурсов
Сеанс пользователя на eBay — это не просто одна страница. Это поток. Например, поток может быть переходом с домашней страницы на страницу поиска и на страницу элемента. Так почему же страницы в потоке не помогают друг другу? В этом заключается идея упреждающей предварительной выборки, когда одна страница предварительно загружает статические ресурсы, необходимые для следующей вероятной страницы.
При прогнозирующей предварительной выборке, когда пользователь переходит на прогнозируемую страницу, активы уже находятся в кеше браузера. Это делается для активов CSS и JavaScript, где URL-адреса могут быть получены заранее. Здесь следует отметить, что это помогает только при первой навигации. При последующих переходах статические ресурсы уже будут в кеше.
«Отрезок» здесь — это сетевое время для статических ресурсов CSS и JavaScript при первой навигации.
Предварительная выборка лучших результатов поиска
Когда пользователь выполняет поиск на eBay, аналитические данные eBay показывают, что весьма вероятно, что пользователь перейдет к элементу в первой десятке результатов поиска. Таким образом, eBay теперь предварительно выбирает элементы из поиска и держит их готовыми, когда пользователь перемещается. Предварительная выборка происходит на двух уровнях.
Первый уровень происходит на стороне сервера, где служба элементов кэширует первые 10 элементов в результатах поиска. Когда пользователь переходит к одному из этих элементов, eBay теперь экономит время обработки сервера. Кэширование на стороне сервера используется приложениями для конкретных платформ и развертывается по всему миру.
Другой уровень происходит в кеше браузера, который доступен в Австралии. Предварительная выборка элементов была расширенной оптимизацией из-за динамического характера элементов. Тут тоже много нюансов: показы страниц, вместимость, аукционные лоты и так далее. Вы можете узнать больше об этом в Презентации LinkedIn's Performance Engineering Meetup или следите за подробной записью в блоге на эту тему от инженеров eBay.
«Отрезок» здесь может быть либо временем обработки сервера, либо сетевым временем, в зависимости от того, где кешируется элемент.
На странице результатов поиска, когда запрос выдается на высоком уровне, происходят две вещи. Один из них — этап отзыва/ранжирования, когда возвращаются наиболее релевантные элементы, соответствующие запросу. Второй шаг — дополнить отозванные элементы дополнительной информацией, связанной с пользовательским контекстом, например стоимостью доставки. eBay теперь сразу же отправляет первые 10 изображений товара в браузер вместе с заголовком, поэтому загрузка может начаться до того, как прибудет остальная часть разметки. В результате изображения теперь будут появляться быстрее. Это изменение развернуто глобально для веб-платформы.
«Обрезка» здесь — это время начала загрузки изображений результатов поиска.
Пограничное кэширование для данных автопредложения
Когда пользователи вводят буквы в поле поиска, всплывают предложения. Эти предложения не меняются для буквосочетаний как минимум сутки. Они являются идеальными кандидатами для кэширования и обслуживания из CDN (максимум 24 часа), вместо того, чтобы запросы доходили до центра обработки данных. Международные рынки особенно выигрывают от кэширования CDN.
Однако была загвоздка. У eBay были некоторые элементы персонализации во всплывающем окне с предложениями, которые нельзя было эффективно кэшировать. К счастью, это не было проблемой в приложениях для конкретных платформ, поскольку пользовательский интерфейс для персонализации и предложений можно было разделить. Для Интернета на международных рынках задержка была важнее небольшого преимущества персонализации. С учетом этого у eBay теперь есть автоматические предложения, которые подаются из кэша CDN по всему миру для приложений для конкретных платформ и рынков за пределами США для eBay.com.
«Срез» здесь — это сетевая задержка и время обработки сервером автопредложений.
Пограничное кэширование для неизвестных пользователей домашней страницы
Для веб-платформы содержание главной страницы для непризнанных пользователей одинаково для определенного региона. Это пользователи, которые либо используют eBay в первый раз, либо начинают новую сессию, поэтому никакой персонализации. Хотя объявления на главной странице часто меняются, все еще есть место для кэширования.
eBay решил на короткое время кэшировать нераспознанный пользовательский контент (HTML) в своей пограничной сети (PoPs). Новые пользователи теперь могут получать содержимое домашней страницы с сервера рядом с ними, а не из удаленного центра обработки данных. eBay все еще экспериментирует с этим на международных рынках, где это окажет большее влияние.
«Обрезка» здесь снова связана как с сетевой задержкой, так и со временем обработки сервером нераспознанных пользователей.
Оптимизация для других платформ
Улучшения синтаксического анализа приложений iOS/Android
Приложения iOS/Android взаимодействуют с серверными службами, формат ответа которых обычно представляет собой JSON. Эти полезные данные JSON могут быть большими. Вместо того, чтобы анализировать весь JSON для отображения чего-либо на экране, eBay представила эффективный алгоритм анализа, который оптимизирует содержимое, которое необходимо отобразить немедленно.
Теперь пользователи могут быстрее просматривать контент. Кроме того, для Android-приложения eBay начинает инициализировать контроллеры представления поиска, как только пользователь начинает вводить текст в поле поиска (в iOS такая оптимизация уже была). Раньше это происходило только после того, как пользователи нажимали кнопку поиска. Теперь пользователи могут быстрее получать результаты поиска. «Отрезок» здесь — это время, затрачиваемое устройствами на отображение релевантного контента.
Улучшения времени запуска приложений Android
Это относится к оптимизации времени холодного старта для Android-приложений. Когда приложение запускается в холодном состоянии, большая часть инициализации происходит как на уровне ОС, так и на уровне приложения. Сокращение времени инициализации на уровне приложения помогает пользователям быстрее видеть главный экран. eBay провел некоторое профилирование и заметил, что не все инициализации требуются для отображения контента и что некоторые из них можно выполнять лениво.
Что еще более важно, eBay заметил, что был блокирующий вызов сторонней аналитики, который задерживал рендеринг на экране. Удаление блокирующего вызова и перевод его в асинхронный режим еще больше увеличили время холодного запуска. «Отрезок» здесь — это ненужное время запуска для приложений Android.
Выводы
Все «сокращения» производительности, сделанные eBay, в совокупности способствовали движению иглы, и это происходило в течение определенного периода времени. Выпуски производились поэтапно в течение года, каждый выпуск сокращал время на десятки миллисекунд, в конечном итоге достигнув уровня, на котором сейчас находится eBay:
Производительность — это особенность и конкурентное преимущество. Оптимизированный опыт приводит к более высокому вовлечению пользователей, конверсиям и рентабельности инвестиций. В случае с eBay эти оптимизации варьировались от несложных до нескольких продвинутых.
Ознакомьтесь с разделом Скорость за счет тысячи сокращений, чтобы узнать больше, и ждите более подробных статей инженеров eBay об их работе в ближайшем будущем.
Первоначально опубликовано на https://web.dev.
