LightHouse
💯 Lighthouse?
라이트하우스는 웹 앱의 성능 향상, 품질, 정확성을 향상시키기 위한 도구!
LCP, FID, CLS, FP가 무엇인지
⏺ LCP
최대 콘텐츠 렌더링 시간
보여지는 화면에서 가장 큰 컨텐츠가 그려지는 시점
사용자는 LCP의 시점이 빠를 수록 로딩이 빠르다고 느낀다.
Lighthouse는 초 단위로 LCP를 표시
LCP 점수 개선법
LCP가 이미지인 4단계 가장 오래 걸리는 단계를 알면 LCP를 최적화 하기 쉬움!
LCP 단계 | 설명
TTFB (Time to First byte): 사용자가 페이지 로드를 시작한 시점부터 브라우저가 HTML 문서 응답의 첫 바이트를 수신할 때까지의 시간
로드 지연: TTFB와 브라우저가 LCP 리소스 로드를 시작하는 시점 사이의 델타
로드 시간: LCP 리소스 자체를 로드하는 데 걸리는 시간
렌더링 지연: LCP 요소가 완전히 렌더링될 때까지 LCP 리소스 로드가 완료되는 시점 사이의 델타
⏺ FID
최대 예상 최초 입력 지연 ⇒ 페이지 로드 속도
Lighthouse는 최대 잠재 FID를 밀리초 단위로 표시
최대 잠재 FID 측정
사용자가 경험할 수 있는 최악의 최초 입력 반응 시간 측정
최초 입력 지연: 사용자가 사이트와 처음 상호작용한 시점 ~ 브라우저가 실제로 해당 상호작용에 응답할 수 있는 시점
콘텐츠가 포함된 첫 페인트 다음 가장 긴 작업의 지속 시간을 찾아 최대 잠재 FID 계산함
콘텐츠 렌더링 전 사용자가 페이지와 상호작용하려고 할 가능성 낮기 떄문에 콘텐츠가 포함된 첫 페인트 이전의 작업은 제외
Lighthouse에서 최대 잠재적 FID 점수를 결정하는 방법?
최대 잠재 FID 점수 HTTP 보관 파일의 데이터를 기반으로 페이지의 최대 잠재 FID 시간과 최대 예상 FID 시간을 비교한 것
Lighthouse의 최대 잠재 FID 점수가 녹색이면 페이지가 실제 웹사이트의 90% 보다 잘 작동한다는 의미!
최대 잠재적 FID 점수를 개선하는 방법?
최대 잠재 FID 개선하는 방법은 주로 TTI 개선 방법과 대체로 동일함!
TTI는 사용자가 웹 페이지와 상호 작용 가능한 상태가 되는 시간
Time To Interactive
리소스 최적화
렌더링 최적화
JS 코드 최적화
렌더링 우선순위 결정
등을 통해 개선할 수 있음
⏺ CLS
레이아웃 변경 횟수 ⇒ 시각적 안정성 측정
낮으면 좋음
예상치 못한 레이아웃 변경으로 텍스트가 갑자기 움직이면 사용자 환경에 지장 줄 수 있음
CLS는 페이지 수명 동안 발생하는 모든 예상치 못한 레이아웃 변경에 관한 레이아웃 변경 점수의 가장 큰 버스트를 측정한 것
레이아웃 변경은 표시되는 요소가 하나의 렌더링된 프레임에서 다음 프레임으로 위치를 변경할 때마다 발생
⏺ FP
FP (First Paint)
처음 픽셀이 그려진 시점(점 하나가 찍히는 시점). 최초로 렌더링이 실행되는 시작지점이라고 볼 수 있음
lighthouse에는 어떤 정보들이 들어있는지
성능 지표, 접근성 평가, 최적화 제안, PWA 평가
성능측정은 어떻게 하는것인지
Lighthouse 는 어떻게 성능을 측정할까???
웹 페이지 로딩 분석할 웹 페이지를 크롬 브라우저에서 열기 모든 리소스(HTML, CSS, JS, 이미지 등)를 다운로드, 렌더링
성능 측정 페이지 로드, 렌더링되는 시간, 주요 리소스의 다운로드 시간, 첫 컨텐츠 표시 시간 등 성능 지표를 측정 페이지의 로딩 속도와 사용자 경험을 평가 가능
접근성 평가 웹 접근성 평가를 위해 WCAG(Web Content Accessibility Guidelines) 및 기타 관련 가이드라인을 기반으로 각 요소 접근성 확인 다양한 사용자들이 웹 페이지에 더 쉽게 접근할 수 있는지 평가
최적화 검사 사용되는 이미지, 스크립트, CSS 등을 분석해 최적화할 수 있는 부분 탐색 페이지의 성능을 향상시킬 수 있는 가능성을 제시 ⇒ 이미지 압축, 리소스 렌더링 방식 개선 등
PWA 평가 PWA 특성을 갖추고 있는지 확인 오프라인 접근이 가능? 푸시 알림을 지원? 홈 화면에 설치 가능? 등
