스크립트 우선순위 최적화

브라우저는 문서에 표시되는 위치와 async 또는 defer와 같은 속성이 있는지에 따라 스크립트에 기본 우선순위를 할당합니다. fetchpriority를 사용하면 개발자가 명시적으로 제어하여 중요한 스크립트가 먼저 로드되도록 하고 필수적이지 않은 스크립트는 방해가 되지 않도록 할 수 있습니다.

구현 방법

1. 중요 스크립트 식별: 페이지의 핵심 기능 또는 초기 사용자 상호작용에 필수적인 스크립트를 결정합니다.
2. 중요한 비동기 스크립트 승격: async 또는 defer로 로드된 중요한 스크립트의 경우 fetchpriority="high" 속성을 추가하여 탐색 단계에서 우선순위가 지정되도록 합니다.
3. 필수적이지 않은 스크립트의 우선순위 낮추기: 즉시 필요하지 않은 스크립트 (예: 분석, 광고, 스크롤해야 볼 수 있는 위젯)의 경우 fetchpriority="low"를 추가하고 async, defer 또는 module 속성이 있는지 확인하여 차단을 방지합니다.
4. 파서 차단 스크립트 순서 지정: 본문 끝에 있는 파서 차단 스크립트에 fetchpriority="low"를 사용하여 더 중요한 리소스와 대역폭을 두고 경쟁하지 않도록 합니다.

예시 코드

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

권장사항

• 필수: 네트워크 경합과 우선순위 향상 효과의 희석을 방지하기 위해 최대 1~2개의 중요한 스크립트에만 fetchpriority="high"를 사용합니다.
• 다음 페인트에 대한 상호작용 (INP)에 중요한 것으로 알려진 async 스크립트에만 fetchpriority="high"를 사용합니다.
• fetchpriority="low"를 사용하여 초기 사용자 환경에 필요하지 않은 스크립트의 우선순위를 낮춥니다(권장).
• 모든 스크립트 태그에 fetchpriority를 사용하지 마세요. 브라우저의 기본 휴리스틱이 최적이 아닌 것으로 알려진 경우에만 이를 변경하는 데 사용해야 합니다.
• 지원 중단된 importance 속성을 사용하지 마세요. fetchpriority로 대체되었습니다.

대체 전략

fetchpriority 속성은 점진적 개선입니다. 이를 지원하지 않는 브라우저는 속성을 무시하고 오류 없이 내부 예약 로직을 사용합니다. 기본 사용에는 명시적인 기능 감지 또는 대체 로직이 필요하지 않습니다.