중요 요청 체이닝 방지

중요 요청 체인은 페이지 렌더링에 중요한 종속 네트워크 요청의 시리즈입니다. 체인 길이가 길고 다운로드 크기가 클수록 페이지 로드 성능에 미치는 영향이 더 커집니다.

Lighthouse는 우선순위가 높게 로드된 중요 요청을 보고합니다.

Lighthouse 중요 요청 깊이 최소화 감사 스크린샷

Lighthouse에서 중요 요청 체인을 식별하는 방법

Lighthouse는 네트워크 우선순위를 렌더링 차단 중요 리소스를 식별하는 프록시로 사용합니다. Chrome에서 이러한 우선순위를 정의하는 방법에 관한 자세한 내용은 Google의 Chrome 리소스 우선순위 및 일정을 참고하세요.

크리티컬 요청 체인, 리소스 크기, 리소스 다운로드에 소요된 시간에 관한 데이터는 Chrome 원격 디버깅 프로토콜에서 추출됩니다.

중요 요청 체인이 성능에 미치는 영향을 줄이는 방법

크리티컬 요청 체인 감사 결과를 사용하여 페이지 로드에 가장 큰 영향을 미치는 리소스를 먼저 타겟팅하세요.

  • 중요한 리소스의 수를 최소화합니다. 리소스를 삭제하고, 다운로드를 지연하고, async로 표시하는 등의 방법이 있습니다.
  • 다운로드 시간 (왕복 수)을 줄이려면 중요한 바이트 수를 최적화하세요.
  • 나머지 중요 리소스가 로드되는 순서를 최적화합니다. 가능한 한 빨리 모든 중요 애셋을 다운로드하여 중요 경로 길이를 단축합니다.

이미지, JavaScript, CSS, 웹 글꼴을 최적화하는 방법을 자세히 알아보세요.

스택별 안내

Magento

JavaScript 애셋을 번들로 구성하지 않는 경우 baler를 사용해 보세요.

리소스

중요 요청 깊이 최소화 감사용 소스 코드