주요 요청 체인

감사가 중요한 이유

주요 요청 체인은 주요 렌더링 경로(CRP) 최적화 전략에서 나온 개념입니다. CRP는 로드할 리소스의 우선순위와 로드 순서를 정해서 브라우저가 최대한 빨리 페이지를 로드할 수 있게 해줍니다.

자세한 내용은 주요 렌더링 경로 문서를 참조하세요.

감사를 통과하는 방법

현재 이 감사는 '통과' 또는 '실패'로 구성되어 있지 않습니다. 이 감사가 제공하는 정보는 앱의 페이지 로드 성능을 개선할 수 있는 기회로 활용할 수 있습니다.

Lighthouse의 Chrome 확장 프로그램 버전은 보고서에서 다음과 같은 다이어그램을 생성합니다.

Initial navigation
|---lighthouse/ (developers.google.com)
    |---/css (fonts.googleapis.com) - 1058.34ms, 72.80KB
    |---css/devsite-googler-buttons.css (developers.google.com) - 1147.25ms, 70.77KB
    |---jsi18n/ (developers.google.com) - 1155.12ms, 71.20KB
    |---css/devsite-google-blue.css (developers.google.com) - 2034.57ms, 85.83KB
    |---2.2.0/jquery.min.js (ajax.googleapis.com) - 2699.55ms, 99.92KB
    |---contributors/kaycebasques.jpg (developers.google.com) - 2841.54ms, 84.74KB
    |---MC30SXJEli4/photo.jpg (lh3.googleusercontent.com) - 3200.39ms, 73.59KB

이 다이어그램은 페이지의 주요 요청 체인을 나타냅니다. lighthouse/에서 /css까지의 경로는 하나의 체인입니다. lighthouse/에서 css/devsite-googler-buttons.css까지의 경로는 다른 체인입니다. 이런 식으로 계속됩니다. 이 감사에서 가장 위에 있는 점수는 체인 개수를 나타냅니다. 예를 들어 위의 다이어그램의 '점수'는 7입니다.

또한, 이 다이어그램은 각 리소스를 다운로드하는 데 사용한 시간과 각 리소스 다운로드에 필요한 바이트 수를 분석합니다.

이 다이어그램을 사용하여 다음과 같이 CRP를 개선할 수 있습니다.

  • 주요 리소스 개수 최소화: 리소스 제거, 다운로드 지연, 비동기로 표시 등.
  • 주요 바이트 수를 최적화하여 다운로드 시간 절약( 왕복 횟수).
  • 남은 주요 리소스를 로드하는 순서 최적화: 최대한 빨리 모든 주요 자산을 다운로드하여 주요 경로 길이 단축.

위 요소를 최적화하면 페이지 로드가 개선됩니다.

감사 구현 방법

이 섹션에서는 감사 점수 계산 방법을 이해할 수 있도록 감사를 어떻게 구현하는지 설명합니다.

Lighthouse는 네트워크 우선순위를 프록시로 사용하여 렌더링을 차단하는 주요 리소스를 식별합니다. Chrome이 우선순위를 정의하는 방법에 대한 자세한 정보는 Chrome 리소스 우선순위 및 예약을 참조하세요.

주요 요청 체인, 리소스 크기, 다운로드 시간에 대한 데이터는 Chrome Debugger Protocol에서 추출됩니다.