성능 분석 및 최적화 테스트

Overview

다양한 상황에서의 웹 성능 분석 및 최적화 실습을 진행하였습니다.

리액트 성능 분석 및 최적화

• React.memo : https://ckstn0777.github.io/react-playground/playground/1
• useMemo : https://ckstn0777.github.io/react-playground/playground/2, https://ckstn0777.github.io/react-playground/playground/3
• useCallback : https://ckstn0777.github.io/react-playground/playground/4
• Race Condition : https://ckstn0777.github.io/react-playground/playground/5
• Race Condition in Suspense : https://ckstn0777.github.io/react-playground/playground/6

이미지 LCP 성능 분석 및 최적화

• IMG LCP : https://ckstn0777.github.io/react-playground/LCP/img.html
• CSS Background IMG LCP : https://ckstn0777.github.io/react-playground/LCP/background-image.html
• Preload-Scanner : https://ckstn0777.github.io/react-playground/LCP/preload-image.html

폰트 CLS 최적화

• 폰트 CLS : https://ckstn0777.github.io/react-playground/FontCLS/font.html

참고 자료

• https://www.joshwcomeau.com/react/why-react-re-renders/
• https://www.joshwcomeau.com/react/usememo-and-usecallback/
• https://yceffort.kr/2022/06/optimize-LCP
• https://yceffort.kr/2022/06/preload-scanner