학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 167 · 실전 면접 답변

Lighthouse 성능 점수가 낮을 때 병목을 어떻게 좁히고 개선하나요?

이렇게 답해 보세요 (핵심 답변)

Lighthouse 총점 숫자만 보는 대신 세부 지표(FCP, LCP, TBT, CLS) 중 어느 항목이 점수를 깎고 있는지 먼저 확인하고, 이어서 네트워크 Waterfall과 Performance 메인 스레드 트레이스를 열어 실제 원인을 좁힙니다. 예를 들어 LCP가 느리다면 히어로 이미지의 용량·발견 시점(preload)·서버 응답(TTFB)이나 렌더 블로킹 CSS/JS를 점검하고, TBT(긴 작업)가 높다면 초기 번들 분할과 불필요한 서드파티 스크립트·초기 렌더링 연산량을 줄입니다. 가설을 세워 한 가지씩 수정한 뒤에는 반드시 동일한 프로덕션 빌드와 스로틀링 조건에서 여러 번 재측정해 지표 개선과 기능 회귀 여부를 함께 검증합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. Lighthouse 점수는 정해진 시뮬레이션 조건에서의 초기 페이지 로드 진단 요약일 뿐이므로, 실제 원인 규명은 트레이스와 네트워크 타임라인으로 확인해야 합니다.
  2. 초기 로딩 이후의 복잡한 사용자 인터랙션 성능은 Lighthouse 기본 실행만으로는 다 잡히지 않으므로 프로파일러와 실제 사용자 지표를 함께 봐야 합니다.

면접에서 자주 하는 실수

한 번 돌려 본 Lighthouse 점수나 권고 항목만 보고 실제 트레이스 확인과 재측정 없이 모든 문제를 해결했다고 단정해서는 안 됩니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 167번을 바탕으로 질문과 답변을 새로 정리했습니다.

← 브라우저