이미지 최적화 이미지 로딩 속도에 우선 순위를 제어하는 fetchpriority 소개

fetchpriority로 이미지 우선 로딩으로 최적화 설정하기

검색엔진 최적화 작업중 이미지 로딩 속도 최적화를 빠르게 하는 간단한 태그 요소에 대한 사용 방법과 설명입니다

검색 최적화 작업중에서 이미지의 로딩 속도는 큰 영향을 주는 요소중 하나 입니다. 이미지는 텍스트 기반의 페이지에서 특히 속도부분에서 영향을 많이 미치기 때문에 이미지의 로딩이 시스템 전체 속도에 영향을 줍니다.

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

이미지를 최적화 하거나 용량을 줄여서 검색 최적화 속도에 이미지가 미치는 영향을 최소화 할수도 있으면 이러한 방법에 더불어 웹 브라우저에게 이미지에 우선순위를 지정해주어 이미지를 먼저 로딩시키는 방법이 있습니다. 검색 최적화 속도을 향상시키기 위해 이미지에 제어해 줄수 있는 속성중 이미지 속성 fetchpriority 에 대한 설명입니다.

SEO 최적화를 위한 이미지 로딩 우선순위 설정 방법

이 태그는 preload와 병행해서 사용이 가능하며 지정을 한 이미지가 다른 요소보다 먼저 로드 되도록 합니다. 첫 스크린에 노출되는 이미지는 검색 최적화 속도의 측정 요소가 되기 때문에 노출 순서에 의해 지정해야 하며 첫 뷰포인트에서 벗어난 이미지는 선택적 로딩을 통해 속도를 제어해서 전체 로딩 속도를 조절할수 있습니다.

fetchpriority 사용 방법

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

첫 뷰포인트의 이미지는 그 페이지에 노출 부분에서 가장 먼저 노출이 되는 중요한 이미지라서 이 이미지가 먼저 로딩되게 이미지에 fetchpriority 속성을 지정해 주시면 됩니다. 구 버전의 브라우저에서는 이 속성이 무시될수도 있습니다.

이미지 로딩속도 제어속성

✔ 예시

이미지 로딩 속도 제어 태그 예시