Скорость покупок на eBay.com

Оптимизация производительности сайтов и приложений eBay для более быстрого взаимодействия с пользователем.

Addy Osmani

Скорость была общекорпоративной инициативой eBay в 2019 году, и многие команды решили сделать сайт и приложения максимально быстрыми для пользователей. Фактически, на каждые 100 миллисекунд улучшения времени загрузки страницы поиска на eBay наблюдалось увеличение количества «Добавлений в корзину» на 0,5%.

Благодаря внедрению бюджетов производительности (полученных на основе конкурентного исследования с использованием отчета об опыте пользователей Chrome ) и сосредоточению внимания на ключевых показателях производительности, ориентированных на пользователя , eBay смог значительно повысить скорость работы сайта.

…и данные отчета об опыте пользователей Chrome также подчеркивают эти улучшения.

Впереди еще много работы, но вот выводы 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 Performance Engineering Meetup или следить за подробной публикацией в блоге по этой теме от инженеров eBay.

«Отрезок» здесь может быть либо временем обработки сервера, либо временем сети, в зависимости от того, где элемент кэшируется.

Стремительная загрузка изображений для поиска

На странице результатов поиска, когда запрос выдается на высоком уровне, происходят две вещи. Одним из них является этап отзыва/ранжирования, на котором возвращаются наиболее релевантные элементы, соответствующие запросу. Второй шаг — дополнить отозванные элементы дополнительной информацией, связанной с пользовательским контекстом, такой как стоимость доставки. eBay теперь немедленно отправляет в браузер первые 10 изображений товара вместе с заголовком, поэтому загрузка может начаться до того, как придет остальная часть разметки. В результате изображения теперь будут появляться быстрее. Это изменение распространяется на веб-платформу по всему миру.

«Вырез» здесь — это время начала загрузки изображений из результатов поиска.

Пограничное кэширование данных автопредложения

Когда пользователи вводят буквы в поле поиска, появляются всплывающие предложения. Эти предложения не меняются для буквенных комбинаций как минимум сутки. Они являются идеальными кандидатами для кэширования и обслуживания через CDN (максимум 24 часа), вместо того, чтобы запросы направлялись в центр обработки данных. Международные рынки особенно выигрывают от кэширования CDN.

Однако здесь была загвоздка. На eBay во всплывающем окне с предложениями были некоторые элементы персонализации, которые невозможно эффективно кэшировать. К счастью, в приложениях для конкретной платформы это не было проблемой, поскольку пользовательский интерфейс для персонализации и предложений можно было разделить. Для Интернета на международных рынках задержка была важнее, чем небольшая выгода от персонализации. Благодаря этому у eBay теперь есть автопредложения, обслуживаемые из кэша CDN по всему миру для приложений, специфичных для платформы, и для рынков за пределами США для eBay.com.

«Сокращение» здесь — это задержка в сети и время обработки сервером автоматических предложений.

Edge-кэширование для неизвестных пользователей домашней страницы.

Для веб-платформы содержимое домашней страницы для неизвестных пользователей одинаково для конкретного региона. Это пользователи, которые либо используют eBay впервые, либо начинают новый сеанс, поэтому персонализация отсутствует. Хотя креативы на главной странице часто меняются, место для кэширования все еще остается.

eBay решил кэшировать нераспознанный пользовательский контент (HTML) в своей периферийной сети ( PoP ) на короткий период. Впервые пользователи теперь могут получать контент домашней страницы с ближайшего к ним сервера, а не из удаленного центра обработки данных. eBay все еще экспериментирует с этим на международных рынках, где это будет иметь больший эффект.

«Сокращение» здесь снова касается как задержки в сети, так и времени обработки сервером для нераспознанных пользователей.

Оптимизации для других платформ

Улучшения анализа приложений iOS/Android

Приложения iOS/Android взаимодействуют с серверными службами, формат ответа которых обычно — JSON. Эти полезные данные JSON могут быть большими. Вместо того, чтобы анализировать весь JSON для отображения чего-либо на экране, eBay представил эффективный алгоритм синтаксического анализа, который оптимизирует контент, который необходимо отобразить немедленно.

