1. 코어 웹바이탈#
웹 개발자가 서비스를 운영할 때 유념해야할 것으로 코어 웹바이탈이라는 지표가 있습니다.
- LCP
- INP
- CLS
이 3가지는 유저 입장에서 불편함을 느낄 수 있는 항목들을 지표화한 것인데요.
전부 사용자가 직접 인지하는 결과 지표입니다.
- 콘텐츠가 다 보였는가
- 내 클릭에 반응했는가
- 레이아웃이 흔들리지 않았는가
같은 것들이지요.
UX적인 이유에서도 이 성능지표들은 중요하지만, SEO 순위와 직결되는 이유이기도 하기에 자연유입이 중요한 제 현업 도메인에서는 유독 더 중요합니다.
그럼 이 코어웹바이탈 항목을 개선하기 위해서는 어떻게 해야 될까요?
2. LCP를 구성하는 요소#
공식문서를 보면 각 코어 웹바이탈은 여러 요인을 합쳐놓은 것으로 볼 수 있는데, 그 중 LCP는 TTFB + 리소스 로드 딜레이/시간 + 요소 렌더 딜레이를 계산한 것으로 볼 수 있습니다.
- INP도 여러 요인의 집합체로 공식문서 참고
따라서 LCP를 개선하려면 하면 이에 속한 TTFB를 개선하거나 리소스 로드 시간을 줄이기 위해 JS 청크를 줄여야하는 것이지요.
- 즉, TTFB가 600ms면 LCP는 절대 600ms보다 빨라질 수 없습니다
그 중에서도 오늘 메인으로 다룰 주제는 TTFB인데요. 작년쯤 이맘때 쯤 현업에서 진행했던 작업에 대해 회고를 해보려고 합니다.
3. TTFB 개선기#
1) 주요 페이지 문제 확인#
목적 조직에서 비즈니스 기능을 새로 시작하는 시기여서 백엔드 작업이 시작된 와중 프론트쪽 시간이 살짝 비어서 간단히 할 수 있는 기능 개선점을 찾고 있었습니다.
객관적으로 문제점을 찾기 좋은 영역이 네트워크 탭이든 성능검사 탭이든 브라우저 도구를 통한 것이라고 생각했고, 개발자 도구도 살펴보고 페이지 소스 보기도 살펴보던 도중,, 의아한 부분을 발견했는데요
바로 서버로부터 하이드레이션되는 데이터가 3653줄이나 된다는 점이었습니다.
질문상세 페이지가 주요 페이지이긴 하지만 서버로부터 받고 있는 데이터가 페이지 구성에 비해 너무 많다보니 원인분석을 하였고 아래와 같았습니다.
- 웹서버에서 SSR할 때 필요없는 유저 정보 기반의 데이터까지 API 서버에서 가져오고 있다.
- 주요 비즈니스 데이터의 요청 수를 줄이기 위해 비효율적으로 많은 데이터 더미를 한번에 가져오고 있다.
이 두 문제는 문서의 크기가 비대해지게 하며 불필요한 API RTT가 발생하는 원인이므로 개선 시 SSR시 문서 응답 시간 즉, TTFB를 상당히 낮출 수 있는 포인트로 보였습니다.
2) 서버측에서는 불필요한 유저 정보 기반의 데이터#
이 블로그를 만들 때에도 언급했었던 내용으로, CDN 캐싱을 염두에 두고 있었기에 서버측에서 유저 정보 기반 UI는 렌더링하지 않도록 구성하였었습니다.
- ex) 답변 평가 여부, 좋아요/싫어요 여부 등
만약 A라는 유저의 정보를 토대로 렌더링된 페이지가 CDN에 캐싱이 되었다가 전혀 다른 B유저에게 서빙이 되면 곤란하기 때문이지요.
그러한 이유로 SSR을 할 때 사용하지 않고 있음에도 API는 유저정보 기반 데이터를 응답하고 있었습니다.
- ex) downVoted, upVoted
물론 웹서버측에서는 이 API를 요청할 때 헤더에 토큰을 싣지 않고 있기도 하고, CDN 캐싱 기법이 적용되어 있지 않기에 문제가 발생할 위험은 없지만
API 입장에서는 유저 토큰이 없어도 관련 테이블을 조인을 해보거나 예외처리는 하고 있다는 뜻이고
더욱이 가장 자연유입이 많기도 한 질문상세 페이지에 들어올 때 마다 요청되고 있는 API이다보니 이는 개선 포인트로 보였습니다.
즉, 프론트 입장에서는 불필요하게 하이드레이션 되는 데이터를 줄일 수 있는 작업이고, 백엔드도 MSA구조에서 테이블 조인으로 인해 발생하는 RTT를 개선 or 코드 가독성을 개선할 수 있는 작업이라 판단되어
기존 API를
- 웹서버측에서 유저 토큰 없이 요청할 정적 데이터 기반 API
- 클라이언트에서 유저 토큰이 있을 때 요청할 동적 데이터 기반 기반 API
로 분리하는 것이 어떠할지 제안을 드려봤습니다.
이 전략은 주로 저희 서비스에 들어오는 유저는 검색엔진을 통한 자연유입이기 때문에 비로그인 유저가 많아 웹서버측에서의 요청만으로 대부분의 트래픽을 처리가능하다는 기존 장점을 살림과 동시에 가장 다이어트된 형태로 데이터를 제공한다는 것입니다.
다만 해당 기술 작업은 당시 비즈니스 업무의 편중으로 작업 공수가 나질 않아 다음을 기약하게 되었습니다.
밀리고 밀렸지만 올해 하반기 있을 질문상세 페이지 리뉴얼이 비즈니스 업무로 예정되어 있어 같이 진행 가능할 것으로 보입니다 ㅎㅎ
3) 필요한 데이터를 비효율적으로 가져오고 있다#
서비스에는 토픽이라는 주요 비즈니스 데이터가 존재하는데 이를 질문상세 페이지에서 렌더링하기 위해서 약 250개의 데이터 배열을 API 요청하여 가져온 후 질문에 맞는 토픽을 찾아서 사용하는 비효율이 있었습니다.
예를 들면 제가 질문상세 페이지에서 필요한 것은 형사 토픽 하나인데 [민사, 형사, 가족이혼, 인사 , ...약 240개]를 모두 벌크로 가져와서 find하는 방식인 것이죠.
실제로 하이드레이션 되는 데이터 중 거의 2/3가 이 토픽 배열 데이터였다보니 앞서 다루었던 문제보다 더 큰 비중을 차지하고 있었습니다.
이 벌크 조회 -> 단건 조회로 수정 작업은 2)에 비해서 아주 간단하면서도 타 챕터와의 협업 없이 가능하다는 장점이 있어 바로 작업하였습니다.
4. 운영환경 기준 성과#
1) 기존대비 문서크기 6~7% 감소#
개선 작업을 통해 하이드레이션 페이로드 라인이 3653 -> 634줄(88% 감소)이 되었고
운영환경에서 실제 등록된 인기 질문을 기준으로 SSR된 문서의 크기가 7KB~10KB 정도 (기존대비 약 6~7%) 감소하였습니다.
또한 자연스럽게 TTFB 시간에 큰 개선이 있었는데요.
네트워크 탭을 통해 클라이언트가 HTML 문서를 받는데에 걸린 시간을 비교해보니 아래와 같았습니다.
2) 기존대비 TTFB 70% 감소#
1️⃣ 개선 전#
2️⃣ 개선 후#
브라우저 캐시를 끄고 여러 번 반복 측정했을 때 (네트워크 노이즈 때문인지) ±20ms 수준의 변동은 있었으나 TTFB가 기존대비 약 70% 감소하는 경향은 일관되게 관찰되었습니다
3) 컨테이너 메모리 사용량 개선#
서버측 메모리 점유율에도 10% ~ 15% 정도의 상당한 개선이 있었습니다.
약 240개 가량의 토픽 배열을 매 요청마다 메모리에 올렸다 버렸다하는 현상이 사라졌기 때문으로 보입니다.
5. 앞으로는 어떻게 해야할까?#
1) 렌더링 기법 변화#
1️⃣ 콘텐츠의 성격에 맞는 렌더링 방식인가#
이번 글에서 SSR 하에서 최적화하는 방법에 대해 고민/개선하였지만 사실 지금 SSR 자체가 서비스에 적합한 방식은 아니라고 생각합니다.
질문상세 페이지의 메인 콘텐츠는 내용의 수정 빈도가 높지 않은 텍스트이므로, 특징상 서버에서 동적으로 매 요청마다 새로 처리해야 될 필요가 없기 때문인데요.
이렇게 SSR로 돌아가는 상황에서 아무리 더 최적화한다한들 본래 적합한 정적 렌더링 방식에 비해 구조상
- 서버 비용 낭비
- 지금 언급한 TTFB처럼 서버가 요청을 처리하는데에서 필연적인 성능 저하
가 따라올 수 밖에 없습니다.
2️⃣ 어떻게 바꿔 볼 예정인가#
지금까지는 서비스 인프라에 너무 큰 변혁을 가져다주고 비즈니스 업무에 밀려 함부로 작업하지 못했으나 올해 하반기 예정된 주요 페이지 리뉴얼을 통해 근간을 아래처럼 바꿔보려고 합니다.
- 주기적으로 정적 페이지를 생성하는 ISR
- 답변이 달렸거나 유저나 어드민에서 콘텐츠를 수정했을 때 이 정적 페이지를 갱신하기 위한 On Demand Revalidation
- 어드민같은 외부 서비스에서 곧바로 서비스에 갱신 요청을 할 수 있도록 Route Handler로 On Demand Revalidation를 트리거하도록 구성
을 조합하는 방식으로 인프라 변경을 구상하고 있습니다.
장점은 역시
- 정적 페이지가 생성되었다면 런타임에서 렌더링 단계가 제거되어 코어웹바이탈 지표 향상 - UX 개선 및 SEO 순위에 이점
- 서버 인프라 축소 가능 - 비용 감소
를 꼽을 수 있습니다.
2) CDN 캐싱#
정적 렌더링 방식이 성공한다면 추가로 CDN 캐싱을 선택할 수 있습니다.
위 인프라 변혁이 이루어진다면 Cloudfront를 통해 요청 시 거쳐야할 인프라 RTT를 더 줄일 수 있는데요.
즉 Cloudfront는 인프라 설계 레이어의 제일 앞단에 위치하다보니 요청이 들어왔을 때 곧바로 응답할 수 있게 되므로 TTFB를 더 개선할 수 있고
캐시로 인해 오리진 서버(Next 서버)를 거치는 횟수가 꽤 줄어들테니 데이터 트랜스퍼 비용 절감 효과도 기대해볼 수 있습니다.
오리진 서버에서 정적 서빙을 한다면 CDN까지 붙이는 게 너무 투머치가 아닐까 싶지만 서버의 리전이 서울에 있는 상태이고, 저희 서비스가 글로벌 트래픽을 완전히 무시할 수는 없는 수치인 듯하여 고려해야 된다고 판단했습니다.
6. 정리#
이 작업이 저에게 의미가 깊었던 것은 프론트엔드 사이드에서 잘 언급되지 않는 부분을 개선하여 최적화를 성공했기 때문이었습니다.
개인적으로 느꼈던 프론트 성능 최적화 글은 대부분 번들 사이즈, 이미지 최적화, 코드 스플리팅에 집중하는 것을 볼 수 있습니다.
문서크기와 그 안의 하이드레이션 페이로드는 시야 밖에 있는 경우가 많은 것이지요.
그 부분을 찾아 LCP 하한선이라는 코어웹바이탈 개선의 작업이 될 수 있었다는게 뿌듯했네요 ㅎㅎ