fetchpriority 속성을 이용한 이미지 우선 로딩 및 성능 최적화

검색엔진 최적화(SEO) 작업에서 핵심적인 이미지 로딩 속도 최적화를 위한 HTML 태그 요소인 fetchpriority 사용 방법과 설명을 다룹니다. 이 속성을 활용하여 웹 브라우저에게 이미지 로딩 우선순위를 지정하고, First Contentful Paint (FCP)와 Largest Contentful Paint (LCP) 같은 Core Web Vitals 지표를 개선하는 구체적인 최적화 방법을 알아봅니다.

이미지 로딩 우선순위 설정으로 Core Web Vitals 최적화하기

이미지의 로딩 속도는 텍스트 기반의 페이지에서 특히 시스템 전체 속도에 큰 영향을 미치는 요소 중 하나입니다. 검색 최적화 작업 중에서 이미지가 미치는 영향을 최소화하기 위해 용량 최적화와 더불어, 웹 브라우저에게 이미지 로딩에 우선순위를 지정해주는 방법이 있습니다. 검색 최적화 속도을 향상시키기 위해 이미지에 제어해 줄 수 있는 속성 중 이미지 로딩 우선순위 속성인 fetchpriority에 대한 정보입니다.

SEO 최적화를 위한 fetchpriority 사용 방법 및 중요성

이 태그는 기존의 preload와 병행해서 사용이 가능하며, 지정을 한 이미지가 다른 요소(스크립트, CSS 등)보다 먼저 로드되도록 브라우저에 힌트를 제공합니다. 첫 스크린(뷰포트)에 노출되는 이미지는 LCP(Largest Contentful Paint)라는 검색 최적화 속도의 핵심 측정 요소가 되기 때문에, 이 이미지의 로딩 순서를 제어하는 것이 매우 중요합니다.

첫 뷰포인트에서 벗어난 이미지(Above-the-fold가 아닌 이미지)는 지연 로딩(Lazy Loading)을 적용하고, 로딩 우선순위를 낮춰서 전체 페이지 로딩 속도를 조절할 수 있습니다. 이는 사용자 경험(UX)을 개선하고 불필요한 리소스 경쟁을 줄이는 데 필수적인 기법입니다.

fetchpriority 속성 값과 사용 방법

fetchpriority 속성은 브라우저가 이미지를 로드 할시 우선순위를 설정해 주는 힌트 속성입니다.

첫 뷰포인트의 이미지는 그 페이지에 노출 부분에서 가장 먼저 노출이 되는 중요한 이미지입니다. 따라서 이 이미지가 다른 리소스보다 먼저 로딩되게 이미지 태그에 fetchpriority="high" 속성을 지정해 주시면 됩니다. 구 버전의 브라우저에서는 이 속성이 무시될 수도 있으나, 최신 웹 표준을 지원하는 대부분의 브라우저에서 성능 향상에 기여합니다.

속성 값	설명	주요 사용 시점
`high`	가장 높은 우선순위로 즉시 로드	첫 뷰포트의 핵심 이미지 (LCP 요소), 배너 이미지
`low`	가장 낮은 우선순위로 지연 로드	접기 아래 이미지 (Below-the-fold), 보조적인 작은 아이콘
`auto`	브라우저의 기본 우선순위 사용	일반적인 이미지 및 기본값

✔ 예시: 가장 중요한 로고 또는 첫 번째 이미지를 빠르게 로드할 때

img src="main.jpg" alt="메인 이미지" fetchpriority="high"

preload와 fetchpriority의 차이점 및 결합 사용

preload는 브라우저에게 "이 리소스는 곧 필요하니 미리 가져와라"고 명시적으로 명령하는 반면, fetchpriority는 "이 리소스를 가져올 때 다른 리소스보다 더 중요하게 취급해라"고 우선순위 힌트입니다. preload를 사용하여 리소스를 미리 가져오도록 지정하고, fetchpriority="high"를 함께 사용하여 그 리소스를 가져오는 행위 자체에 높은 우선순위를 부여하면 LCP 개선에 더욱 효과적입니다.

예시: link rel="preload" href="hero-image.jpg" as="image" fetchpriority="high"

Q: 모든 이미지에 fetchpriority="high"를 적용해도 되나요?

A: 아닙니다. 모든 이미지에 high를 적용하면 브라우저가 어떤 리소스가 정말 중요한지 판단하기 어려워져 실제 성능 향상 효과가 사라집니다. 페이지 로딩 최적화의 원칙에 따라, 사용자에게 즉시 보여야 하는 최대 2~3개의 핵심 이미지에만 high를 적용하는 것이 가장 효과적입니다. 그 외의 이미지는 low나 지연 로딩을 적용하는 것이 좋습니다.

Q: fetchpriority를 사용하면 이미지 용량 최적화를 건너뛰어도 되나요?

A: 아닙니다. fetchpriority는 "로딩 순서"를 제어하는 것이지, "로딩 시간" 자체를 줄이는 것은 아닙니다. 이미지의 파일 크기(용량)가 크면 아무리 우선순위가 높아도 로딩 시간이 길어집니다. 따라서 이미지 압축, WebP 포맷 사용, 반응형 이미지를 위한 srcset 사용과 같은 용량 최적화 작업은 병행되어야 합니다.

Q: CSS 배경 이미지에도 fetchpriority를 적용할 수 있나요?

A: 네, CSS에서 로드되는 배경 이미지도 성능에 큰 영향을 미칠 수 있습니다. 이 경우, 일반적으로 link rel="preload" as="image" href="bg-image.jpg" fetchpriority="high" 구문을 HTML head 태그에 넣어 미리 가져오도록 명시적으로 지시해야 합니다. CSS 파일 내에서 직접적으로는 fetchpriority를 사용할 수 없습니다.

Daily Hub