40장 Performance와 Lighthouse 읽기

Performance 패널은 페이지 로딩과 상호작용 동안 CPU 작업, 렌더링, 프레임, 네트워크 흐름을 시간축에 기록한다. 기록 버튼을 누르고 짧은 문제 행동만 재현한 뒤 멈춘다. 긴 세션 전체를 기록하면 파일이 커지고 원인을 찾기 어렵다. 테스트 전 확장 프로그램과 백그라운드 탭 조건을 기록한다.

긴 작업은 메인 스레드를 오래 붙잡아 클릭과 스크롤 반응을 늦춘다. 타임라인에서 긴 노란 작업, 빈번한 레이아웃, 큰 이미지 디코딩을 찾되 한 막대만 보고 결론 내리지 않는다. 실제 사용자가 느낀 시각과 화면 녹화, 네트워크 상태를 함께 본다. 저사양 기기에서의 결과는 개발용 고성능 PC와 다를 수 있다.

Lighthouse는 성능, 접근성, 권장사항, SEO 같은 항목을 자동 점검한다. 점수는 특정 조건의 측정값이지 사이트 품질의 절대 등급이 아니다. 로그인 상태, 광고, 네트워크, 캐시, 브라우저 버전에 따라 달라진다. 개선 전후를 같은 조건에서 여러 번 측정하고 중앙값과 실제 사용자 지표를 함께 본다.

성능 기록과 보고서에는 방문 주소와 페이지 구조가 담긴다. 외부 분석 서비스에 올리기 전 조직 정책과 개인정보를 확인한다. 실제 고객 데이터가 필요한 문제라면 최소한의 익명화된 재현 페이지를 만드는 편이 좋다. 도구는 병목을 보여 주지만 무엇을 희생하고 개선할지는 제품의 목적이 결정한다.