프론트엔드 성능 최적화

Jump to bottom

Tobi(토비) edited this page Mar 31, 2024 · 11 revisions

1. 렌더링 최적화

목표

상호작용 시 리액트 컴포넌트 리렌더링을 최소화한다.

방법

불필요한 state 제거
컴포넌트 분리
React.memo 적용

성과

공부방 목록과 공부방 내부 페이지 리팩토링을 통해 리렌더링 횟수를 감소시켜 사용자 인터랙션 시 소요되는 렌더링 시간을 단축시켰다.

공부방 내부 페이지 리팩토링 (#이슈134)

리팩토링 전

(전) 공부방 페이지 리렌더링
(전) 채팅 전송 프로파일링
(전) 하단바 마이크 켜기 프로파일링

리팩토링 후

(후) 공부방 페이지 리렌더링
(후) 채팅 전송 프로파일링
(후) 하단바 마이크 켜기 프로파일링

공부방 목록 페이지 리팩토링 (#이슈168)

리팩토링 전

(전) 공부방 생성 모달 리렌더링
(전) 모달 열기 프로파일링
(전) 방 이름 입력 프로파일링

리팩토링 후

(후) 공부방 생성 모달 리렌더링
(후) 모달 열기 프로파일링
(후) 방 이름 입력 프로파일링

2. Lighthouse 성능 점수 개선

목표

배포한 웹페이지의(tody.kr) 성능을 Lighthouse로 측정하고, 제공된 진단을 참고하여 성능 점수를 개선한다.

방법

React.lazy를 활용해 코드 스플리팅을 적용한다.
viewport meta 태그를 적용한다.
font-display 속성을 통해 웹폰트 로딩 중에도 텍스트가 보이도록 설정한다.

성과

리팩토링을 통해 Lighthouse 성능 점수를 87점 → 100점으로 개선했다.