메인 배너 LCP가 느리다면? 첫 화면 이미지는 lazy 대신 fetchpriority로
PageSpeed Insights에서 LCP(최대 콘텐츠 렌더링) 점수가 유독 나쁘다면, 메인 배너 이미지에 loading="lazy"가 붙어 있지 않은지부터 확인해 보세요.
첫 화면에 보이는 이미지는 지연 로딩을 빼고 fetchpriority="high"를 주는 것만으로 체감 속도가 눈에 띄게 달라집니다.
💡 lazy를 붙이면 빨라진다고 하지 않았나요?
지연 로딩(loading="lazy")은 스크롤해야 보이는 이미지용입니다. 테마나 플러그인이 모든 <img>에 일괄로 붙이면 메인 배너까지 다운로드가 뒤로 밀립니다. web.dev 가이드도 첫 화면의 LCP 이미지에는 lazy를 쓰지 말라고 안내합니다.
1. 첫 화면 이미지에서 lazy 빼기
최근 리뉴얼한 고객사 사이트도 공통 이미지 컴포넌트에 lazy를 넣었는데, 메인 배너가 그 컴포넌트를 쓰고 있었습니다. 크롬 개발자도구 Performance 패널에서 LCP로 잡히는 요소를 확인하고 그 이미지에서만 속성을 지우세요. loading="eager"는 기본값이라 적지 않아도 됩니다.
2. fetchpriority="high"로 우선순위 올리기
브라우저는 레이아웃을 계산한 뒤에야 어떤 이미지가 화면 안에 있는지 압니다. fetchpriority="high"는 그 판단을 기다리지 말고 먼저 받아 달라는 힌트입니다. 크롬·엣지 101, 사파리 17.2, 파이어폭스 132 이상에서 지원하고, 미지원 브라우저는 무시할 뿐이라 부작용이 없습니다.
<!-- 메인 배너: 지연 로딩 없이 가장 먼저 -->
<img src="/images/main-banner.webp" alt="회사 대표 이미지"
width="1920" height="800" fetchpriority="high">
<!-- 슬라이더라면 첫 장만 high, 나머지는 lazy -->
<img src="/images/slide-2.webp" alt="두 번째 배너"
width="1920" height="800" loading="lazy">3. CSS 배경 이미지라면 preload 한 줄
배너가 background-image라면 브라우저는 CSS를 해석한 뒤에야 이미지를 발견합니다. <head>에 preload를 넣어 바로 요청하게 하세요.
<head>
<!-- CSS보다 먼저 배너 이미지를 발견하도록 -->
<link rel="preload" as="image" href="/images/main-banner.webp" fetchpriority="high">
</head>적용할 때 주의할 점입니다.
- high는 한두 장만 지정하세요. 모두 주면 의미가 없습니다.
- PC·모바일 배너가 다르면 preload에
media속성을 나눠 넣어야 불필요한 다운로드가 없습니다. - 원본이 수 MB라면 효과가 제한적입니다. WebP 변환과 리사이즈가 먼저입니다.
width·height를 적어 두면 화면 덜컹거림(CLS)도 막을 수 있습니다.
"빠른 사이트는 무엇을 늦출지보다 무엇을 먼저 보여 줄지에서 갈립니다."
나눔웹은 퍼블리싱 단계에서 LCP 요소와 이미지 로딩 순서까지 직접 확인해,
방문자가 첫 화면을 기다리지 않는 사이트를 만듭니다.