더 빠른 사용자 환경을 위해 eBay 사이트와 앱의 성능을 최적화합니다.
2019년 eBay에서는 Speed가 전사적 이니셔티브로, 사용자에게 가능한 한 빠르게 사이트와 앱을 제공하기로 결심한 팀이 많습니다. 실제로 eBay에서는 검색 페이지 로드 시간이 100밀리초 개선될 때마다 '장바구니에 추가' 횟수도 0.5% 씩 증가했습니다.
100밀리초
로드 시간 개선
0.5%
'장바구니에 추가' 횟수 증가
eBay는 성능 예산 (Chrome 사용자 환경 보고서로 경쟁 연구 결과 도출)을 채택하고 주요 사용자 중심 성능 측정항목에 집중함으로써 사이트 속도를 크게 개선할 수 있었습니다.
...그리고 Chrome 사용자 환경 보고서 데이터에도 이러한 개선사항이 강조되어 있습니다.
아직 해야 할 일이 더 많이 있지만, eBay에서 지금까지 알게 된 사실은 다음과 같습니다.
웹 실적 '단축'
eBay에서는 사용자 여정에 참여하는 다양한 항목의 감소 또는 '절감' (크기와 시간)을 통해 이러한 개선이 가능했습니다. 이 게시물에서는 eBay의 특정 주제가 아니라 웹 개발자 커뮤니티와 관련된 주제를 다룹니다.
모든 텍스트 리소스에서 페이로드 줄이기
사이트의 속도를 높이는 한 가지 방법은 간단하게 로드하는 코드를 줄이는 것입니다. eBay는 사용자에게 제공되는 자바스크립트, CSS, HTML, JSON 응답에서 사용되지 않는 불필요한 바이트를 모두 잘라 텍스트 페이로드를 줄였습니다. 이전에는 새로운 기능을 출시할 때마다 eBay가 미사용 항목을 정리하지 않고 응답의 페이로드를 계속 늘렸습니다. 이 문제가 시간이 지남에 따라 합쳐져 성능 병목 현상이 발생했습니다. 팀은 일반적으로 이러한 정리 작업을 미루지만 eBay를 통해 얼마나 절약되었는지 알 수 있습니다.
여기서 'cut'은 응답 페이로드에서 낭비된 바이트입니다.
스크롤 없이 볼 수 있는 부분의 콘텐츠에 대한 중요 경로 최적화
화면의 모든 픽셀이 동일하게 중요한 것은 아닙니다. 스크롤 없이 볼 수 있는 부분의 콘텐츠는 스크롤해야 볼 수 있는 부분보다 더 중요합니다. iOS/Android/데스크톱 및 웹 앱에서는 이 점을 알고 있지만 서비스에는 어떤 것이 있을까요? eBay의 서비스 아키텍처에는 환경 서비스라는 레이어가 있으며, 이 레이어는 프런트엔드 (플랫폼별 앱 및 웹 서버)와 통신합니다. 이 레이어는 항목, 사용자, 주문과 같은 항목 기반이 아닌 뷰 기반 또는 기기 기반으로 구체적으로 설계되었습니다. 그런 다음 eBay에서는 경험 서비스의 중요한 경로에 관한 개념을 도입했습니다. 이러한 서비스에 요청이 오면 다른 업스트림 서비스를 동시에 호출하여 스크롤 없이 볼 수 있는 콘텐츠의 데이터를 즉시 가져옵니다. 데이터가 준비되면 즉시 플러시됩니다. 스크롤해야 볼 수 있는 부분 데이터는 나중에 청크로 전송되거나 지연 로드되어 전송됩니다. 그 결과 사용자가 스크롤 없이 볼 수 있는 콘텐츠를 더 빠르게 볼 수 있습니다
여기서 '단축'은 서비스가 관련 콘텐츠를 표시하는 데 소비한 시간입니다.
이미지 최적화
이미지는 페이지 팽창에 가장 큰 영향을 주는 요소 중 하나입니다. 사소한 최적화도 큰 도움이 됩니다. eBay에서는 이미지에 관해 두 가지 최적화가 수행되었습니다.
첫째, eBay는 iOS, Android, 지원되는 브라우저 등 모든 플랫폼의 검색결과를 WebP 이미지 형식으로 표준화했습니다. 검색결과 페이지는 eBay에서 가장 이미지가 많은 페이지이며 이미 WebP를 사용하고 있었지만 일관된 패턴은 아닙니다.
둘째, eBay의 등록정보 이미지는 크기와 형식 모두 고도로 최적화되어 있지만 선별된 이미지(예: 홈페이지의 상단 모듈)에는 똑같이 적용되지 않았습니다. eBay에서는 다양한 도구를 통해 직접 선별한 이미지를 많이 업로드합니다. 이전에는 최적화가 업로더에 달려 있었지만 이제 eBay에서는 도구 내에서 규칙을 시행하므로 업로드된 모든 이미지가 적절하게 최적화됩니다.
여기서 '컷'은 사용자에게 전송된 이미지 바이트 낭비입니다.
정적 애셋의 예측적 미리 가져오기
eBay의 사용자 세션은 한 페이지가 아닙니다. 흐름입니다. 예를 들어 홈페이지에서 검색 페이지로, 항목 페이지로 이동하는 흐름이 될 수 있습니다. 그렇다면 흐름에 있는 페이지가 서로에게 도움이 되지 않는 이유는 무엇일까요? 이것이 바로 예측적 미리 가져오기라는 개념으로, 한 페이지가 다음에 있을 가능성이 높은 페이지에 필요한 정적 애셋을 미리 가져옵니다.
예측 미리 가져오기를 사용하면 사용자가 예측 페이지로 이동할 때 자산이 이미 브라우저 캐시에 있습니다. 이 과정은 URL을 미리 가져올 수 있는 CSS 및 JavaScript 애셋에 대해 수행됩니다. 여기서 주의할 점은 이 기능은 처음 내비게이션을 사용할 때만 도움이 된다는 것입니다. 이후 탐색에서는 정적 애셋이 이미 캐시에 있습니다.
여기서 'cut'은 첫 번째 탐색에서 CSS 및 JavaScript 정적 애셋의 네트워크 시간입니다.
인기 검색결과 미리 가져오기
사용자가 eBay를 검색할 때 eBay의 분석 데이터에 따르면 사용자가 상위 10개 검색 결과에 포함된 항목으로 이동할 가능성이 매우 높습니다. 따라서 이제 eBay는 검색에서 항목을 미리 가져오고 사용자가 탐색할 때 준비된 상태로 유지합니다. 미리 가져오기는 두 가지 수준에서 이루어집니다.
첫 번째 수준은 서버 측에서 발생하며, 항목 서비스는 검색결과에서 상위 10개 항목을 캐시합니다. 이제 사용자가 이러한 항목 중 하나로 이동하면 eBay에서 서버 처리 시간을 절약할 수 있습니다. 서버 측 캐싱은 플랫폼별 앱에서 활용되며 전역으로 출시됩니다.
다른 수준은 오스트레일리아에서 사용할 수 있는 브라우저 캐시에서 발생합니다. 항목 미리 가져오기는 항목의 동적 특성으로 인한 고급 최적화였습니다. 페이지 노출수, 용량, 입찰 항목 등 많은 미묘한 차이가 있습니다. 자세한 내용은 LinkedIn의 성능 엔지니어링 정기 모임 프레젠테이션에서 알아보거나 이 주제에 관한 eBay 엔지니어의 자세한 블로그 게시물을 기대해 주세요.
여기에서 '컷'은 항목이 캐시된 위치에 따라 서버 처리 시간이 될 수도 있고 네트워크 시간이 될 수도 있습니다.
검색 이미지의 즉시 다운로드
검색 결과 페이지에서 높은 수준에서 검색어가 검색되면 다음 두 가지 상황이 발생합니다. 하나는 쿼리와 일치하는 가장 관련성이 높은 항목이 반환되는 재현율/순위 단계입니다. 두 번째 단계는 배송비와 같은 추가적인 사용자 컨텍스트 관련 정보로 리콜된 항목을 보강하는 것입니다. 이제 eBay에서는 첫 번째 10개 항목 이미지를 헤더와 함께 즉시 브라우저에 청크로 전송하므로 나머지 마크업이 도착하기 전에 다운로드를 시작할 수 있습니다. 따라서 이미지가 더 빠르게 표시됩니다. 이 변경사항은 웹 플랫폼을 대상으로 전 세계적으로 적용됩니다.
여기에서 '잘라내기'는 검색결과 이미지의 다운로드 시작 시간입니다.
자동 추천 데이터의 에지 캐싱
사용자가 검색창에 문자를 입력하면 추천 목록이 표시됩니다. 이 제안사항은 최소 하루 동안 문자 조합에 대해 변경되지 않습니다. 데이터 센터까지 전달되는 요청 대신 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의 사례에서, 이러한 최적화 작업은 적은 노력이 필요한 것부터 몇 가지 고급화된 최적화까지 다양하게 적용했습니다.
Speed by a천 컷에서 자세히 알아보고 eBay 엔지니어가 조만간 성능 작업을 다룬 자세한 기사도 기대해 주세요.