[REFACTOR] 로딩 및 렌더링 성능 개선

[Hain-tain]

📌 어떤 기능을 리팩터링 하나요?

리팩터링 할 기능에 대해 간결하게 설명해주세요

• LCP 2.5 초 이내로

• lighthouse 점수 95점 이상으로

• 캐시 관리

  • 빌드시 cache busting 적용
    • 빌드 파일에 버전 정보와 content hash를 붙입니다. content hash는 파일 내용에 따라 hash가 결정되며 변경사항이 없을 시 동일한 hash 값이 붙습니다.

• API 서버 preconnect

  • 초기 렌더링 속도 개선을 위해 일정 시간 안에 확실히 통신을 할 API 서버와 preconnect를 합니다.

• Max depth DOM 경고 제거

  • codemirror의 gutter(코드 블록을 '>' 로 접는 기능)부분의 Max depth DOM을 제거합니다. 썸네일 코드에서는 해당 기능이 필요가 없을 것 같아 false 시켰고 추후 DOM depth를 평탄화해 사용하는 커스텀 기능이 필요합니다.

AS-IS

• 코드잽 성능 리포트

TO-BE

⏳ 예상 소요 시간

이슈를 완료하기까지 예상되는 소요 시간을 분 or 시간 or 일 단위로 작성해주세요.
1일

🔍 참고할만한 자료(선택)

[Hain-tain]

번들 사이즈 최적화

• Bundle 사이즈 최적화 #716

📌 어떤 기능을 리팩터링 하나요?

Code Splitting

방법

• router 파일의 페이지 컴포넌트를 Suspense, Lazy를 사용하여 CodeSplitting 구현
• 각 번들 파일에 대해 개별적 chunks로 분리 (content hash)

문제

• TreeShaking이 동작하지 않고 여전히 모든 컴포넌트를 한 번에 가져오는 문제
  • 원인 : Barrel 방식에서 Webpack은 SideEffects 가능성이 있다고 판단
  • 해결방안 : Package.json에 명시적으로 SideEffects 가능성을 배제

Code Compression

방법

• compression-webpack-plugin을 사용하여 britli 압축

Before	After

🔍 참고할만한 자료(선택)

Barrel 방식에서 TreeShaking를 위한 SideEffect (1)
Barrel 방식에서 TreeShaking를 위한 SideEffect (2)

[Hain-tain]

MyTemplatePage 초기 랜더링 Layoutshift 개선

⚡️ 관련 이슈

• MyTemplatePage 초기 랜더링 Layoutshift 개선 #706

🪧 리펙토링 결과

• MyTemplatePage 초기 랜더링 Layoutshift 개선
  - GLS 0.837 => 0.012 로 개선

Before	After

📍주요 변경 사항

1. 템플릿 목록, 카테고리 목록, 태그 목록을 한 번에 불러오도록 하고, 서스펜스를 통해 감싸주어 Layoutshift를 개선

• useTemplateCategoryTagQueries 에서 3개의 요청이 모두 성공할 때 까지 기다림

2. Footer 위치 변경되면서 깜빡여 보이는 현상 개선

• Footer 가 첫 요청(로그인 확인) 이후 랜더링 되도록 변경

3. 태그 목록 메뉴가 모두 랜더링 되었다가 1줄로 접히는 현상 해결

• 태그 목록 메뉴에 초기 Heght 설정

---

Before

After

[Hain-tain]

카테고리 또는 태그 1개만 눌러도 모든 페이지가 로딩되는 현상 발생
=> 이를 해결하기 위해 템플릿 목록, 카테고리 목록, 태그 목록을 다시 각각 불러오고, 스켈레톤 UI를 만들어 로딩 상태일 때 같은 크기의 UI 가 보이도록 개선하였다.

그 결과 GLS 0.106으로 늘었으나 체감되는 사용자 경험은 향상되었다.