Airbnb는 HTTP 스트리밍으로 웹 성능을 향상시킵니다.

InfoQ 홈페이지 뉴스 Airbnb, HTTP 스트리밍으로 웹 성능 향상

2023년 6월 20일 2분 분량의 읽기

~에 의해

라팔 간카즈

Airbnb는 웹사이트의 페이지 로딩 성능을 향상시키기 위해 HTTP 스트리밍을 도입했습니다. 그들은 홈페이지를 포함하여 테스트한 모든 페이지에서 First Contentful Paint(FCP) 지표를 약 100밀리초 줄였습니다. 또한 느린 백엔드 쿼리가 로드 시간에 미치는 영향을 최소화했습니다.

Airbnb는 가능한 한 빨리 웹사이트 사용자에게 콘텐츠를 제공하는 데 있어 가능한 개선점을 모색해 왔으며 페이지 본문이 완전히 렌더링된 후에만 페이지 본문을 보내는 것은 특히 본문 콘텐츠가 백엔드 쿼리에 의존하는 경우 최상의 사용자 경험을 제공하지 않는다는 것을 확인했습니다. 또한 웹 페이지에는 일반적으로 콘텐츠를 사용자에게 올바르게 표시하기 위해 브라우저에서 다운로드하는 CSS 파일 및 외부 Javascript 파일과 같은 많은 추가 리소스가 필요합니다. 이러한 종속성으로 인해 연쇄적인 리소스 요청이 발생하는 경우가 많으며 이는 Chrome의 Waterfall과 같은 네트워크 시퀀스 보기에서 가장 잘 설명됩니다.

출처: https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

브라우저가 외부 리소스를 더 일찍 다운로드할 수 있도록 하는 잘 알려진 방법은 HTML 문서 시작 부분 근처의 태그 내부에 해당 리소스를 참조하는 모든 태그를 배치하는 것입니다. 브라우저는 태그를 읽을 때 외부 리소스를 다운로드합니다. 일반적으로 이는 전체 HTML 문서가 전달된 후에만 발생하며 콘텐츠가 느린 백엔드 쿼리를 기반으로 하는 경우 시간이 걸릴 수 있습니다.

Early Flush는 HTTP 스트리밍을 활용하여 브라우저가 외부 리소스를 더 일찍 인식하도록 하는 기술 중 하나입니다. HTML 문서를 두 부분으로 분할하고 청크 분할 전송 인코딩을 사용하여 별도로 전송해야 합니다. 브라우저는 HTML 문서의 시작 부분만 포함하는 초기 청크가 수신되고 구문 분석되자마자 외부 리소스 다운로드를 시작할 수 있습니다.

초기 플러시 기술은 새로운 것은 아니지만 닫는 태그 없이 HTML의 불완전한 부분을 렌더링하고 보내야 하기 때문에 널리 사용되지 않았습니다. Airbnb는 Express 기반 NodeJS 서버를 사용하여 React를 사용하여 웹페이지를 렌더링했으며 이전에 전체 HTML 문서를 세 개의 별도 문서로 렌더링하는 데 사용된 단일 React 구성 요소를 재작업해야 했습니다.

초기 플러시를 사용하면 CSS 및 Javascript 리소스에 대한 네트워크 폭포를 최적화하는 데 도움이 되지만 페이지 본문 렌더링 지연은 처리되지 않습니다. 최신 웹 앱 프레임워크를 사용하면 클라이언트 또는 서버 측(서버 측 렌더)에서 콘텐츠를 렌더링하고 데이터를 별도로 가져올 수 있지만 이를 위해서는 또 다른 네트워크 요청이 필요합니다.

Airbnb는 페이지에 필요한 데이터가 포함된 지연 데이터 청크라고 불리는 세 번째 청크를 도입하여 스트리밍 접근 방식을 더욱 발전시켰습니다. 그들은 MutationObserver를 사용하여 지연된 데이터가 로드되는 시기를 감지하고 데이터를 애플리케이션의 네트워크 데이터 저장소에 주입하여 기본적으로 추가 네트워크 요청을 대체했습니다.

서버 측 렌더링(SSR)과 클라이언트 측 데이터 가져오기가 병렬로 실행됩니다.

출처: https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

팀은 기술 스택에서 HTTP 스트리밍을 활성화하기 위해 몇 가지 문제를 해결해야 했습니다. 그들은 NGINX의 응답 버퍼링과 haproxy 로드 밸런서의 Nagle 알고리즘을 꺼서 청크된 응답이 변경되지 않고 브라우저에 도달할 수 있도록 했습니다.

Airbnb의 소프트웨어 엔지니어인 Victor Lin은 팀의 경험과 HTTP 스트리밍을 지원하는 성장하는 생태계를 요약합니다.

그 과정에서 어려움이 있었지만 원래는 스트리밍을 지원하도록 기존 React 애플리케이션을 조정하는 것이 원래 설계되지 않았음에도 불구하고 매우 실현 가능하고 강력하다는 것을 알았습니다. 또한 GraphQL의 @defer 및 @stream에서 Next.js의 스트리밍 SSR에 이르기까지 스트리밍 우선순위 방향으로 광범위한 프런트엔드 생태계 추세를 볼 수 있게 되어 기쁩니다.