앞서 Advent Calendar 프로젝트 리팩토링하면서 사용한 lighthouse의 점수 카테고리 및 지표 구성 정리
1. 성능 (Performance) - 가중치 기반 점수 산출
사용자가 느끼는 로딩 속도와 반응성을 측정하는 가장 핵심적인 영역.
- LCP (25%): 페이지 내 가장 큰 이미지/텍스트 요소 렌더링 시간 (2.5초 미만 권장).
- TBT (30%): 메인 스레드 차단 시간 측정 (200ms 미만 권장).
- CLS (15%): 레이아웃의 시각적 불안정성 (0.1 미만 권장).
- FCP (10%): 첫 번째 콘텐츠 렌더링 시간 (1.8초 미만 권장).
- SI (10%): 시각적 표시 속도 (3.4초 미만 권장).
- TTI (10%): 완전한 상호작용 가능 시간.
2. 접근성 (Accessibility)
장애인 및 고령자 등 모든 사용자가 웹 사이트를 이용할 수 있는지 검사.
- 속성 검사: 이미지
alt속성 존재 여부, Form 요소의label연결 확인. - 시각 요소: 텍스트와 배경의 충분한 명암비 확보 여부.
- 구조화: 문서 제목(
h1~h6) 순서의 논리성, ARIA(Accessible Rich Internet Applications) 속성 사용의 적절성.
3. 권장사항 (Best Practices)
웹 표준을 준수하고 보안 취약점이 없는지 확인.
- 보안: HTTPS 적용 여부, 안전하지 않은 외부 링크(target="_blank") 차단.
- 신뢰성: 소스 맵 존재 여부, 취약점이 알려진 자바스크립트 라이브러리 사용 지양
- 사용자 경험: 이미지 종횡비 적절성, 브라우저 콘솔 오류 발생 여부.
4. 검색엔진 최적화 (SEO)
검색 결과 상단에 노출되기 위한 기본적인 요건을 갖췄는지 평가.
- 크롤링:
robots.txt파일 유효성, 유효한sitemap.xml존재 확인. - 메타데이터:
title태그 및meta description설정, 모바일 친화적viewport설정. - 콘텐츠 이해도: 링크 텍스트의 구체성(가령 '여기 클릭' 대신 의미 있는 문구 사용)
