lighthouse 개선(1) FCP(사용하지 않는 자바스크립트 줄이기)

FCP (First Contentful Paint)

FCP는 웹 페이지가 로드되기 시작한 시점부터 사용자가 처음으로 의미 있는 컨텐츠를 시각적으로 확인할 수 있는 순간까지의 시간을 측정하는 중요한 웹 성능 지표입니다.

의미 있는 컨텐츠란 텍스트, 이미지, SVG, canvas 등의 시각적 요소를 포함하며, 사용자는 이를 통해 웹 페이지가 정상적으로 로드되고 있음을 인지할 수 있습니다.

FCP 성능 기준

FCP 시간(초)	성능 등급
0~1.8	녹색 (빠름)
1.8~3	주황색 (보통)
3초 초과	빨간색 (느림)

FCP는 Lighthouse를 사용하여 측정할 수 있으며, 이번 최적화에서는 Lighthouse의 진단 항목 중 사용하지 않는 자바스크립트 줄이기를 적용하였습니다.

자바스크립트 최적화

스크립트 크기는 브라우저의 렌더링 속도에 직접적인 영향을 미칩니다.

브라우저는 스크립트를 다운로드, 파싱, 컴파일, 실행한 후에야 렌더링 작업을 시작할 수 있기 때문에, 스크립트 크기가 작아질수록 초기 렌더링 속도가 크게 향상됩니다.

현재 배포 환경에서는 Vite를 사용하여 자바스크립트 번들을 최적화하고, 사용되지 않는 코드를 자동으로 제거합니다. 이에 더하여, 저희는 불필요한 코드와 중복을 제거하고, 컴포넌트의 동작을 최적화하여 **FCP(First Contentful Paint)**와 전체 렌더링 성능을 개선하였습니다.

---

최적화 활동

1. 중복 코드 제거

   기존에 두 개의 useEffect를 사용하여 currentPage 상태를 관리했으나, 이를 하나로 통합하여 코드 간소화와 유지 보수성을 높였습니다.

   변경 전:

   useEffect(() => {
     if (currentPage) return;
     setIsPanelOpen(false);
   }, [currentPage]);
   
   useEffect(() => {
     if (!currentPage) return;
     setIsPanelOpen(true);
   }, [currentPage]);

   변경 후:

   useEffect(() => {
     setIsPanelOpen(!!currentPage);
   }, [currentPage]);

2. 제거된 기능 코드 제거

   렌더링 중인 컴포넌트 중 요구 사항 변경으로 deprecated 되었지만 코드가 남아 있던 부분을 제거하였습니다.

3. Default 값 변경

   구분선 컴포넌트의 기본값(default)이 "가로"로 설정되어 있었으나, 실제 사용 사례는 모두 "세로"였으므로 default를 "세로"로 변경하였습니다.

4. 불필요한 Export 제거

   내부적으로만 사용되는 코드에서 외부로의 export를 제거하여 모듈 관리 효율성을 높였습니다.

5. 주석 정리

   역할 설명 및 TODO 형식으로 작성된 주석을 별도로 관리하도록 옮기고, 소스 코드 내 불필요한 주석을 모두 삭제하여 코드 가독성을 개선했습니다.

---

결과

FCP를 포함한 여러 성능 지표가 개선되었습니다.

FCP는 기존 대비 0.2초 단축되었으며, 성능 점수와 Speed Index에서도 긍정적인 결과를 얻었습니다.

항목	개선률
Performance 점수	+7.84%
FCP	−2.27%
LCP	−3.77%
Total Blocking Time	−56.25%
Speed Index	−10.61%

스크립트 최적화를 통해 초기 렌더링 속도와 사용자 경험이 눈에 띄게 개선되었으며, 특히 Total Blocking Time의 대폭 감소는 브라우저가 FCP를 더 빠르게 도달하도록 만든 주요 요인으로 작용하였습니다.

---

참고 문헌

• Web – 웹 페이지 성능 측정 지표
• Lighthouse 활용 사례