Lighthouse / Web Vitals

Lighthouse

• Google이 제공하는 오픈소스 웹사이트 검사 도구로, 웹사이트의 성능, 접근성, 권장사항, SEO 를 자동으로 분석해 점수를 매기고 개선 방향을 제시해 줍니다.
• 분석 요소
  • Performance (성능)
    • Web Vitals를 기반으로 측정항목 별 가중치를 두어 전체 점수를 계산합니다.
    • 항목 별 가중치
      • TBT (Total Blocking Time) 30%
      • LCP (Largest Contentful Paint) 25%
      • CLS (Cumulative Layout Shift) 25%
      • FCP (First Contentful Paint) 10%
      • SI (Speed Index) 10%
        
        
  • Accessibility (접근성)
    • 사용자가 콘텐츠에 액세스하고 사이트를 효과적으로 탐색하는지 확인합니다.
      
      
  • Best Practices (권장사항)
    • Https 사용 여부, 보안 등 안전한 웹페이지의 코드 상태로 개선되도록 확인합니다.
      
      
  • SEO
    • 페이지가 검색엔진 결과 순위에 최적화되었는지 확인합니다.

 

Web Vitals

• 웹사이트가 사용자 친화적인 속도와 인터랙션을 제공하는지를 측정하기 위한 표준화된 Google의 핵심 지표
• 사용자들이 웹페이지를 얼마나 빠르고, 안정적이며, 직관적으로 느끼는지를 수치화하여 웹 성능을 개선할 수 있도록 사용됩니다.
• 특히, SEO(검색 순위)에도 Web Vitals 점수를 반영합니다. 성능이 좋은 사이트가 더 높은 순위를 받을 가능성이 높습니다.
• 3가지의 핵심 지표 ( LCP, INP, CLS )
• 이 외의 보조 지표 ( TBT, SI, FCP )

 

LCP ( Largest Contentful Paint )

• 가장 큰 이미지나 텍스트 블록이 사용자 뷰포트에 로딩 완료되는 시간
• 주로 서버 응답 시간, 리소스 로딩 시간, CSS/JS 처리 지연에 영향을 받습니다.
• 개선 방법
  • 이미지 최적화 (WebP, lazy loading)
  • 서버 응답 속도 개선 (CDN, 캐싱)
  • 렌더링 차단 리소스 최소화 (JS, CSS)

 

INP ( Interaction to Next Paint )

• 사용자와의 인터랙션 후 반응하는 데 걸리는 시간
  예를 들어, 버튼 클릭 후 반응하는 데 걸리는 시간
• 개선 방법
  • javascript 처리 시간 줄이기
  • 메인 스레드 작업 분할 (web workers 활용)
  • 비동기 처리 구조 개선

 

CLS ( Cumulative Layout Shift )

• 시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화합니다.
  예를 들어, 읽던 글이 광고로 인해 아래로 밀리는 경우
• 개선 방법
  • 이미지 / 비디오에 width 와 height 명시
  • 동적 콘텐츠에 공간 미리 확보
  • Web Fonts 로딩 최적화

 

TBT ( Total Blocking Time )

• 페이지가 로딩되는 동안, 사용자의 상호작용(클릭, 스크롤 등)에 브라우저가 반응하지 못하는 시간
• 개선 방법
  • 불필요한 JS 코드 제거하여 JS 파일 크기 줄이기
  • Code splitting
  • 작업 단위 쪼개기
  • Google Analytics, Facebook Pixel 등 최적화 -> 꼭 필요한 경우가 아니면 lazy loading 방법을 추천

 

SI ( Speed Index )

• 사용자가 페이지를 보는 동안 내용이 얼마나 빨리 나타나는지를 나타내는 수치
• 개선 방법
  • 이미지 최적화 
    • WebP, AVIF 와 같은 차세대 이미지 포맷 사용
    • 이미지 크기 리사이징
    • lazy loading
  • 폰트 로딩 최적화

 

FCP ( First Contentful Paint )

• 브라우저에 최초로 콘텐츠를 화면에 렌더링한 시점을 측정합니다. (화면이 비어있다가 사용자에게 뭔가 표시되기 시작한 시점)
• 이 때의 콘텐츠는 텍스트, 이미지(SVG 포함), canvas, 웹 폰트 등이 될 수 있어요.
• 개선 방법
  • JavaScript 비동기 처리 (async, defer)
  • 코드 스플리팅 (필요한 기능만 먼저 로드)
  • 지연 로딩

 

알아두면 좋아요!!

• Web Font 최적화를 위해 `font-display: swap;` 으로 설정!!
  • font-display 는 웹 폰트를 불러올 때, 브라우저에서 글골을 어떻게 보여줄 지를 결정하는 CSS 속성입니다.
  • 웹폰트를 사용하면 글꼴이 로딩되기 전까지 텍스트가 보이지 않거나, 깜빡할 수 있어요. 이걸 FOIT / FOUT 현상이라고 합니다.
    • FOIT (Flash of Invisible Text) - 글꼴이 로딩되기 전까지 텍스트가 아예 안 보임
    • FOUT (Flash of Unstyled Text) - 시스템 기본 글꼴이 먼저 보이고, 나중에 웹폰트로 바뀝니다.
  • `font-display: swap;`은 FOUT을 선택하여 텍스트를 먼저 보여주고, 웹폰트가 준비되면 바꿔줍니다.
  • `font-display: block;`은 FOIT을 선택하여 웹폰트 로드될 때까지 텍스트 숨긴 뒤 (최대 3초), 웹폰트가 준비되면 바꿔줍니다.
  • `font-display: swap;` 은 FCP 개선에 효과적이며 사용자 경험을 부드럽게 만들어줍니다.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Inter', sans-serif;
}

 

• img 태그 에는 alt 속성 필수로 추가하기!!
  • 시각 장애인용 스크린 리더가 인식하는데 이용됩니다.
  • 내용과 무관한 이미지는 alt="" 으로 표시해주세요.
• eval(), document.write() 사용 금지
  • XSS 공격에 취약해집니다.
  • eval() 대신 JSON.parse(), Function() 등을 사용하세요.
• 콘솔 에러 제거하세요.
  • Lighthouse는 JS 에러, console warning이 있으면 Best Practices 점수 감점시킵니다.
• a 태그에서 새탭으로 호출할 때는 안전한 링크로 작성하세요. (rel="noopener noreferrer")
  • 윈도우 객체 탈취 위험이 있습니다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">바로가기</a>