✔️ 개요

현재까지 진행한 프로젝트를 리팩토링 단계에서 더 좋은 퍼포먼스를 보이기 위해 학습한 과정들을 기록할 예정이에요.

무거워진 웹은 긴 로딩 시간 함께 사용자 경험에 안 좋은 영향을 끼쳐요. 실례로 Pinterest의 경우 긴 로딩 시간으로 인해 사용자가 페이지를 이탈하는 비율이 높았으나 최적화를 통해 이탈률을 줄이고 매출을 40%로 증가시켰다고 해요.

먼저 [FE 최적화] 0. 프론트엔드 최적화 관련 개념 정리 및 간단한 적용 에서 먼저 필요한 개념과 성능 측정 도구를 정리하고, 현재 최적화가 거의 진행되지 않은 프로젝트 상태를 측정해보았어요. 이후, 리액트에서의 로딩 최적화와 렌더링 최적화를 적용하고나서의 결과와 비교해볼 예정이에요.

✔️ 1. 페이지 로딩 및 웹 성능 최적화

Performance

이미지 용량 축소

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

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

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

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

번들 사이즈 줄이기

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