우선 순위 힌트 및 fetchpriority로 리소스 로드 속도 향상
게시 됨: 2022-09-30가장 중요한 리소스가 얼마나 빨리 로드됩니까?
이 정확한 질문에는 웹사이트 소유자(및 노련한 웹 전문가)가 있습니다. 그리고 그것은 처음 밀리초 만에 웹사이트를 만들거나 깨뜨리는 것입니다.
리소스 로딩 최적화와 관련하여 두 가지 옵션이 있습니다.
- 브라우저의 메커니즘에 전적으로 의존하여 최적의 순서로 리소스를 다운로드하고 가져옵니다.
- 리소스 힌트를 구현하여 그들을 도우십시오.
불행히도 최신 브라우저가 좋은 만큼 각 사이트/응용 프로그램은 설정과 컨텍스트가 다릅니다. 리소스 우선 순위를 지정하는 데는 꽤 능숙하지만 경우에 따라 그것으로 충분하지 않습니다.
아아, 리소스 힌트는 리소스 우선 순위 지정에 대한 제한된 영향을 제공합니다.
운 좋게도 웹 성능 도구 상자에 추가할 수 있는 새로운 힌트인 우선 순위 힌트가 있습니다.
이 기사에서는 다음에 대해 자세히 알아볼 것입니다.
- 우선 순위 힌트는 무엇입니까?
- 언제 사용;
- fetchpriority를 통해 구현하는 방법
- 사이트에서 테스트하는 방법.
의 시작하자!
우선순위 힌트란 무엇입니까?
우선 순위 힌트는 브라우저에서 리소스(예: 이미지, 글꼴, CSS, 스크립트 및 iframe)를 로드할 때 웹사이트 소유자와 개발자가 리소스의 우선 순위를 표시할 수 있도록 하는 신호입니다.
브라우저는 웹 페이지를 구축하는 과정에서 모든 종류의 리소스를 다운로드해야 합니다. 우선 순위 리소스로 HTML 문서를 먼저 요청하고 다운로드합니다.
그러나 브라우저는 다음에 로드할 항목을 어떻게 결정합니까?
브라우저에는 각 리소스 유형에 대해 미리 결정된 우선 순위 세트가 있습니다.
이러한 기본 우선 순위는 일반적으로 매우 잘 작동하므로 웹 성능이 좋습니다.
그러나 Addy Osmani가 Priority 힌트에 대한 그의 기사에서 언급했듯이 브라우저는 다음에 가져올 항목에 대해 충분히 교육받은 추측을 할 수 있습니다.
그러나 그들은 당신만큼 당신의 프로젝트를 모릅니다.
따라서 약간의 미세 조정이 필요할 수 있습니다.
"Chrome과 같은 브라우저는 리소스가 뷰포트에 있는지 여부와 같은 신호를 기반으로 적절한 우선 순위로 리소스를 가져오려고 시도하는 휴리스틱을 가지고 있습니다. 즉, 우선 순위 힌트가 없으면 Chrome은 레이아웃을 한 번만 뷰포트 내 이미지의 우선 순위를 높일 수 있습니다. 완료되었습니다. 이것은 너무 늦은 경우가 많으며 이 시점에서는 다른 모든 것과 경쟁할 수 있습니다. 힌트 사용을 고려해야 하는 또 다른 이유는 페이지 작성자로서 사용자가 가장 먼저 보고 사용 사례에 맞게 최적화할 수 있도록 브라우저에 알릴 수 있습니다."
이전에는 사전 로드 또는 사전 연결만 사용할 수 있었습니다.
사전 로드 는 브라우저가 준수해야 하는 필수 지시문이지만 경우에 따라 사전 로드된 리소스는 여전히 낮은 우선 순위를 가질 수 있습니다.
예를 들어 미리 로드된 LCP(Large Contentful Paint) 이미지는 우선 순위가 낮고 우선 순위가 높은 다른 리소스에 의해 뒤로 밀려날 수 있습니다. 이러한 경우 Priority Hint는 사전 로드를 완벽하게 보완하고 리소스가 로드되는 시간을 도울 수 있습니다.
다음은 Pat Meenan이 Chrome의 Priority Hint에 대해 이야기하고 LCP의 "치트 코드"라고 부르는 Priority Hint에 대한 웨비나입니다.
이것은 Priority Hint의 힘을 보여주는 대표적인 예입니다.
이제 웹 성능 전략에서 우선 순위 힌트를 구현해야 하는 경우 를 살펴보겠습니다.
우선순위 힌트를 사용하는 경우
Google에 따르면 Priority Hint가 도움이 될 수 있는 5가지 주요 시나리오가 있습니다.
- 스크롤 없이 볼 수 있는 이미지가 여러 개 있지만 모든 이미지의 우선순위가 같을 필요는 없습니다. 예를 들어 이미지 캐러셀에서 첫 번째 보이는 이미지만 다른 이미지에 비해 더 높은 우선 순위가 필요합니다.
- 뷰포트 내부의 영웅 이미지는 낮은 우선 순위에서 시작합니다. 레이아웃이 완료되면 Chrome은 레이아웃이 표시 영역에 있음을 발견하고 우선 순위를 높입니다(안타깝게도 개발 도구는 최종 우선 순위만 표시합니다. WebPageTest는 둘 다 표시함). 이것은 일반적으로 이미지 로드에 상당한 지연을 추가합니다. 마크업에 우선 순위 힌트를 제공하면 이미지가 높은 우선 순위에서 시작되고 훨씬 더 일찍 로드를 시작할 수 있습니다.
거의 모든 웹 사이트는 처음 두 가지 시나리오에 해당합니다. 나머지 작업을 수행해야 하는지 결정하려면 (HTML/JS) 코드를 자세히 살펴보거나 웹 개발자에게 도움을 요청하세요.
우선 순위 힌트를 구현하는 방법: fetchpriority 속성
fetchpriority HTML 속성을 사용하여 우선 순위 힌트를 구현할 수 있습니다.
다음과 함께 속성을 사용할 수 있습니다.
- 링크
- 이미지
- 스크립트
- iframe 태그
fetchpriority 속성은 다음 세 가지 값 중 하나를 허용합니다.
- 높음: 리소스가 중요하다고 생각하고 브라우저에서 우선 순위를 지정하기를 원함을 나타냅니다.
- 낮음: 리소스가 덜 중요하다고 생각하고 브라우저에서 우선 순위를 낮추기를 원한다는 신호입니다.
- auto: 기본 설정이 없고 브라우저가 적절한 우선 순위를 결정하도록 하는 경우의 기본값입니다.
또는 JavaScript Fetch API를 사용할 수 있습니다.
fetchpriority 속성을 사용할 때 염두에 두어야 할 몇 가지 사항:
- fetchpriority 는 우선 순위가 더 높은 리소스가 같은 유형의 다른(우선 순위가 낮은) 리소스보다 먼저 로드되도록 보장하지 않습니다.
- fetchpriority 는 로딩 순서 자체를 제어하는 데 사용되어서는 안 됩니다.
- fetchpriority 는 필수 지시문이 아니며 브라우저가 리소스를 가져오거나 가져오는 것을 방지할 수 없습니다. 리소스를 가져올지 여부는 브라우저에 달려 있습니다.
우선순위 힌트로 사이트를 테스트하는 방법
테스트를 실행하기 전에 우선순위 힌트는 Chrome 101(이상) 및 Edge 101(이상)에서만 사용할 수 있음을 알아야 합니다.
이제 당면한 질문에:
가장 쉬운 방법은 도구를 사용하는 것이므로 코드를 수동으로 변경할 필요가 없습니다.
다행히 WebPageTest의 실험 기능을 사용하면 코드를 변경하지 않고도 우선 순위 힌트와 같은 성능 기능을 테스트할 수 있습니다.
그러나 WebPageTest의 실험 기능은 유료 구독의 일부이므로 추가 비용을 계획해야 합니다.
반대로 기술 기술이 있는 경우 사이트 코드를 직접 미세 조정하고 우선 순위 힌트의 영향을 테스트할 수 있습니다.
변경할 때마다 테스트를 실행해야 합니다.
요약
우리는 많은 근거를 다루었으므로 다음은 가장 중요한 요점을 간단히 요약한 것입니다.
- 우선 순위 힌트를 사용하면 사이트 리소스의 우선 순위를 나타낼 수 있습니다.
- 우선 순위 힌트는 스크롤 없이 볼 수 있는 이미지, 영웅 이미지(LCP 요소), 비동기 및 지연 스크립트, CSS 및 글꼴 파일의 로드 속도를 높이는 데 도움이 됩니다.
- 우선순위 힌트는 fetchpriority 속성을 통해 구현할 수 있습니다.
- link, img, script 및 iframe 태그와 함께 fetchpriority 속성을 사용할 수 있습니다.
- fetchpriority 속성은 높음, 낮음 및 자동의 세 가지 값 중 하나를 허용합니다.
- 주의: 우선 순위 힌트를 과도하게 사용하면 속도 향상보다는 성능 저하로 이어질 수 있으므로 드물게 구현해야 합니다.
- fetchpriority는 필수 지시문이 아니며 브라우저가 리소스를 가져오거나 가져오는 것을 방지할 수 없습니다. 리소스를 가져올지 여부는 브라우저에 달려 있습니다.
- 우선순위 힌트는 Chrome 101 이상에서 사용할 수 있습니다.
사이트에 대한 Priority Hint의 영향을 측정하려면 모든 변경 후에 테스트를 실행하십시오.
인기 있는 테스트 도구:
- PageSpeed 인사이트
- GTMetrix
- 웹페이지 테스트
- 등대
- 핑돔