[ 개선 ] Lighthouse 경고 하나씩 없애보기 0: 성능 점수 49점에서 시작하기

프로젝트를 어느 정도 만들고 나면 한 번쯤 Lighthouse를 돌려보게 된다.

그리고 생각보다 냉정한 숫자를 마주한다.

이번 프로젝트의 Lighthouse 결과는 다음과 같았다.

- Performance: 49
- Accessibility: 95
- Best Practices: 77
- SEO: 75

접근성 점수는 나쁘지 않았지만, Performance 점수가 49점이었다. 특히 주요 지표를 보면 성능 문제가 꽤 명확했다.

- First Contentful Paint: 12.5s
- Largest Contentful Paint: 24.9s
- Speed Index: 12.8s
- Total Blocking Time: 80ms
- Cumulative Layout Shift: 0.134

여기서 눈에 띄는 건 `Total Blocking Time`은 80ms로 나쁘지 않은데, `FCP`, `LCP`, `Speed Index`가 모두 느리다는 점이다.

즉, JavaScript 실행이 오래 막혀서 느린 문제라기보다는, 사용자가 첫 화면을 보기까지 필요한 리소스가 늦게 도착하거나 늦게 발견되는 문제가 더 크다고 볼 수 있다.

 

Lighthouse를 볼 때 점수보다 먼저 볼 것

---

처음에는 Performance 49라는 숫자에만 눈이 간다.

하지만 Lighthouse 점수는 결과이고, 실제로 봐야 하는 건 아래쪽에 나오는 경고들이다.

예를 들면 이런 항목들이다.

- LCP 이미지가 늦게 발견됨
- 큰 JavaScript 번들
- 사용하지 않는 JavaScript
- 이미지 최적화 필요
- 렌더링을 막는 리소스
- 레이아웃 이동 발생

점수 자체를 올리려고 하면 막막하다.  
하지만 경고를 하나씩 보면 할 일이 작아진다.

이번 시리즈는 그래서 Lighthouse 점수를 한 번에 올리는 글이 아니다. Lighthouse가 알려준 경고를 하나씩 없애보는 기록이다.