크롬 Lighthouse로 내 웹사이트 성능을 측정해보자

Lighthouse를 통해서 웹 성능을 전반적으로 검사하고 성능을 향상하기 위한 가이드를 제공해줍니다
지금 F12를 눌러 [개발자도구]를 들어간 후 [Lighthouse] 탭 ( 크롬버전에 따라 이름이 [Audit] 일 수도 있습니다. )

Categories는 어떤 부분을 검사하고싶은지, Device는 어떤 기기환경에서의 성능을 검사하고 싶은지 선택해주시면 됩니다.
각각 선택해 준 후 [ Generate report ] 를 눌러 성능 검사를합니다.

그러면 웹 성능 최적화가 왜 중요한지에 대해서 열심히 설명을 해주다가 로딩이 끝나면!

검사를 한 웹 사이트는 제가 vue코드를 react코드로 바꾸면서 만들었던 사이트였는데요. 이런식으로 결과가 나왔습니다. 
67점이라는 점수는 Metrics라는 기준에 의해 나온 점수인데요. 각각의 기준들마다 얼만큼의 시간이 걸렸는지도 표시해줍니다. 
1. First Contentful Paint (FCP) : 페이지가 로드되기 시작한 시점부터 페이지의 콘텐츠의 일부가 화면에 렌더링될 때까지 측정된 시간 (https://web.dev/i18n/ko/fcp/)
2. Time to Interactive (TTI) : 사용자가 상호작용 가능하기까지의 시간 (https://web.dev/i18n/ko/interactive/)
3. Speed Index : 페이지가 로딩되면서 얼마나 빨리 콘텐츠가 시각적으로 나타났는지까지의 시간 (https://web.dev/speed-index/ )
4. Total Blocking Time (TBT) : 메인스레드에서 오래 작업을 할 때 FCP와 TTI사이의 시간 ( https://web.dev/i18n/ko/tbt/)
5. Largest Contentful Paint (LCP) : 메인콘텐츠(가장 큰 이미지 또는 텍스트) 가 로드되기까지의 시간 (https://web.dev/i18n/ko/lcp/ )
6. Cumulative Layout Shift (CLS) : 예상치못한 레이아웃 이동을 경험하는 빈도 (https://web.dev/i18n/ko/cls/)

그리고 그 아래에는 페이지가 렌더링 되는 과정들을 스크린샷으로 보여줍니다.

그 아래에는 Opportunities와 Diagnostics라는 항목이 있습니다. 이 부분에서는 내 웹사이트가 어떤 점이 문제가 있고, 어떻게 해결 할 수 있는지 가이드를 제시해줍니다.
Opportunities는 리소스의 관점에서 로딩성능 최적화에 관련된 부분을, Diagnostics는 페이지의 실행관점에서 렌더링성능 최적화에 관련된 부분을 알려줍니다.

제 웹사이트에서 문제되는 Opportunities 항목은 : 
1. Properly size images : 이미지 사이즈 문제
2. Serve images in nest-gen formats : 이미지 포맷 문제
3. Minify Javascript : 자바스크립트 경량화 문제
4. Reduce unused Javascript : 사용하지 않는 자바스크립트 코드 문제

문제되는 Diagnostics 항목으로는 : 
1. Serve static assets with an efficient cache policy : 캐시 적용 문제 
2. Avoid enormous network payloads : 너무 큰 네트워크 페이로드 문제
( 빨간색이나 주황색이 아닌 경우는 큰 문제가 되진 않습니다 ) 
등이 있습니다. 
각 항목마다 우측의 드롭다운 버튼을 눌러보면 더 상세히 확인할 수도 있습니다. 

그리고 그 하단에는 Passed Audits이라는 부분이 있는데, 오른쪽의 'Show'를 눌러보면, 이런 검사항목은 잘 통과해서 문제가 되지 않는 부분을 따로 확인할 수도 있습니다..