더 빠른 사용자 환경을 위해 eBay 사이트 및 앱의 성능을 최적화합니다.
속도는 2019년 eBay의 전사적 이니셔티브였으며, 많은 팀이 사용자를 위해 사이트와 앱을 최대한 빠르게 만들기 위해 노력했습니다. 실제로 eBay에서는 검색 페이지 로드 시간이 100밀리초 개선될 때마다 '장바구니에 추가' 수가 0.5% 씩 증가했습니다.
100ms
로드 시간 개선
0.5%
'장바구니에 추가' 횟수 증가
eBay는 Chrome 사용자 환경 보고서를 사용한 경쟁 연구를 통해 도출된 실적 예산을 채택하고 주요 사용자 중심 실적 측정항목에 중점을 두어 사이트 속도를 크게 개선할 수 있었습니다.
Chrome 사용자 환경 보고서 데이터에서도 이러한 개선사항을 확인할 수 있습니다.
아직 갈 길이 멀지만 지금까지 eBay에서 얻은 교훈을 공유합니다.
웹 성능 '감소'
eBay가 개선할 수 있었던 것은 사용자 여정에 참여하는 다양한 항목의 크기와 시간을 줄이거나 '삭감'했기 때문입니다. 이 게시물에서는 eBay 관련 주제가 아닌 웹 개발자 커뮤니티 전반과 관련된 주제를 다룹니다.
모든 텍스트 리소스의 페이로드 줄이기
사이트 속도를 높이는 한 가지 방법은 코드를 적게 로드하는 것입니다. eBay는 사용자에게 제공되는 JavaScript, CSS, HTML, JSON 응답의 사용되지 않고 불필요한 바이트를 모두 잘라내 텍스트 페이로드를 줄였습니다. 이전에는 eBay에서 새로운 기능이 추가될 때마다 사용되지 않는 항목을 정리하지 않고 응답의 페이로드를 계속 늘렸습니다. 시간이 지남에 따라 이러한 비용이 누적되어 성능 병목 현상이 발생했습니다. 팀은 일반적으로 이 정리 활동을 미루었지만 eBay가 얼마나 절약했는지 놀랄 것입니다.
여기서 'cut'은 응답 페이로드에서 낭비되는 바이트입니다.
스크롤 없이 볼 수 있는 부분에 표시되는 콘텐츠의 중요 경로 최적화
화면의 모든 픽셀이 동일하게 중요한 것은 아닙니다. 시작 페이지의 콘텐츠는 시작 페이지 아래의 콘텐츠보다 중요합니다. iOS/Android/데스크톱 및 웹 앱은 이를 인식하지만 서비스는 어떨까요? eBay의 서비스 아키텍처에는 프런트엔드 (플랫폼별 앱 및 웹 서버)가 통신하는 Experience Services라는 레이어가 있습니다. 이 레이어는 상품, 사용자, 주문과 같은 항목 기반이 아닌 뷰 또는 기기 기반으로 설계되었습니다. 그런 다음 eBay는 Experience Services의 중요 경로 개념을 도입했습니다. 이러한 서비스에 요청이 접수되면 다른 업스트림 서비스를 동시에 호출하여 페이지 상단 콘텐츠의 데이터를 즉시 가져옵니다. 데이터가 준비되면 즉시 플러시됩니다. 아래쪽 데이터는 이후 청크로 전송되거나 지연 로드됩니다. 결과: 사용자가 더 빠르게 페이지 상단 콘텐츠를 볼 수 있습니다.
여기서 '컷'은 서비스가 관련 콘텐츠를 표시하는 데 걸리는 시간입니다.
이미지 최적화
이미지는 페이지 확장에 가장 큰 영향을 미치는 요인 중 하나입니다. 작은 최적화라도 큰 효과를 낼 수 있습니다. eBay는 이미지를 위해 두 가지 최적화를 수행했습니다.
먼저 eBay는 iOS, Android, 지원되는 브라우저를 비롯한 모든 플랫폼에서 검색 결과에 WebP 이미지 형식을 표준화했습니다. 검색 결과 페이지는 eBay에서 이미지가 가장 많은 페이지이며 이미 WebP를 사용하고 있었지만 일관된 패턴은 아니었습니다.
둘째, eBay의 등록정보 이미지는 크기와 형식 모두에서 상당히 최적화되었지만 선별된 이미지(예: 홈페이지의 상단 모듈)에는 동일한 엄격성이 적용되지 않았습니다. eBay에는 다양한 도구를 통해 업로드되는 수동으로 선별된 이미지가 많이 있습니다. 이전에는 최적화 여부가 업로더에게 달려 있었지만 이제 eBay에서 도구 내에서 규칙을 시행하므로 업로드된 모든 이미지가 적절하게 최적화됩니다.
여기서 '절단'은 사용자에게 전송된 낭비된 이미지 바이트를 나타냅니다.
정적 애셋의 예측 프리캐시
eBay의 사용자 세션은 하나의 페이지가 아닙니다. 흐름입니다. 예를 들어 흐름은 홈페이지에서 검색 페이지로, 검색 페이지에서 상품 페이지로의 탐색일 수 있습니다. 그렇다면 흐름의 페이지가 서로 도움이 되지 않는 이유는 무엇인가요? 이것이 예측 미리 로드의 개념입니다. 한 페이지에서 다음에 나올 가능성이 높은 페이지에 필요한 정적 애셋을 미리 로드합니다.
예측 미리 가져오기를 사용하면 사용자가 예측된 페이지로 이동할 때 애셋이 이미 브라우저 캐시에 있습니다. 이는 URL을 미리 가져올 수 있는 CSS 및 JavaScript 애셋에 적용됩니다. 여기서 한 가지 유의할 점은 이 방법이 첫 번째 탐색에만 도움이 된다는 것입니다. 이후 탐색 시 정적 애셋은 이미 캐시에 있습니다.
여기서 '절단'은 첫 번째 탐색에서 CSS 및 JavaScript 정적 애셋의 네트워크 시간입니다.
인기 검색 결과 미리 가져오기
사용자가 eBay를 검색하면 eBay의 분석 데이터에 따르면 사용자가 검색 결과 상위 10개에 있는 상품으로 이동할 가능성이 높습니다. 이제 eBay는 검색에서 상품을 미리 가져와 사용자가 탐색할 때 항상 준비되도록 합니다. 미리 로드는 두 수준에서 이루어집니다.
첫 번째 수준은 서버 측에서 발생하며, 여기서 상품 서비스는 검색 결과의 상위 10개 상품을 캐시합니다. 이제 사용자가 이러한 항목 중 하나로 이동하면 eBay에서 서버 처리 시간을 절약할 수 있습니다. 서버 측 캐싱은 플랫폼별 앱에서 활용되며 전 세계적으로 출시됩니다.
다른 수준은 오스트레일리아에서 사용할 수 있는 브라우저 캐시에서 발생합니다. 항목 미리 가져오기는 항목의 동적 특성으로 인해 고급 최적화였습니다. 페이지 노출수, 용량, 입찰 항목 등 세부사항도 많습니다. LinkedIn의 성능 엔지니어링 Meetup 프레젠테이션에서 자세히 알아보거나 eBay 엔지니어가 이 주제에 관해 작성할 자세한 블로그 게시물을 기대해 주세요.
여기서 '절단'은 항목이 캐시된 위치에 따라 서버 처리 시간 또는 네트워크 시간일 수 있습니다.
검색 이미지의 조기 다운로드
검색 결과 페이지에서 상위 수준에서 쿼리가 실행되면 두 가지 일이 발생합니다. 하나는 검색어와 일치하는 가장 관련성 높은 항목이 반환되는 검색/순위 지정 단계입니다. 두 번째 단계는 리콜된 항목을 배송비와 같은 사용자 컨텍스트 관련 정보로 보강하는 것입니다. 이제 eBay는 헤더와 함께 처음 10개의 상품 이미지를 브라우저로 즉시 전송하므로 나머지 마크업이 도착하기 전에 다운로드가 시작될 수 있습니다. 따라서 이제 이미지가 더 빨리 표시됩니다. 이 변경사항은 웹 플랫폼에 전 세계적으로 적용됩니다.
여기서 'cut'은 검색 결과 이미지의 다운로드 시작 시간입니다.
자동 완성 데이터의 에지 캐싱
사용자가 검색창에 글자를 입력하면 추천 검색어가 팝업으로 표시됩니다. 이러한 추천은 문자 조합에 대해 최소 1일 동안 변경되지 않습니다. 이러한 요청은 데이터 센터까지 가는 대신 CDN에서 캐시되고 제공되기에 (최대 24시간) 적합합니다. 특히 해외 시장에서는 CDN 캐시의 이점을 누릴 수 있습니다.
하지만 한 가지 문제가 있었습니다. eBay의 추천 팝업에는 효율적으로 캐시할 수 없는 맞춤설정 요소가 있었습니다. 다행히 맞춤설정 및 추천을 위한 사용자 인터페이스를 분리할 수 있으므로 플랫폼별 앱에서는 문제가 되지 않았습니다. 국제 시장의 웹의 경우 지연 시간이 맞춤설정의 작은 이점보다 더 중요했습니다. 이제 eBay는 플랫폼별 앱과 eBay.com의 미국 외 시장을 위해 전 세계적으로 CDN 캐시에서 자동 추천을 제공합니다.
여기서 '절단'은 자동 완성의 네트워크 지연 시간과 서버 처리 시간입니다.
알 수 없는 홈페이지 사용자를 위한 에지 캐싱
웹 플랫폼의 경우 알 수 없는 사용자의 홈페이지 콘텐츠는 특정 지역에서 동일합니다. eBay를 처음 사용하거나 새 세션을 시작하는 사용자이므로 맞춤설정이 적용되지 않습니다. 홈페이지 광고 소재가 자주 변경되더라도 캐시할 여지가 있습니다.
eBay는 짧은 기간 동안 에지 네트워크 (PoPs)에 알 수 없는 사용자 콘텐츠 (HTML)를 캐시하기로 결정했습니다. 이제 신규 사용자는 먼 데이터 센터가 아닌 근처 서버에서 제공되는 홈페이지 콘텐츠를 이용할 수 있습니다. eBay는 이 기능이 더 큰 영향을 미칠 수 있는 해외 시장에서 아직 실험하고 있습니다.
여기서 '절단'은 알 수 없는 사용자의 네트워크 지연 시간과 서버 처리 시간 모두를 의미합니다.
다른 플랫폼을 위한 최적화
iOS/Android 앱 파싱 개선사항
iOS/Android 앱은 응답 형식이 일반적으로 JSON인 백엔드 서비스와 통신합니다. 이러한 JSON 페이로드는 크기가 클 수 있습니다. eBay는 전체 JSON을 파싱하여 화면에 렌더링하는 대신 즉시 표시해야 하는 콘텐츠에 최적화된 효율적인 파싱 알고리즘을 도입했습니다.
이제 사용자가 콘텐츠를 더 빨리 볼 수 있습니다. 또한 Android 앱의 경우 사용자가 검색창에 입력을 시작하는 즉시 eBay에서 검색 뷰 컨트롤러를 초기화하기 시작합니다 (iOS에서는 이미 이 최적화가 적용됨). 이전에는 사용자가 검색 버튼을 누른 후에만 이 작업이 실행되었습니다. 이제 사용자는 검색 결과에 더 빠르게 도달할 수 있습니다. 여기서 '컷'은 기기가 관련성 높은 콘텐츠를 표시하는 데 걸리는 시간입니다.
Android 앱 시작 시간 개선
이는 Android 앱의 콜드 스타트 시간 최적화에 적용됩니다. 앱이 콜드 스타트되면 OS 수준과 애플리케이션 수준에서 많은 초기화가 발생합니다. 애플리케이션 수준에서 초기화 시간을 줄이면 사용자가 홈 화면을 더 빨리 볼 수 있습니다. eBay는 프로파일링을 통해 콘텐츠를 표시하는 데 모든 초기화가 필요한 것은 아니며 일부는 지연 실행할 수 있음을 확인했습니다.
더 중요한 것은 eBay에서 화면 렌더링을 지연시키는 차단 서드 파티 애널리틱스 호출이 있음을 확인했다는 점입니다. 차단 호출을 삭제하고 비동기화하면 콜드 스타트 시간이 더욱 빨라졌습니다. 여기서 '단축'은 Android 앱의 불필요한 시작 시간을 의미합니다.
결론
eBay에서 실적을 '삭감'한 모든 조치가 합쳐져 실적 개선에 기여했으며, 이러한 조치는 일정 기간에 걸쳐 이루어졌습니다. 이 버전은 연중 단계적으로 출시되었으며, 각 버전에서 수십 밀리초가 단축되어 궁극적으로 eBay가 현재의 상태에 도달했습니다.
성능은 기능이자 경쟁 우위입니다. 최적화된 환경을 제공하면 사용자 참여도, 전환수, ROI가 높아집니다. eBay의 경우 이러한 최적화는 노력이 적게 드는 작업부터 고급 작업까지 다양했습니다.
수많은 절삭으로 속도 높이기를 자세히 알아보고 가까운 시일 내에 eBay 엔지니어가 실적 개선 작업에 관해 작성한 자세한 도움말을 기대해 주세요.