<aside> 📌 프론트엔드 성능 최적화를 위한 아티클 [FE 최적화] 0. 프론트엔드 최적화 관련 개념 정리 및 간단한 적용 [FE 최적화] 1. 페이지 로드 및 웹 성능 최적화 [FE 최적화] 2. React 렌더링 성능 최적화

</aside>

Performance

이미지 용량 축소

큰 스크린 크기에서도 깨지지않고 보일 수 있을 사이즈로 내보낸 뒤 이미지 압축을 진행했어요.

• 배경이미지
  • 1.7MB svg 파일 ⇒ 577KB png 파일로 변경했어요.
  • 그라데이션 컬러 위에 투명도 50%의 패턴을 넣어 만든 이미지라 이미지 압축 시 망점처럼 깨지는 현상이 있었어요. 투명도 대신 비슷한 색감을 내는 색상으로 변경하여 깨지는 현상을 방지했어요.
• 게임모드 일러스트레이션
  • 2.7MB svg 파일 ⇒ 41KB png 파일로 변경했어요.

이미지 재사용 및 사이즈 지정

• 로고 이미지
  • 이미지를 한번만 다운로드하여 재사용할 수 있도록, 기존 두가지 사이즈의 로고 파일을 사용하는 것에서 더 작은 용량에 큰 사이즈를 가진 한가지 사이즈로 변경했어요.
  • 이미지가 렌더링 될 때 사이즈가 지정되어있지 않아서 생기는 레이아웃 이동을 방지하기 위해서 가로와 세로 값을 지정했어요.

번들 사이즈 줄이기

첫째로 전체 페이지의 초기 로드되는 데 걸리는 시간을 줄여보려고 해요. 페이지의 로딩 속도는 사이트의 서버, 파일 크기, 이미지 등 다양한 요인으로 인해 발생할 수 있어요. 현재 리액트로 구현한 우리 프로젝트는 맨처음 페이지에 진입하면 웹팩에서 압축한 번들파일을 다운 받기 때문에 로딩 시간이 3.46s 정도로 나타났어요.

로컬 기준, 초기 로딩에 걸리는시간 (3.46s)

SPA의 특징으로 맨처음 로딩할 때, 페이지의 전체 리소스를 다운 받게 돼요. 이때, 우리는 당장 보지 않아도 될 페이지의 리소스까지 기다리게되고, 리소스를 다 다운 받게 되면, 처음 페이지가 렌더링되고 우리 눈에 페이지가 보이게 되어요. 그래서 당장 필요없는 컴포넌트들을 lazy-loading 할 수 있게 만들어 초기 로딩 시간을 줄이기 위해 React.lazy와 Suspense 컴포넌트를 활용해 **코드 분할(code-splitting)**을 진행해보았어요.

• 관련 개념 정리
• 코드

결과비교

개선 전

개선 후