Chrome은 이미지 요청 우선순위를 어떻게 결정할까요?
Chrome 브라우저가 이미지 리소스 요청 우선순위를 결정하는 방식과 최적화 기법을 알아봅니다.
이미지 요청은 기본적으로 Low 우선순위
기본적으로 이미지 요청은 Low 우선순위를 갖습니다. 브라우저는 이미지를 로드하기 전에 렌더링 차단 리소스(HTML, CSS, 동기 JavaScript)를 먼저 처리하죠.
여러 이미지가 Low 우선순위로 처리되는 모습
회색 막대는 대기 시간을 나타내며, 700ms가 넘는 경우도 많아요. Chrome은 페이지 렌더링이 시작될 때까지 낮은 우선순위 리소스의 요청을 시작조차 하지 않습니다.
Chrome은 리소스를 두 단계로 로드합니다. 초기 단계인 “엄격 모드(Tight Mode)”에서는 낮은 우선순위 요청에 자원을 사용하지 않습니다. 가장 중요한 페이지 리소스가 로드된 후에야 Low 우선순위의 이미지를 로드하기 시작합니다.
핵심 리소스 로드 후 이미지 로딩 시작
Chrome 117부터 처음 5개 큰 이미지 우선순위 상향
Chrome 117 버전부터 처음 로드되는 5개의 큰 이미지 우선순위를 Low에서 Medium으로 상향 조정했습니다. 주요 이미지를 더 빨리 로드하려는 변경이에요.
5개 이미지가 Medium 우선순위 할당받은 모습
이 접근 방식은 효율적인 리소스 로딩을 유지하면서 주요 이미지 우선순위를 높여 LCP(Largest Contentful Paint) 점수 개선에 도움이 됩니다.
큰 이미지의 기준
면적이 10,000 픽셀² 이상인 이미지는 큰 이미지로 간주되어 Medium 우선순위로 상향 조정될 수 있습니다.
1
2
3
4
5
6
7
8
9
10
<!-- 큰 이미지로 간주됨 (Medium 우선순위) -->
<img src="hero.jpg">
<!-- width, height 미지정 → 기본값으로 큰 이미지 간주 -->
<img src="banner.jpg" width="200" height="100">
<!-- 200 × 100 = 20,000 픽셀² → 큰 이미지 -->
<!-- 큰 이미지로 간주되지 않음 (Low 우선순위 유지) -->
<img src="icon.jpg" width="10" height="10">
<!-- 10 × 10 = 100 픽셀² → 작은 이미지 -->
width/height 미지정 → 기본적으로 큰 이미지로 간주
10×10 픽셀로 지정 → Low 우선순위 유지
width와 height 속성이 지정되지 않은 경우, Chrome은 해당 이미지를 기본적으로 큰 이미지로 간주합니다.
뷰포트 진입 시 High 우선순위로 변경
모든 이미지는 기본적으로 Low 우선순위를 갖지만, 이미지가 뷰포트에 들어오면 우선순위가 High로 바뀌죠. 이 변경은 일반적으로 FCP(First Contentful Paint) 이후에 발생합니다.
LCP 이미지에 문제가 될 수 있어요. 대부분의 경우 LCP 이미지는 페이지 로드 중에 우선순위가 Low에서 High로 변경되는 걸 관찰하게 됩니다.
LCP 이미지의 우선순위가 Low에서 High로 변경
이 변경은 브라우저가 문서 파싱을 시작하고 해당 이미지가 뷰포트에 있음을 인지한 후에 발생하며, 이 시점은 이미 LCP 측정에 영향을 줄 수 있을 만큼 늦을 수 있습니다.
fetchpriority 속성으로 우선순위 직접 제어
개발자는 fetchpriority 속성을 사용하여 이미지 로딩 우선순위를 직접 제어할 수 있습니다.
fetchpriority=”high”
LCP 이미지에 이 속성을 설정하면 브라우저가 가능한 한 빨리 해당 이미지를 로드합니다.
1
2
3
4
5
<img
src="hero-image.jpg"
alt="Hero Image"
fetchpriority="high"
>
fetchpriority=”high”로 즉시 높은 우선순위 할당
뷰포트 진입 감지를 기다릴 필요 없이 즉시 높은 우선순위가 적용되어 LCP 점수가 크게 좋아질 수 있어요.
fetchpriority=”low”
뷰포트 밖에 있는 큰 이미지에 이 속성을 설정하여 의도적으로 Low 우선순위를 유지시킬 수 있습니다.
1
2
3
4
5
6
7
<img
src="footer-banner.jpg"
alt="Footer Banner"
width="1200"
height="400"
fetchpriority="low"
>
fetchpriority=”low”로 Low 우선순위 유지
중요도가 낮은 이미지 때문에 중요한 리소스 로딩이 지연되는 걸 막아줍니다.
이미지 프리로딩
이미지 로딩을 관리하는 또 다른 방법은 <link rel="preload">를 사용하는 것입니다. HTML에서 직접 참조되지 않는 CSS 배경 이미지나 JavaScript로 동적으로 로드되는 이미지에 유용합니다.
1
2
3
4
<head>
<link rel="preload" as="image" href="hero-bg.jpg">
<link rel="preload" as="image" href="critical-image.jpg" fetchpriority="high">
</head>
프리로드된 리소스의 우선순위는 해당 리소스 유형의 기본 우선순위와 동일합니다. 따라서 이미지를 프리로드해도 기본적으로 Low 우선순위예요.
프리로드된 이미지도 Low 우선순위 유지
프리로드는 리소스를 조기에 발견하게 하지만, 우선순위를 자동으로 높이지는 않아요. 높은 우선순위가 필요하다면 fetchpriority=”high”를 함께 사용해야 합니다.
베스트 프랙티스
LCP 이미지 최적화
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- LCP 이미지에 fetchpriority="high" 사용 -->
<img
src="hero.jpg"
alt="Hero Image"
fetchpriority="high"
width="1200"
height="600"
>
<!-- CSS 배경 이미지가 LCP라면 프리로드 -->
<head>
<link
rel="preload"
as="image"
href="hero-bg.jpg"
fetchpriority="high"
>
</head>
중요하지 않은 큰 이미지
1
2
3
4
5
6
7
8
<img
src="decorative-large.jpg"
alt="Decoration"
width="800"
height="400"
fetchpriority="low"
loading="lazy"
>
요약
- 기본 이미지: Low 우선순위
- 처음 5개 큰 이미지 (Chrome 117+): Medium 우선순위
- 뷰포트 진입 시: High 우선순위로 변경
- fetchpriority=”high”: 즉시 High 우선순위
- fetchpriority=”low”: 강제로 Low 유지
- preload: 조기 발견 (우선순위는 동일)
- preload + fetchpriority=”high”: 조기 발견 + High 우선순위
가장 중요한 이미지(LCP)에 fetchpriority=”high”를 적용하고, 덜 중요한 큰 이미지에는 fetchpriority=”low”를 사용하여 리소스를 효율적으로 관리하세요.