Lighthouse 4대 핵심 메뉴
1. Performance (성능)
핵심: "이 사이트가 얼마나 빠른가?"
설명: 앞서 설명한 FCP, LCP, TBT 등이 포함된 영역입니다. 브라우저가 콘텐츠를 얼마나 빨리 렌더링하고, 사용자의 입력에 얼마나 기민하게 반응하는지를 측정합니다.
개선 포인트: 이미지 압축, 코드 분할(Code Splitting), 캐싱(Blob 활용 등).
2. Accessibility (접근성)
핵심: "장애가 있거나 보조 공학 기기를 사용하는 사용자도 이용 가능한가?"
설명: 시각 장애인이 사용하는 스크린 리더가 내용을 잘 읽을 수 있는지, 키보드만으로 모든 메뉴를 조작할 수 있는지 등을 체크합니다.
개선 포인트: 버튼에 aria-label 넣기, 이미지에 alt 속성 쓰기, 적절한 색상 대비(Contrast) 유지하기.
3. Best Practices (권장사항)
핵심: "웹 표준과 보안 지침을 잘 따르고 있는가?"
설명: 최신 웹 기술(HTTPS, HTTP/2)을 사용하는지, 콘솔에 에러가 찍히지는 않는지, 보안에 취약한 라이브러리를 쓰지는 않는지 검사합니다.
개선 포인트: 보안 프로토콜 준수, 더 이상 사용되지 않는(Deprecated) API 제거.
4. SEO (검색엔진 최적화)
핵심: "구글이나 네이버 같은 검색엔진이 이 사이트를 잘 찾을 수 있는가?"
설명: 검색 로봇이 사이트의 주제를 파악하기 좋게 메타 태그가 잘 설정되어 있는지, 모바일에서 보기 편한지 등을 평가합니다.
개선 포인트: <title>, <meta description> 설정, robots.txt 파일 확인.🚀 Lighthouse 핵심 지표 5가지
1. FCP (First Contentful Paint)
의미: 사용자가 페이지에 접속했을 때 브라우저가 텍스트나 이미지 등 첫 번째 콘텐츠를 그리기 시작하는 시점입니다.
사용자 체감: "오, 웹사이트가 로딩을 시작했네?"
팁: 서버 응답 속도를 높이고 렌더링을 방해하는 자바스크립트를 최소화하면 빨라집니다.
2. LCP (Largest Contentful Paint)
의미: 페이지 내에서 가장 큰 이미지나 텍스트 블록이 화면에 완전히 나타나는 시점입니다.
사용자 체감: "이제 메인 화면이 다 떴구나!" (실질적인 로딩 완료 시점)
최적화: 가장 큰 배너 이미지의 용량을 줄이거나 우선순위를 높여야 합니다.
3. TBT (Total Blocking Time)
의미: 앞서 설명해 드린 것처럼, 메인 스레드가 50ms 이상 차단되어 사용자의 입력(클릭 등)에 반응하지 못하는 전체 시간입니다.
사용자 체감: "버튼을 눌렀는데 왜 반응이 없지? 렉 걸렸나?"
최적화: 무거운 자바스크립트 실행을 줄이는 것이 핵심입니다 (님께서 Blob 캐싱으로 해결하신 부분!).
4. Speed Index
의미: 페이지가 로드되는 동안 콘텐츠가 시각적으로 얼마나 빨리 채워지는지를 측정하는 종합 지수입니다.
사용자 체감: 화면이 단계별로 빈틈없이 채워지는 속도.
최적화: 전체적인 로딩 흐름이 매끄러워야 점수가 잘 나옵니다.
5. CLS (Cumulative Layout Shift)
의미: 로딩 과정에서 화면의 요소들이 갑자기 툭 튀어나오거나 위치가 바뀌는 현상을 수치화한 것입니다.
사용자 체감: "버튼 누르려는데 갑자기 광고가 떠서 엉뚱한 거 클릭했네!" (짜증 지수)
최적화: 이미지나 광고 영역에 미리 고정된 높이/너비를 설정해 주어야 합니다.
🔍 Lighthouse 진단 도구의 정체
1. Insights (인사이트 / Metrics)
의미: 현재 웹사이트의 상태 수치입니다.
내용: 앞서 우리가 공부한 FCP, LCP, TBT 같은 지표들이 여기에 표시됩니다. "지금 당신의 사이트는 첫 화면이 뜨는 데 0.8초가 걸립니다"와 같은 결과 값을 보여주는 영역입니다.
2. Diagnostics (진단)
의미: "왜 점수가 낮은가?"에 대한 구체적인 원인 분석입니다.
특징: 점수에는 직접적인 영향을 주지 않더라도, 페이지의 전반적인 건강 상태(성능, 보안 등)를 위해 해결해야 할 과제들을 나열합니다.
예시: * "이미지 크기가 너무 큽니다."
"사용하지 않는 자바스크립트가 너무 많습니다."
"캐시 정책이 효율적이지 않습니다."
3. Opportunities (기회 / 절약 가능 시간)
의미: "이것만 고치면 이만큼 빨라질 수 있다"라는 가이드라인입니다.
핵심: 가장 효율적으로 점수를 올릴 수 있는 '지름길'을 알려줍니다.
예시: "이미지 형식을 WebP로 바꾸면 로딩 속도를 1.2초 단축할 수 있습니다."
중점적으로 봐야 할 사항
LCP → 가장 큰 콘텐츠(이미지, 텍스트)가 화면에 그려지는 시간. 사용자가 "로딩됐다"고 느끼는 핵심 지표
TBT → 메인 스레드가 블로킹된 총 시간. JS 번들이 무거울수록 높아짐
CLS → 레이아웃이 갑자기 틀어지는 정도. 스켈레톤 UI로 바로잡기
FCP → 첫 번째 콘텐츠가 그려지는 시간