Теперь пользователи могут просматривать контент быстрее. Кроме того, для приложения Android eBay начинает инициализацию контроллеров представления поиска, как только пользователь начинает вводить текст в поле поиска (в iOS уже была такая оптимизация). Раньше это происходило только после того, как пользователи нажимали кнопку поиска. Теперь пользователи могут быстрее получить доступ к результатам поиска. «Сокращение» здесь — это время, затрачиваемое устройствами на отображение релевантного контента.

Улучшено время запуска Android-приложений

Это относится к оптимизации времени холодного запуска для приложений Android. При холодном запуске приложения происходит большая часть инициализации как на уровне ОС, так и на уровне приложения. Сокращение времени инициализации на уровне приложения помогает пользователям быстрее видеть главный экран. eBay провел некоторое профилирование и заметил, что не все инициализации необходимы для отображения контента, а некоторые можно выполнять лениво.

Что еще более важно, eBay заметил, что произошел блокирующий вызов сторонней аналитики, который задержал рендеринг на экране. Удаление блокирующего вызова и его асинхронность еще больше помогли сократить время холодного запуска. «Сокращение» здесь — это ненужное время запуска приложений Android.

Выводы

Все «сокращения» производительности, сделанные eBay, в совокупности способствовали продвижению иглы, и это произошло в течение определенного периода времени. Выпуски выпускались поэтапно в течение года, при этом каждый выпуск сокращал десятки миллисекунд, в конечном итоге достигнув той точки, где eBay находится сейчас:

Производительность – это особенность и конкурентное преимущество . Оптимизированный опыт приводит к повышению вовлеченности пользователей, конверсий и рентабельности инвестиций. В случае с eBay эти оптимизации варьировались от простых до сложных.

Ознакомьтесь со статьей «Скорость на тысячу сокращений», чтобы узнать больше, а также ждите более подробных статей инженеров eBay об их работе над производительностью в ближайшем будущем.

Оптимизация производительности сайтов и приложений eBay для более быстрого взаимодействия с пользователем.

Addy Osmani

Скорость была общекорпоративной инициативой eBay в 2019 году, и многие команды решили сделать сайт и приложения максимально быстрыми для пользователей. Фактически, на каждые 100 миллисекунд улучшения времени загрузки страницы поиска на eBay наблюдалось увеличение количества «Добавлений в корзину» на 0,5%.

Благодаря внедрению бюджетов производительности (полученных на основе конкурентного исследования с использованием отчета об опыте пользователей Chrome ) и сосредоточению внимания на ключевых показателях производительности, ориентированных на пользователя , eBay удалось значительно повысить скорость работы сайта.

…и данные отчета об опыте пользователей Chrome также подчеркивают эти улучшения.

Впереди еще много работы, но вот выводы 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 Performance Engineering Meetup или следить за подробной публикацией в блоге по этой теме от инженеров eBay.

«Отрезок» здесь может быть либо временем обработки сервера, либо временем сети, в зависимости от того, где элемент кэшируется.

Стремительная загрузка изображений для поиска

На странице результатов поиска, когда запрос выдается на высоком уровне, происходят две вещи. Одним из них является этап отзыва/ранжирования, на котором возвращаются наиболее релевантные элементы, соответствующие запросу. Второй шаг — дополнить отозванные элементы дополнительной информацией, связанной с пользовательским контекстом, такой как стоимость доставки. eBay теперь немедленно отправляет в браузер первые 10 изображений товара вместе с заголовком, поэтому загрузка может начаться до того, как придет остальная часть разметки. В результате изображения теперь будут появляться быстрее. Это изменение распространяется на веб-платформу по всему миру.

«Вырез» здесь — это время начала загрузки изображений из результатов поиска.

Пограничное кэширование данных автопредложения

