[성능 최적화] PageSpeed와 Lighthouse

코어 웹 바이탈(Core Web Vita)

 

페이지의 성능은 곧 사용자 경험과 관련이 있다. SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈은 개발 과정에서 빠뜨려서는 안 될 중요한 개념이다. 

 

코어 웹 바이탈이란?

 

웹 페이지의 사용자 경험을 측정하는 중요한 지표들로 검색 엔진이 웹 페이지의 품질과 성능을 평가하는 데 사용된다.

 

로딩 시간 (Loading Performance)

• 최대 콘텐츠 렌더링 시간 (LCP, Largest Contentful Paint)
• 좋은 사용자 환경 제공을 위해서는 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 한다.
• 첫 바이트까지의 시간(TTFB), 콘텐츠가 포함된 첫 페인트(FCP) 역시 LCP 관련 문제를 진단하는데 유용하다.
  • TTFB, Time to First Byte : 느린 서버 응답 시간과 관련된 문제 진단
  • FCP, First Contentful Paint : 렌더링 차단 리소스와 관련된 문제 진단

상호 작용 (Interactivity)

• 최초 입력 반응 시간 (FID, First Input Delay)
• 좋은 사용자 환경 제공을 위해서는 페이지의 FID가 100밀리초 이하여야 한다.
•  총 차단시간(TBT, Total Blocking Time)이나 상호작용 시작시간(TTI, Time to Interactive) 등도 FID에 영향을 줄 수 있는 중요한 측정항목이지만 이러한 측정항목은 현장 측정이 불가능하거나 사용자 중심 결과를 반영하지 않기에 코어 웹 바이탈 항목에 속하지는 않는다.

시각적 안정성 (Visual Stability)

• 레이아웃 변경 횟수 (CLS, Cumulative Layout Shift)
• 좋은 사용자 환경 제공을 위해서는 CLS가 0.1. 이하로 유지되어야 한다.

 

 

아래와 같이 코어 웹 바이탈을 측정할 수 있는 도구는 많다. 

 

그 중 PageSpeed Insight와 Lighthouse를 사용해보았다.

 

PageSpeed

PageSpeed는 데스크톱과 모바일 장치에서 웹사이트 페이지 속도를 측정해주는 무료 툴이다.

• URL을 입력하면 자동으로 일련의 테스트가 진행되고 실제 사용자 데이터를 포함한 측정 결과가 도출된다. 
• 크게 아래와 같이 4 카테고리에서 성능이 측정된다. 
  • 성능 (Performance)
  • 접근성 (Accessibility)
  • 권장사항 (Best Practises)
  • 검색엔진 최적화 (SEO)

 

성능 (Performance)

 

아래와 같이 웹 바이탈 기준에 맞게 '좋음', '개선 필요', '나쁨' 이렇게 성능을 측정해준다.

• FCP (First Contentful Paint) 
  • 웹 페이지가 로드될 때 브라우저에 첫번째로 그려진 콘텐츠가 화면에 나타나는 시점
• FID (First Input Delay)  
  • 웹 페이지가 로드된 후 사용자의 첫 번째 상호 작용(클릭, 터치, 키보드 입력 등)과 이에 대한 브라우저의 응답 사이의 지연시간
  • 첫 번째 사용자 상호 작용에 대한 응답 시간 
• LCP (Largest Contentful Paint)
  • 페이지에서 가장 큰 콘텐츠 요소가 사용자에게 렌더링되는 시점 (주로 이미지, 텍스트)
• CLS (Cumulative Layout Shift)
  • 페이지가 로드되는 동안 레이아웃이 변경되는 총 누적 값
• INP (Input Timing)
  • 페이지가 로드된 후 사용자 상호 작용과 페이지 응답 시간을 측정
  • 사용자 상호 작용에 대한 브라우저의 여러 상호 작용과 관련된 성능 지표를 모두 포함 (FID는 INP의 일부)
  • 여러 종류의 사용자 상호 작용(클릭, 터치, 키보드 입력 등)에 대한 평균 응답 시간
• TTFB (Time to First Byte)
  • 브라우저가 서버로부터 첫 번째 바이트 데이터를 수신하는 데 걸리는 시간 (서버 응답 시간)

 

Lighthouse와 PageSpeed의 차이

 

2022년 이후, PageSpeed가 접근성, 권장사항, 검색엔진 최적화 항목을 추가하면서 사실 두 툴은 거의 유사한 기능을 제공한다. 그나마 다른 점은 아래와 같다.

 

• (PWA, Progressive Web App) : Lighthouse에서는 PWA와 관련된 성능 측정이 가능하다.
• User Data : PageSpeed는 실제 사용자 경험과 관련된 데이터를 제공해준다. 
• Browser Acaiablity : Lighthouse는 개발자 도구나 크롬 익스텐션 등을 사용해야 하지만, PageSpeed Insight는 주소를 치고 들어가면 되기 때문에 어디에서든 사용이 가능하다.