크롬 개발자도구 뜯어보기

 

Why?

✏️ 개발자 도구는 평소에 습관처럼 디버깅하는데에 쓰고 있지만, 이번에 회사에서 '프론트엔드 성능 최적화 가이드'라는 책으로 스터디를 진행하면서 생각보다 놓치고 있는 부분도 많고 더 좋은 기능도 많이 제공하고 있다는 것을 알게되어 포스팅을 해본다.

 

 

 

 

크롬 개발자 도구

• 크롬 브라우저에서 제공하는 웹 개발에 도움되는 다양한 툴입니다.
• 여는 방법
  • f12
  • ctrl + shift + i (command + option + i)
  • 요소 검사 (하이라이트)

 

Network 패널

• 현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줍니다.
• 어떤 리소스가 어느 시점에 로드되는지, 해당 리소스의 크기 등을 확인할 수 있습니다.

 

 

Perfomance 패널

• 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다.
• network 패널에서 봤던 리소스가 로드되는 타이밍뿐만 아니라, 브라우저의 메인 스레드에서 실행되는 자바스크립트를 차트 형태로 볼 수 있습니다.
• 이 패널을 통해 어떤 자바스크립트 코드가 느린지 확인할 수 있습니다.

 

 

Network 차트

• 시간에 따라 cpu가 어떤 작업에 리소스를 사용하고 있는지 비율로 보여 줍니다.
  • 자바스크립트 실행 작업은 노란색
  • 렌더링/레이아웃 작업은 보라색
  • 페인팅 작업은 초록색
  • 기타 시스템 작업은 회색
• 그 위에 있는 빨간색 선은 병목이 발생하는 지점을 의미합니다. 즉, 특정 작업이 메인 스레드를 오랫동안 잡아 두고 있다는 뜻입니다.

 

 

CPU 차트

• CPU 차트 밑에 막대 형태로 표시되는 차트가 Network 차트 입니다. 대략적인 네트워크 상태를 보여줍니다.
• 위쪽의 진한 막대는 우선순위가 높은 네트워크 리소스를, 아래쪽 옅은 막대는 우선순위가 낮은 네트워크 리소스를 나타냅니다.

 

Network 타임라인

• 왼쪽 회색 선: 초기 연결시간
• 막대의 옅은 색 영역: 요청을 보낸 시점부터 응답을 기다리는 시점까지의 시간
• 막대의 짙은 색 영역: 콘텐츠 다운로드 시간
• 오른쪽 회색 선: 해당 요청에 대한 메인 스레드의 작업시간

 

Frames, Timings, Main

• frames : 화면의 변화가 있을때마다 스크린샷을 찍어 보여줍니다.
• timings: 여기 표시된 막대들은 리액트에서 컴포넌트의 렌더링 시간을 측정합니다.
• main
  • 브라우저의 메인 스레드에서 실행되는 작업을 플레임차트로 보여줍니다. 이를 통해 어떤 작업이 오래걸리는지 파악할 수 있습니다.

 

하단 탭

• summary : 선택 영역에서 발생한 작업 시간의 총 합과 각 작업이 차지하는 비중을 보여줍니다.
• bottom-up : 가장 최하위에 있는 작업부터 상위 작업까지 역순으로 보여줍니다.

 

예시 ) 페이지 로드과정 살펴보기

• 처음 네트워크 요청이 파란색으로 보입니다. (html 파일에 대한 요청)

 

• html 파일이 다운로드된 시점을 보면 메인 스레드에서는 parse html 이라는 작업을 하고 있습니다.

 

• minor gc 는 자바스크립트의 가비지 컬렉션 작업으로 실제 코드와는 상관 없습니다.

 

 

Lighthouse 패널

• 구글에서 만든 툴로, 웹사이트 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다.
• Lighthouse 를 이용하여 웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 분석하고 최적화해햐 하는지 알 수 있습니다.
• 기존에는 따로 설치해서 사용했어야하지만, 지금은 크롬 자체적으로 포함하여 별도설치가 필요하지 않습니다.

 

 

Mode

• Navigation: 기본 값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석합니다.
• Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석합니다.
• Snapshot: 현재 상태의 성능 문제를 분석합니다.

 

 

Categories

Performance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석합니다. 

• FCP
  • 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링 하는 데 걸리는 시간에 관한 지표입니다.
  • 총점을 계산할 때 10%의 가중치를 갖습니다.
• SI
  • 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표입니다.
  • 총점을 계산할 때 10%의 가중치를 갖습니다.
  • SI 점수를 높이는 방법
    • 메인 스레드 작업 최소화
    • JavaScript 실행 시간 단축
    • 폰트가 로드되는 중에도 텍스트가 계속 표시되도록
• LCP
  • 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표입니다.
  • 총점을 계산할 때 25%의 가중치를 갖습니다.
• TTI
  • 사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정한 지표입니다. (클릭/키보드 등)
  • 이 시점 전까지는 화면이 보이더라도 입력이 동작하지 않습니다.
  • 총점을 계산할 때 10%의 가중치를 갖습니다.
• TBT
  • 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표입니다.
  • 측정은 FCP와 TTL사이의 시간동안 일어나며, 메인스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합합니다.
  • 총점을 계산할때 30%의 가중치를 갖습니다.
• CLS
  • 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표입니다. 화면상에서 요소의 위치나 크기가 순간척으로 변하는 것을 말합니다.
  • 총점을 계산할 때 15%의 가중치를 갖습니다.

 

Accessibility

• 서비스의 사용자 접근성 문제를 분석합니다.
• ex. 화면 판독기 사용자가 식별할 수 있는 내부 텍스트

 

Best practices

• 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석합니다.

SEO

• 검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석합니다.

Progressive Web App

• 서비스 워커와 오프라인 동작 등, PWA와 관련된 문제를 분석

Opportunities

• 페이지를 더욱 빨리 로드하는 데 잠재적으로 도움되는 제안을 나열합니다.

 

Diagnostics

• 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여줍니다.

 

검사 환경

• 기기의 cpu 성능을 어느 정도 제한하여 검사를 진행했는지를 나타냅니다.
• 검사 전 설정을 Mobile 로 선택했다면 4x 로 표시될 것입니다.