LCP 시간이 과도하게 높게 측정되는 이슈

[bomi8489]

📑 유저 스토리

🚧 이슈 내용

LightHouse에서 측정한 현재 배포된 LinkHub 사이트의 LCP

처음엔 이미지 로딩 지연시간이 길게 표시되는 것만 보고 이미지 압축이 제대로 되지 않은 문제라고 판단했습니다.

하지만, 실제로는 압축도 잘 되고있었고 무엇보다, 이미지 컴포넌트를 주석처리 후 다시 LightHouse 성능검사를 돌려본 결과 다른 텍스트 콘텐츠에서 렌더링 지연이 발생하는 이슈가 생겨 이미지와는 관계없다고 판단하였습니다.

따라서, 로딩지연 및 렌더링 지연이 발생하는 원인을 찾아 해결할 예정입니다.

가정1

• 메인화면에서 인기 LinkList와 전체 SpaceList를 fetch해서 렌더링 해주는데 현재 코드 상으로 인기 LinkList가 fetch되기 전까지 아무 컨텐츠도 로드하고 있지 않은 상태

  return isPopularLinksLoading ? (
    <DeferredComponent>
      <Spinner />
    </DeferredComponent>
  ) : (
    <메인화면 컨텐츠>...</메인화면 컨텐츠>
  )

• LinkList 로드시간이 늦어지면 늦어질 수록 Link와 상관없는 다른 컨텐츠의 렌더링도 지연될 것으로 추측
  
• 따라서, LinkList 컴포넌트를 따로 별도의 모듈로 뺀 후 Suspense로 LinkList가 로드되는동안 fallback UI를 보여주면 렌더링 지연이 해결되지 않을까?

🔍 참고한 글