Когда пользователи вводят буквы в поле поиска, появляются всплывающие предложения. Эти предложения не меняются для буквенных комбинаций как минимум сутки. Они являются идеальными кандидатами для кэширования и обслуживания через CDN (максимум 24 часа), вместо того, чтобы запросы направлялись в центр обработки данных. Международные рынки особенно выигрывают от кэширования CDN.

Однако здесь была загвоздка. На eBay во всплывающем окне с предложениями были некоторые элементы персонализации, которые невозможно эффективно кэшировать. К счастью, в приложениях для конкретной платформы это не было проблемой, поскольку пользовательский интерфейс для персонализации и предложений можно было разделить. Для Интернета на международных рынках задержка была важнее, чем небольшая выгода от персонализации. Благодаря этому у eBay теперь есть автопредложения, обслуживаемые из кэша CDN по всему миру для приложений, специфичных для платформы, и для рынков за пределами США для eBay.com.

«Сокращение» здесь — это задержка в сети и время обработки сервером автоматических предложений.

Edge-кэширование для неизвестных пользователей домашней страницы.

Для веб-платформы содержимое домашней страницы для неизвестных пользователей одинаково для конкретного региона. Это пользователи, которые либо используют eBay впервые, либо начинают новый сеанс, поэтому персонализация отсутствует. Хотя креативы на главной странице часто меняются, место для кэширования все еще остается.

eBay решил кэшировать нераспознанный пользовательский контент (HTML) в своей периферийной сети ( PoP ) на короткий период. Впервые пользователи теперь могут получать контент домашней страницы с ближайшего к ним сервера, а не из удаленного центра обработки данных. eBay все еще экспериментирует с этим на международных рынках, где это будет иметь больший эффект.

«Сокращение» здесь снова касается как задержки в сети, так и времени обработки сервером для нераспознанных пользователей.

Оптимизации для других платформ

Улучшения анализа приложений iOS/Android

Приложения iOS/Android взаимодействуют с серверными службами, формат ответа которых обычно — JSON. Эти полезные данные JSON могут быть большими. Вместо того, чтобы анализировать весь JSON для отображения чего-либо на экране, eBay представил эффективный алгоритм синтаксического анализа, который оптимизирует контент, который необходимо отобразить немедленно.

Теперь пользователи могут просматривать контент быстрее. Кроме того, для приложения Android eBay начинает инициализацию контроллеров представления поиска, как только пользователь начинает вводить текст в поле поиска (в iOS уже была такая оптимизация). Раньше это происходило только после того, как пользователи нажимали кнопку поиска. Теперь пользователи могут быстрее получить доступ к результатам поиска. «Сокращение» здесь — это время, затрачиваемое устройствами на отображение релевантного контента.

Улучшено время запуска Android-приложений

Это относится к оптимизации времени холодного запуска для приложений Android. При холодном запуске приложения происходит большая часть инициализации как на уровне ОС, так и на уровне приложения. Сокращение времени инициализации на уровне приложения помогает пользователям быстрее видеть главный экран. eBay провел некоторое профилирование и заметил, что не все инициализации необходимы для отображения контента, а некоторые можно выполнять лениво.

Что еще более важно, eBay заметил, что произошел блокирующий вызов сторонней аналитики, который задержал рендеринг на экране. Удаление блокирующего вызова и его асинхронность еще больше помогли сократить время холодного запуска. «Сокращение» здесь — это ненужное время запуска приложений Android.

Выводы

Все «сокращения» производительности, сделанные eBay, в совокупности способствовали продвижению иглы, и это происходило в течение определенного периода времени. Выпуски выпускались поэтапно в течение года, при этом каждый выпуск сокращал десятки миллисекунд, в конечном итоге достигнув той точки, где сейчас находится eBay:

Производительность – это особенность и конкурентное преимущество . Оптимизированный опыт приводит к повышению вовлеченности пользователей, конверсий и рентабельности инвестиций. В случае с eBay эти оптимизации варьировались от простых до сложных.

Ознакомьтесь со статьей «Скорость на тысячу сокращений», чтобы узнать больше, а также ждите более подробных статей инженеров eBay об их работе над производительностью в ближайшем будущем.