Google Lighthouse

✅ 분석 결과 항목 (예시⬇️)

1. Performance (성능)

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

2. Accessibility (접근성)

• 대체 텍스트를 잘 작성했는지
• 배경색과 콘텐츠 색상의 대비가 충분한지
• 적절한 WAI-ARIA 속성을 사용했는지

3. Best Practices (권장사항)

• HTTPS 프로토콜을 사용하는지
• 콘솔창에 오류가 표시되는지

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

4. SEO (검색엔진 최적화)

• App의 robots.txt가 유효한지
• <meta> 요소는 잘 작성되었는지
• 텍스트 크기가 읽기에 무리가 없는지 <<?

5. PWA (Progressive Web App)

• 앱 아이콘을 제공하는지
• 스플래시 화면이 있는지
• 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지

를 점수 말고 체크리스트로 확인할 수 있다.

✅ Performance 측정 메트릭

1. First Contentful Paint (FCP)

• 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정
• 우수한 사용자 경험을 제공하려면 1.8초 이하 권장

2. Largest Contentful Paint (LCP)

• 뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간을 측정
  - 0 ~ 2.5 : 🟢 (fast)
  - 2.5 ~ 4 : 🟠 (moderate)
  - 4 ~ : 🔴 (slow)

3. Speed Index

• 페이지 로딩 중 컨텐츠가 얼마나 빨리 시각적으로 표현되는지
  - 0 ~ 3.4 : 🟢 (fast)
  - 3.4 ~ 5.8 : 🟠 (moderate)
  - 5.8 ~ : 🔴 (slow)

4. Time to interactive

• 로드되는 시점부터 사용자와 상호작용 가능한 시점까지의 시간 측정
  - 0 ~ 3.8 : 🟢 (fast)
  - 3.9 ~ 7.3 : 🟠 (moderate)
  - 7.3 ~ : 🔴 (slow)

5. Total Blocking Time

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

6. Cumulative Layout Shift

• 사용자가 컨텐츠 화면에서 얼마나 많이 움직이는지 수치화한 지표

✅ Practice

1. 대상 웹사이트 메가커피

2. 점수

메인에 거추장스럽게 계속 움직이는 손흥민 때문에 성능이 안좋을줄 알았는데 생각보다 점수가 높았다. Speed index는 유일하게 빨간 마크가 떴는데 그래도 2.4면 괜찮은것 같다.

3. lighthouse의 추천

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

많은 웹사이트에서 WebP나 AVIF 보다는 여전히 png, jpg를 많이 사용하고 있다. 예상 절감치를 보면 리소스 크기가 확실히 줄어들긴 한다. 그런데 갈수록 인터넷 속도가 빨라지니 사용자들이 실제로 체감할 수 있을지 궁금했다. 추가설명

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

적절한 크기의 이미지를 게재하면 모바일 데이터를 절약하고 로드 시간을 단축할 수 있다고 한다. 메가 홈페이지에서 문제가 된다고 뜨는 사진을 살펴보니 데스트톱, 모바일 버전에서의 파일 리소스가 동일했다. 아마도 메가는 자체 앱이 있어서 그럴지도?

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

링크에 이미지를 최적화 하는 방법이 잘 되어있다. 당장 적용해볼 수 있는게 꽤 많아 보인다. mega에서도 gif대신 video를 잘 활용 중이다.

4) HTTP/2 사용하기

HTTP/1.1에 비해 바이너리 헤더, 멀티플렉싱 등의 다양한 이점을 제공하는 HTTP/2를 권장한다. 링크

5) 렌더링 차단 리소스 제거하기

중요한 JS/CSS를 인라인으로 전달하고 중요하지 않은 모든 JS/Style을 지연하는 것이 좋다고 한다. 링크

6) 사용하지 않는 CSS 줄이기

스타일시트에서 사용하지 않는 규칙을 줄이고 스크롤 없이 볼 수 있는 부분에 사용되지 않는 CSS의 로딩을 지연시켜 네트워크 활동에 소비되는 바이트를 줄이란다. 이건 엄청 큰 영향을 주는것 같진 않다. 링크

✅ 정리 및 궁금증 (10/7/22)

짧은 시간이었지만 최적화에 대해 생각해볼 수 있는 재미있는 실습이었다. 솔직히 Lighthouse에서 권장하는 내용을 무조건 따를 수는 없겠지만 최적화 잘해서 나쁠 것은 없다고 생각한다. 항상 머리속에 넣어두고 코드를 작성 해야겠다. 그리고 분석 레포트를 json파일로 export 할 수 있던데 나중에 코딩고수가 되면 직접 보고서도 만들어볼 수 있겠다는 생각이 들었다.

그런데 이거 url 단위로만 테스트가 잡히는데 앱이 복잡하면 html 페이지별로 일일히 체크 해야하는건지?https://theventi.co.kr/new2022/main/intro.html 와 https://theventi.co.kr/new2022/main/main.html

그리고 아직도 lighthouse 권장 사항을 완벽히 따르는 웹사이트는 많이 보이지 않는데 이유는 무엇일까