DevTools 도움말: 가져오기 우선순위 디버깅

Sofia Emelianova

브라우저는 웹페이지의 콘텐츠를 먼저 표시하고 일부는 나중에 표시합니다. Fetch Priority API를 사용하면 중요한 리소스의 초기 가져오기 우선순위를 브라우저에 알려 리소스 로드를 최적화할 수 있습니다.

다음 동영상을 통해 방법을 알아보세요.

• 성능 패널에서 로드 측정항목인 최대 콘텐츠 페인트 (LCP)를 찾습니다.
• 네트워크 패널과 성능 trace의 네트워크 트랙에서 초기 및 최종 우선순위를 확인하세요.
• 로컬 재정의를 사용하여 <img>, <link>, <script> 요소의 fetchpriority 속성을 테스트합니다.
• loading 및 fetchpriority 속성의 차이점을 알아보세요.
• 리소스의 우선순위를 낮춰야 하는 경우를 알아봅니다.

LCP 이미지는 fetchpriority="high"의 이점을 명확하게 누릴 수 있습니다. 또 다른 힌트는 브라우저가 자동으로 이미지의 우선순위를 높이는 경우이므로 처음에 이미지를 설정하는 것이 합리적입니다.

자세한 내용은 다음을 참고하세요.

• Fetch Priority API로 리소스 로드 최적화
• 네트워크 요청 보기
• 타이밍 보기
• 큰 요청 행 사용하기