[핀더펜] 최적화 진행 - lighthouse란?

이제는 미룰 수 없다..!! 대부분의 컴포넌트 제작을 완료했고 남은 부분은 아직 erd가 다 나오지 않았기 때문에 최적화를 진행해보겠습니다.

 

라이트하우스(lighthouse)

웹페이지 품질 개선을 위해 오픈소스로 제공되는 자동 감사 도구

 

검사 항목

1.  Performance (성능)
   • First Containful Paint
     • 첫 DOM 렌더링까지 걸리는 시간
     • iframe 내부 콘텐츠, 흰식의 <canvase>외에는 모두 DOM 콘텐츠로 간주
     • 0 ~1.8초(빠름), 1.8 ~ 3초(보통), 3초 초과(느림)
   • Speed Index
     • 페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도
     • 0 ~13.4초(빠름), 13.4 ~ 5.8초(보통), 5.8초 초과(느림)
   • Total Blocking Time
     • 사용자 입력에 응답하지 못하도록 차단된 총 시간 측정
     • FPC,  상호작용 시간 사이의 모든 장기 작업(50ms 초과하는 작업)의 차단 부분 합
     • 0 ~200ms(빠름), 200 ~ 600ms(보통), 600ms 초과(느림)
   • Largest Containful  Paint
     • 표시 영역에서 가자 ㅇ큰 콘텐츠 요소가 렌더링 되는 시간
     •  0~2.5초(빠름), 2.5 ~ 4초(보통), 4초 초과(느림)
2. Accessibility (접근성)
   • 통과 또는 실패로 계산
   • 부분 통과는 실패로 판단
3. Best Practices (권장사항)
4. SEO (검색엔진 최적화)
5. PWA

첫 성능 검사 결과

심각한 결과가 나왔다....