지금까지 성능 최적화를 위한 개발자도구로 Network, Performance, Lighthouse까지 알아봤다. 마지막으로 Coverage에 대해 알아보자!
🙄Coverage 란?
개발자도구의 Coverage탭은 웹 애플리케이션의 코드(HTML, CSS, JavaScript)의 사용량을 분석하여 어떤 코드가 실제로 사용되고 있는지, 그리고 어떤 코드가 사용되지 않고 있는지를 보여준다. 이를 통해 코드의 최적화와 불필요한 코드 제거에 유용하다.
🔎Coverage탭 열어보기
Coverage 탭은 기본적으로 숨겨져 있는 기능이다. Chrome 개발자 도구(DevTools)에서 자주 사용하는 탭(예: Console, Elements, Network)은 기본적으로 보이지만, Coverage와 같은 고급 분석 도구는 기본으로 표시되지 않기 때문에 직접 탭을 열어야 한다.
방법 1
- Chrome 개발자 도구를 열고, 오른쪽 상단의 메뉴(점 세 개)를 클릭한다.
- More Tools → Coverage를 선택한다.
방법 2
- 개발자 도구에서 window: ctrl + shift + / mac: cmd + shift + p 를 누르고 'show coverage'를 검색해 선택한다.
✅Coverage 살펴보기
1. 새로고침 버튼 (⟳)
페이지를 새로고침하며, 로드된 리소스(HTML, CSS, JS 등)의 사용 여부를 실시간으로 기록한다.
2. 리소스 유형 필터링
특정 리소스 유형(CSS, JavaScript 등)만 필터링해서 확인할 수 있습니다.
3. Content Scripts
Chrome 확장 프로그램에서 로드한 스크립트를 포함해 분석하려면 이 옵션을 활성화한다. 확장 프로그램이 페이지 성능에 미치는 영향을 분석할 때 사용한다.
4. URL 검색 필드
특정 URL이나 파일 이름을 입력하여 원하는 리소스를 검색한다.
5. 다운로드 버튼 (⤓)
분석된 Coverage 데이터를 JSON 파일로 다운로드합니다.
6. Per Function / Per Block
코드 사용량을 분석할 단위를 선택한다.
- Per Function: 함수 단위로 사용 여부를 분석한다.
- Per Block: 코드 블록(구문 단위)별로 더 세밀하게 분석한다.
✅Coverage 데이터 읽고 해석하기
1. URL
해당 리소스의 경로(파일 경로)가 표시된다. 클릭하면 세부 분석이 가능하며, 사용된 코드와 사용되지 않은 코드가 구분된다.
2. Type
리소스의 유형을 나타낸다.
- JS: JavaScript 파일
- CSS: 스타일시트 파일
- Other: 기타 파일 형식(이미지, HTML 등)
3. Total Bytes
리소스의 전체 크기를 바이트 단위로 표시한다. 리소스가 얼마나 무거운지 확인할 수 있다.
4. Unused Bytes
로드된 리소스 중 사용되지 않은 부분의 크기를 바이트 단위로 표시한다. 최적화가 필요한 리소스를 쉽게 식별할 수 있다.
5. Usage Visualization
사용된 코드와 사용되지 않은 코드의 비율을 시각적으로 보여준다.
- 빨간색: 사용되지 않은 코드 비율.
- 회색/없음: 사용된 코드 비율.
빨간색이 많을수록 사용되지 않은 코드가 많아, 최적화 필요성이 높다.
해석 예시
파일: localhost:3000/static/js/2.chunk.js
Total Bytes: 1,876,849 bytes (약 1.8MB)
Unused Bytes: 1,835,203 bytes (약 97.8% 미사용)
Usage Visualization: 빨간색이 거의 전체를 차지함.
해석: 대부분 사용되지 않은 코드로, 최적화하거나 분리하여 코드 크기를 줄일 필요가 있음.
파일: localhost:3000/static/js/1.chunk.js
Total Bytes: 2,229,941 bytes (약 2.2MB)
Unused Bytes: 186,087 bytes (약 8.3% 미사용)
Usage Visualization: 빨간색이 거의 없음.
해석: 대부분의 코드가 사용되고 있으므로 최적화 우선순위는 낮음.
Coverage탭은 위처럼 미사용 코드 비율을 기준으로 최적화 우선순위를 정하는 데 유용하다. 이를 통해 사용되지 않은 코드를 식별하고, 최적화를 통해 리소스 크기를 줄이고 로딩 성능을 개선할 수 있다.
혹시라도 잘못된 내용이 있거나 질문사항 있으시면 댓글 남겨주세요! 어떤 댓글이든 달게 받겠습니다!
