Optimization by Lighthouse

Lighthouse는 최적화를 도와주는 Chrome 확장 프로그램이다.
Performance, Accessibility, Best Practice, SEO 등을 측정할 수 있다.
이 중 Performance를 중심으로 구글을 분석을 해보려고 한다.

Performance Opportunities

1. First Contentful Paint

사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간

2. Largest Contentful Paint

뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간

3. Speed Index

웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간

4. Time to Interactive

웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간

5. Total Blocking Time

웹 페이지가 사용자 입력에 응답하지 못하도록 차단된 총 시간

6. Cumulative Layout Shift

이미지/광고의 느린 로딩, 비동기 동작, 동적 DOM 변경 등으로 웹 페이지의 레이아웃이 얼마나 변하는 지 측정한 값

개선 방법

분석 결과, 성능 수준이 가장 심각한 두 가지의 개선 방법을 알아보겠다.

Reduce usused JavaScript

React는 SPA인데 웹 사이트를 로딩할 때 전체 페이지를 하나의 페이지에 담아오므로 하나의 파일에 모든 로직이 담긴다. 그래서 최초 로딩 시간이 길어지게 된다.
이때 Code Split을 해주면 당장 필요하지 않은 부분은 로드하지 않아 첫 로딩시간을 줄일 수 있다.
Code Split은 React lazy를 사용하면 된다.

Image elements do not have explicit width and height

이건 이미지 최적화가 이루어지지 않았기 때문에 뜨는 경고다.
이미지도 코드와 마찬가지로 컴포넌트 분리, lazy를 적용해주자.
그리고 이미지의 품질을 낮추고 크기를 정확히 명시하는 것도 도움이 된다.

글 작성에 참고한 사이트
https://velog.io/@dell_mond/Lighthouse-%EC%82%AC%EC%9A%A9%EB%B2%95
https://muhly.tistory.com/141