노트이미지 로딩 우선순위(loading·fetchpriority)
Image Loading Priority
프런트엔드#performance#html · 연결된 개념 3개
쉽게 말하면
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이고, 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으로 끌어올리면 스켈레톤에 덮이지 않고 처음부터 실제 모습으로 보인다.
- 브라우저 캐시
한 번 받은 리소스(HTML·CSS·JS·이미지)를 브라우저가 저장해 두었다가 다시 쓰는 기능. 서버가 응답 헤더로 얼마나, 어떻게 캐시할지 알려 주고 브라우저가 그대로 따른다.
- 크로스 브라우징
크로스 브라우징은 브라우저 종류·버전·기기가 달라도 웹 페이지가 같은 기능을 제공하도록 만드는 일이다. 모든 브라우저에서 픽셀까지 똑같이 보이게 하는 것이 목표가 아니라, 지원하기로 한 환경에서 핵심 기능이 동작하고 오래된 환경에서도 쓸 수는 있게(점진적 향상, Progressive Enhancement) 하는 것이 목표다.
- 지연 로딩
연관된 엔티티를 처음 접근할 때 조회하는 방식. 그 전까지는 그 자리에 프록시(컬렉션이면 Hibernate 컬렉션 래퍼)가 들어 있다.