프론트엔드 성능 최적화를 위해 어떤 방법을 사용해본 경험이 있나요?

학부 프로젝트에서 React 앱을 배포하면서 초기 로딩 속도가 너무 느리다는 팀원 피드백을 받았습니다. Lighthouse로 측정해보니 First Contentful Paint가 4.2초로 기준치를 크게 넘었습니다. 원인을 분석하니 두 가지가 주요 문제였습니다. 첫 번째는 이미지를 원본 크기 그대로 사용한 것이었고, 두 번째는 번들에 사용하지 않는 라이브러리가 포함된 것이었습니다. 이미지는 WebP 포맷으로 변환하고 lazy loading을 적용했고, 번들은 트리 쉐이킹과 코드 스플리팅으로 초기 로드 크기를 줄였습니다. 최적화 후 FCP가 4.2초에서 1.8초로 줄었고, 성능 점수도 52점에서 81점으로 올랐습니다. 이 경험에서 프론트엔드 최적화는 측정 도구로 병목을 먼저 파악하는 것이 출발점임을 배웠습니다.