Light House

A 0.1 second delay in site loading speed can cause a 7 % drop in sales (Akamai's 2017 report)

Lighthouse로 확인할 수 있는 지표

• First Contentful Paint(FCP)
  • 특정 웹페이지에서 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간
• First Meaningful Paint(FMP)
  • 특정 웹페이지에서 스크롤을 내리지 않은 채 제일 먼저 볼 수 있는 영역에 존재하는 주요한 콘텐츠를 렌더링하는 데 걸리는 시간
• Speed Index
  • 웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간
• Time To Interactive (TTI)
  • 웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간

Lighthouse 결과 항목 분석 +

1. Best Practices

   • 웹 앱을 가동할 때 콘솔에 오류가 출력되지는 않는지, 더는 사용하지 않는 API를 호출하고 있지는 않은지, HTTPS를 통해 해당 페이지에 접근할 수 있는지 등을 확인

2. SEO

   각 사용자가 자신의 디바이스를 이용하여 웹 페이지에 접근하였을 때 그들이 콘텐츠를 읽는 데에 무리가 없는 글꼴 크기를 사용하는지, 웹 페이지의 robots.txt 파일이 유효한지, 올바른 상태 코드를 사용하는 지와 같은 일부 SEO 모범 사례를 확인

3. Progressive Web App

   • 웹이 HTTP를 HTTPS로 리다이렉션하는지, 응답 코드는 명확한지, 3G 네트워크에서도 로딩이 빠르게 이루어지는 지와 같은 여부를 검사하여 합격 또는 실패를 부여

How to improve performance in your apps with Lighthouse, Webpack, and React Loadable Components

Testing

UNIT TEST (shallow)