[ React ] Lighthouse를 이용한 웹 성능 최적화 후기

현재 개발 중인 프로젝트의 성능을 체크해보았다.

심각했다.

 

 

 

 

 

 

해당 Lighthouse 결과에서 "콘텐츠가 포함된 최대 페인트 요소(LCP)가 13,370ms"로 매우 높게 나타났다면 이는 사용자가 웹사이트에서 주요 콘텐츠를 보기까지 기다리는 시간이 매우 길다는 의미입니다. 성능을 개선하려면 아래와 같은 전략을 고려해볼 수 있습니다:

 

 

 

사용하지 않는 CSS 줄이기 절감 가능치: 56KiB

 

 

텍스트 압축 사용 절감 가능치: 11,333KiB

이는 웹사이트에서 텍스트 기반 파일(HTML, CSS, JavaScript 등)에 압축을 적용하여 전송 크기를 줄일 수 있다는 의미입니다. 압축을 적용하면 로딩 속도가 향상되고, 사용자의 데이터 사용량도 줄어들어 성능 개선에 도움이 됩니다.

 

coverage

보이지 않는다면?

개발자 도구 > 설정 >  환경설정 > 언어를 영어로 바꿔줘야 한다.

페이지 리로드 후 개발자 도구가 영어로 바뀌었을 때

cmd + shift + p를 눌러 "show coverage"를 검색하면 뜬다.