노트

이미지 로딩 우선순위(loading·fetchpriority)

Image Loading Priority

프론트엔드#performance#html · 연결된 개념 6개

쉽게 말하면

loading은 이미지를 언제 받을지, fetchpriority는 받을 때 얼마나 급한지 브라우저에 알려 주는 속성이에요. 응급실 분류표처럼 첫 화면의 큰 이미지를 먼저 받게 해서 화면이 빨리 완성돼요.

비유의 한계 모두에게 '급함' 표를 붙이면 아무 의미가 없어요. 브라우저 기본 우선순위가 대체로 맞으니 근거가 있을 때만 덮어쓰고, lazy와 high는 반대 신호라 같이 쓰지 않아요.

loading은 이미지를 언제 받을지(lazy·eager)를, fetchpriority는 받을 때 얼마나 급한지(high·low·auto)를 브라우저에 알려 주는 HTML(HyperText Markup Language) 속성이다. 둘 다 LCP(Largest Contentful Paint)에 직접 영향을 준다.

  • 브라우저는 텍스트보다 이미지를 그리는 데 오래 걸린다. 이미지를 찾고, 받고, 그리는 단계를 모두 거쳐야 한다
  • 화면 밖 이미지에는 loading="lazy"를 쓴다. 자세한 동작은 이미지 loading 속성
  • 첫 화면에서 가장 큰 이미지(히어로, 첫 캐러셀 장)는 lazy로 두면 안 되고, 필요하면 fetchpriority="high"를 준다
  • loading="lazy"와 fetchpriority="high"를 같이 쓰지 않는다. 서로 반대 방향의 신호다
  • 브라우저의 기본 우선순위는 대체로 잘 맞는다. 이 속성들은 기본값을 덮어쓰는 것이니 근거가 있을 때만 쓴다. 전부 high로 주면 아무 의미가 없다
  • 이미지를 더 일찍 발견하게 하는 방법은 preload이고(HTML에 직접 적힌 <img>는 프리로드 스캐너가 미리 찾는다), Next.js의 next/image는 기본이 lazy다

출처: Chrome for Developers - Debugging Fetch Priority · web.dev - Optimize resource loading with the Fetch Priority API

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 반응형 웹 디자인

    하나의 페이지가 화면 크기와 기기에 맞춰 레이아웃·이미지·글자 크기를 바꾸도록 만드는 접근. 미디어 쿼리(Media Query), 유연한 레이아웃(Flexible Layout), 반응형 미디어(Responsive Media)가 세 축이다.

  • loading 경계와 레이아웃 끌어올리기

    Next.js App Router에서 loading.tsx는 같은 세그먼트의 page와 그 아래(하위 layout 포함)를 suspense로 감싸지만, **같은 세그먼트의 layout은 감싸지 않는다**. 그래서 데이터를 기다릴 필요가 없는 공통 UI(탭바, 필터 헤더)를 page에서 layout으로 끌어올리면 스켈레톤에 덮이지 않고 처음부터 실제 모습으로 보인다.

  • 롱 태스크

    메인 스레드를 50ms 넘게 붙잡는 작업. W3C Long Tasks 명세는 이벤트 루프 태스크(뒤따르는 마이크로태스크 처리 포함), 렌더링 갱신 단계, 이벤트 루프 밖에서 브라우저가 UI 스레드로 하는 일 가운데 50ms를 넘는 것을 롱 태스크로 본다. 태스크는 도중에 끊기지 않으므로 그동안 클릭·키 입력 처리와 화면 갱신이 모두 밀린다(이벤트 루프).

  • 브라우저 캐시

    한 번 받은 리소스(HTML·CSS·JS·이미지)를 브라우저가 저장해 두었다가 다시 쓰는 기능. 서버가 응답 헤더로 얼마나, 어떻게 캐시할지 알려 주고 브라우저가 그대로 따른다.

  • 크로스 브라우징

    크로스 브라우징은 브라우저 종류·버전·기기가 달라도 웹 페이지가 같은 기능을 제공하도록 만드는 일이다. 모든 브라우저에서 픽셀까지 똑같이 보이게 하는 것이 목표가 아니라, 지원하기로 한 환경에서 핵심 기능이 동작하고 오래된 환경에서도 쓸 수는 있게(점진적 향상, Progressive Enhancement) 하는 것이 목표다.

보기 옵션