Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse가 중요한 요청 연결을 식별하는 방법
  • 스택별 지침
    • Magento
  • 참고 자료

중요한 요청 연결 방지

May 2, 2019 — 업데이트됨 Apr 29, 2020
Available in: Español, 日本語, Português, Русский, 中文, English
Appears in: 성능 감사
이 페이지에서
  • Lighthouse가 중요한 요청 연결을 식별하는 방법
  • 스택별 지침
    • Magento
  • 참고 자료

중요한 요청 연결은 페이지 렌더링에 중요한 일련의 종속 네트워크 요청입니다. 연결의 길이와 다운로드 크기가 클수록 페이지 로드 성능에 미치는 영향이 더 커집니다.

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

Lighthouse 최소화 중요 요청 깊이를 보여주는 스크린샷
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Lighthouse가 중요한 요청 연결을 식별하는 방법 #

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

중요한 요청 연결, 리소스 크기, 리소스 다운로드에 소요된 시간에 대한 데이터는 Chrome 원격 디버깅 프로토콜에서 추출합니다.

성능에 대한 중요한 요청 연결의 영향을 줄이는 방법 #

중요한 요청 연결 감사 결과를 사용하여 페이지 로드에 가장 큰 영향을 미치는 리소스를 먼저 대상으로 지정합니다.

  • 중요한 리소스의 수를 최소화합니다. 이를 제거하고 다운로드를 연기하고 async로 표시하는 등의 작업을 수행합니다.
  • 중요한 바이트의 수를 최적화하여 다운로드 시간(왕복 횟수)을 줄이십시오.
  • 나머지 중요 리소스가 로드되는 순서를 최적화합니다. 모든 중요 자산을 최대한 빨리 다운로드하여 중요 경로 길이를 단축합니다.

이미지, 자바스크립트, CSS, 웹 글꼴 최적화에 대해 자세히 알아보십시오.

스택별 지침 #

Magento #

JavaScript 자산을 번들로 묶지 않는 경우 baler 사용을 고려하십시오.

참고 자료 #

중요 요청 깊이 최소화 감사를 위한 소스 코드

마지막 업데이트: Apr 29, 2020 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.