크롬 개발자 도구 살펴보기

Network

웹 페이지에서 발생하는 모든 네트워크 트래픽을 알려주며 어떤 리소스가 어느 시점에 로드되는지, 리소스의 크기 등을 확인 가능

 

Performance

웹 페이지가 로드될 때 실행되는 모든 작업을 시각화

개발자도구의 Performance 탭에 직접 들어가도 되고, Lighthouse의 View Original Trace 로 접근해도 된다.

• CPU 차트
  • 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지 비율
  • 자바스크립트는 노란색, 렌더링/레이아웃 작업은 보라색/페인팅 작업은 초록색/기타 시스템 작업은 회색
  • 어느 타이밍에 어느 작업이 주로 진행되고 있는지 파악 가능
  • 빨간색 짙은 선은 병목이 발생한 지점
• Network 차트
  • CPU 차트 및 막대 형태로 표시
  • 진한 막대는 우선 순위가 높은 네트워크 리소스, 아래쪽 옅은 막대는 우선순위가 낮은 네트워크 리소스를 의미
• 스크린샷 리스트
  • 서비스가 로드되는 과정을 보여줌
• Network 타임라인
  • 네트워크 패널과 유사하게 서비스 로드 과정에서의 네트워크 요청 시간을 순서대로 보여줌
  • 왼쪽 회색선은 초기 연결 시간
  • 막대의 옅은 색 영역은 요청을 보낸 시점부터 응답을 기다리는 시점까지의 시간 (Time To First Byte, TTFB)
  • 막대의 짙은 색 영역은 콘텐츠 다운로드 시간
  • 오른쪽 회색선은 해당 요청에 대한 메인 스레드 작업 시간

 

• Frames
  • 화면에 변화가 있을 때마다 스크린샷을 찍음

• Timings
  • User Timing API를 통해 기록된 정보를 기록
  • 리액트에서 각 컴포넌트의 렌더링 시간을 측정하는 것
• Main
  • 브라우저의 메인 스레드에서 실행되는 작업을 플레임 차트로 보여준다.
  • 어떤 작업이 오래 걸리는지 확인가능
  • 계층형 데이터 시각화 기법으로 X축은 시간의 흐름, Y축은 스택의 깊이를 의미
  • 막대가 아래에 있을수록 상위 작업, 막대가 위에 있으면 하위 작업이다.

• Summary
  • 브라우저 렌더링 과정 중 발생한 작업 시간의 총합과 각 작업이 차지하는 비중

• Bottom-up
  • 가장 최하위에 있는 작업부터 상위 작업까지 역순으로 보여줌
• Call Tree
  • Bottom-up과 반대로 가장 상위 작업부터 하위 작업 순으로 작업 내용을 트리뷰로 보여줌
• Event Log
  • 발생한 이벤트를 보여줌
  • Loading, Exprience, Scripting, Rendering, Painting …

 

 

Lighthouse

웹 사이트의 성능을 측정하고 개선 방향을 제시해주는 자동화 툴

웹 사이트의 성능 점수를 측정하고 → 개선 가이드를 제시해주어 → 어떤 부분을 중점적으로 분석하고 최적화해야 하는지 볼 수 있다.

컴퓨터마다 같은 사이트도 점수가 다를 수 있음 이는 결국 로컬PC 에서 검색을 진행하므로 PC 환경에 영향을 받는 것

검사 결과를 절대적인 지표로 삼기보단 가이드로 생각하여 여러 번 검사를 돌려보는 것이 좋음

Navigation > Desktop > Perfomance

• Mode
  • Navigation : 기본값, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
  • Timespan : 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
  • Snapshot : 현재 상태의 성능 문제를 분석
• Categories
  • Performance : 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석
  • Accessibility : 서비스의 사용자 접근성 문제를 분석
  • Best practice : 웹 사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
  • SEO : 검색 엔진에서 얼마나 잘 크롤링 되고 검색 결과에 표시 되는가
  • Progressive Web App : 서비스 워커와 오프라인 동작 등 분석

• 빨간, 노란 → 최적화 필요
• 회색 → 문제는 아니지만 살펴봐야하는 수준
• 초록, Passed audits → 잘되고 있음

---

• First Contentful Paint(FCP) … 10%
  • 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 부분을 렌더링 하는데 걸린 시간에 관한 지표
• Speed Index(SI) … 10%
  • 페이지 로드 중 컨텐츠가 시각적으로 표시되는 속도를 나타내는 지표
• Largest Contentful Paint(LCP) … 25%
  • 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표
• Time to Interactive(TTI) … 10%
  • 사용자가 페이지와 상호작용이 가능한 시점까지 걸리는 시간을 측정한 지표
  • 상호작용 : 마우스, 키보드 등의 사용자 입력
  • 이 시점 전까진 화면이 보여도 클릭 같은 입력이 동작되지 않는다.
• Total Blocking Time(TBT) … 30%
  • 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표
  • FCP ~ TTI 사이의 시간 동안 일어나며 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합한다.
• Cumulative Layout Shift(CLS) … 15%
  • 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표
  • 레이아웃 이동 : 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것

 

 

• Opportunity
  • 페이지를 빨리 로드하는데 잠재적으로 도움이되는 제안들 (리소스 관점)Properly size images 적절한 사이즈의 이미지를 써라

    Serve images in next-gen formats	이미지 포맷 맞춰라
    Efficiently encode images	효과적인 이미지 포맷을 써라
    Minify JavaScript	js 사이즈 줄여라
    Preconnect to required origins	preconnect를 사용하라
    Enable text compression	서버에서 텍스트 압축을 받아서 api 통신을 하라

  • 모든 파일을 인코딩하는 것은 되려 성능이 떨어진다고 함. 2kb 이상일 때 인코딩하는 것이 유리
• Diagnostics
  • 로드 속도와 직접적 관계는 없더라도 성능과 관련된 기타 정보 (렌더링 관점)Minimize main-thread work 메인 쓰레드 일을 최소화 하라

    Serve static assets with an efficient cache policy	캐시 써라
    Reduce JS execution time	실행시간 감소하라

• Emulated Desktop with Lighthouse
  • CPU throttling 정보를 확인할 수 있으며 컴퓨터의 CPU 성능을 어느정도 제한하여 검사한 것인지 확인 가능하다.
  • 1x 라는 의미는 CPU 성능에 제한을 두지 않고 검사한 것이라는 의미이다. (mobile로 검사했으면 4x)

• Custom throttling
  • Network throttling이라는 정보를 확인할 수 있으며, 이는 네트워크 속도를 제한하여 어느 정도 고정된 네트워크 환경에서 성능을 측정했다는 의미
  • 10.240Kbps 는 네트워크 속도

 

 

coverage

웹 페이지를 렌더링 하는 과정에서 어떤 코드가 실행되었는지 보여준다. 특정 파일의 코드가 극히 일부만 실행되었다면(= 퍼센트가 낮다면) 해당 파일에 불필요한 코드가 많이 포함되어 있다는 의미