[10/7] Optimization 블로깅

Lighthouse

사이트를 검사해(성능, 접근성, PWA, SEO 등) 성능 측정하여 웹 페이지의 품질을 개선할 수 있는 자동화 툴

 

Chrom 개발자 도구에서 실행하기

(1) 크롬에서 검사하고 싶은 페이지의 url을 입력

(2) 개발자 도구 열기

(3) lighthouse 탭 클릭

(4) Generate report 클릭

 

 

Node CLI에서 실행하기

(1) Lighthouse 설치

-g 옵션을 사용해 전역 모듈로 설치하는 것이 좋음

npm install -g lighthouse

(2) lighthouse <url> 명령어로 검사 실행

(3) lighthouse --help 명령어로 모든 옵션을 볼 수 있음

 

 

 

 

분석 결과 항목

(1) Performance

- 웹 성능 측정

- 화면에 콘텐츠가 표시되는데 걸리는 시간, 표시된 후 사용자와 상호작용하기까지 얼마나 걸리는 지, 화면에 불안정한 요소는 없는 지 등을 확인

 

(2) Accessibility

- 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인

- 대체 텍스트, 배경색과 콘텐츠 색상의 대비, 적절한 WAI-ARIA 속성을 사용했는 지 등을 확인

 

(3) Best Practices

- 웹 페이지가 웹 표전 모범 사례를 잘 따르는 지 확인

- HTTPS 프로토콜 사용 여부, 콘솔 창에 오류가 표시되지는 않는 지 등을 확인

 

(4) SEO

-웹 페이지가 검색 엔진 최적화가 잘 되어있는 지 확인

- 애플리케이션의 robots.twt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리 없는 지 등을 확인

 

(5) PWA

- 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는 지 확인

- 앱 아이콘 제공, 스플래시 화면 여부, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는 지 등을 체크리스트로 확인

 

 

 

Performance 측정 메트릭

(1) Frist Contentful Paint

- 성능 지표를 추적하는 메트릭

- 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간을 측정

- 우수한 사용자 경험을 제공하려면 1.8초 이하여야 함

- 이미지, <canvas>, SVG 요소 등 모두 DOM 콘텐츠로 구분됨. <iframe>은 포함되지 않음.

 

 

(2) Largest Contentful Paint

- 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정.

 

 

(3) Speed Index

- 성능 지표를 추적하는 메트릭

- 페이지를 로드하는 동안 얼마나 빨리 콘텐츠가 시각적으로 표시되는 지를 측정.

 

 

(4) Time to interactive

- 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정.

- 기준

• 페이지에 FCP로 측정된 콘텐츠가 표시되어야 함
• 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록됨
• 페이지가 0.05초안에 사용자의 상호작용에 응답함

 

(5) Total Blocking Time

- 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정

- FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정함

- 0.05초를 초과하는 작업은 긴 작업으로 간주됨

 

 

(6) Cumulative Layout Shift

- 사용자에게 콘텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표

 (ex : 온라인 기사를 읽다가 갑자기 페이지 일부분이 바뀐다거나)

 

 

 

 

 

Zigzag 홈페이지 Lighthouse 사용해 보기

 

<개선해야할 점>

(1) 차세대 형식을 사용해 이미지 제공하기

=> 용량이 큰 PNG, JPEG 확장자가 아닌 WebP나 AVIF 사용하여 데이터 소비량 줄이기

 

 

(2) 효율적으로 이미지 인코딩하기

=> 이미지 CDN 사용, 이미지 압축, 애니메이션 GIF를 비디오로 대체 등을 통해 이미지를 최적화하여 데이터 소비량 줄이기

 

 

(3) 이미지 크기 적절하게 설정하기

사용자 화면에 렌더링된 버전보다 큰 이미지가 페이지에 제공되고 있음.

반응형 이미지 제공하기 : 이미지 크기 조정 도구 Sharp npm 패키지와 ImageMagick CLI 도구를 사용하기

 

=> 반응형 이미지 제공을 통해 적절한 크기의 이미지를 제공하여 데이터를 절약하고 로드 시간을 줄이기

 

 

(4) 네트워크 페이로드가 커지지 않도록 관리하기

네트워크 페이로드는 긴 로드 시간과 높은 상관관계가 있음. ( => 사용자는 더 많은 셀룰러 데이터에 대한 비용을 지불하게 됨)

페이로드 크기를 줄이는 법 :

• 네트워크 페이로드 최소화 및 압축하기
• 이미지 확장자를 WebP나 AVIF 로 변경하기
• 페이지에 반복 방문 시 리소스를 다시 다운로드하지 않도록 요청을 캐시하기

 

(5) 캐시 정책을 사용하여 정적인 에셋 제공하기

=> 캐시를 사용하여 반복 방문시 리소스를 다시 다운로드하지 않도록 만들기

 

 

(6) 웹 폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기

폰트를 로드하는데 시간이 많이 걸리는 대용량 파일인 경우, 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨기면서 보이지 않는 텍스트의 플래시(텍스트를 숨겨버림)를 일으킴.

 

=> 보이지 않는 텍스트가 표시되지 않도록 시스템 글꼴을 일시적으로 표시하여 개선함.

 CSS에 @font-face 스타일에 font-display: swap 을 포함하면 대부분의 최선 브라우저에서 텍스트의 플래시를 피할 수 있음