Light house 실습

사이트를 검사하여 성능 측정을 할 수 있는 도구인 Lighthouse를 통해 Disney +의 mobile 환경을 검사를 해보았다.

---

검사 결과

1. Performance

• 웹 성능을 측정

2. Accessibility

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

3. Best Practices

• 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인

4. SEO

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

5. PWA (Progressive Web App)

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

검사 실행 후 해당 항목의 점수를 대략적으로 보여준다.

---

Performance

1. First Contentful Paint

• 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정한다
• 이사이트에서는 2.0s로 2초가 측정되었다.

2. Largest Contentful Paint

• 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정한다.
• 이것으로 유저에게 컨텐츠가 보이는 시간을 가늠할 수 있다.
• 이 사이트에서는 6.7s로 6.7초가 측정되었다.

3. Speed Index

• 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정한다.
• Lighthouse는 먼저 브라우저의 페이지 로딩과정을 각 프레임마다 캡쳐하고 프레임 간 화면에 보이는 요소들을 계산하여 성능을 분류한다.
• 5.0s 로 Orange (moderate)

4. Time to interactive

• 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정
• 10.3초 red(slow)

5. Total Blocking Time

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

6. Cumulative Layout Shift

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

🔧 개선하기

Opportunities

제안을 통해서 페이지를 좀 더 빠르게 로드할 수 있는 방법을 제시 한다.

1. Properly size images

이미지의 크기를 조정하여 데이터를 절약하고 페이지 로드 시간을 개선하기.

2. Serve images in next-gen formats

JPEG 또는 PNG가 아닌 AVIF 또는 WebP 형식으로 형식으로 이미지를 인코딩하면 더 빠르게 로드되고 더 적은 셀룰러 데이터를 소비할 수 있어 이미지 포맷 바꿔보기.

3. Efficiently encode images

이미지 를 최적화 하기

이미지 CDN 사용
이미지 압축
애니메이션 GIF를 비디오로 대체
이미지 로딩 지연
반응형 이미지 제공
올바른 크기의 이미지 제공
WebP 이미지 사용

4. Reduce unused JavaScript

사용하지 않는 JavaScript는 페이지 로드 속도를 늦출 수 있으므로 사용하지 않는 javascript 제거하기

5. Avoid serving legacy JavaScript to modern browsers

사용자가 불필요하게 큰 JavaScript 파일을 다운로드하는 것을 방지할 수 있도록 레거시 JavaScript 코드(예: ES5 표준)를 최신 브라우저에 제공하지 않기