Lazy load를 적용할 때 주의할 점
가장 흔한 실수는 퍼스트뷰의 메인 이미지까지 지연 로딩하는 것입니다. 첫 화면 이미지는 페이지가 열리자마자 필요한데, 지연 로딩을 걸면 브라우저가 레이아웃을 계산한 뒤에야 요청하므로 LCP가 늦어집니다. 첫 화면에 보이는 이미지는 일반 로딩으로 두고 그 아래 이미지에만 적용합니다.
지연 로딩하는 이미지에도 width·height를 지정해야 합니다. 크기가 없으면 이미지가 뜨는 순간 아래 내용이 밀려 CLS가 나빠집니다.
검색엔진이 지연 로딩 콘텐츠를 읽게 하는 방법
구글 크롤러는 페이지를 스크롤하거나 클릭하지 않습니다. 사용자의 스크롤 이벤트에 반응해서만 콘텐츠를 불러오도록 직접 구현하면 크롤러는 그 이미지나 글을 발견하지 못할 수 있습니다. 구글은 브라우저 기본 기능인 loading="lazy"나 IntersectionObserver처럼, 요소가 화면 영역에 들어오면 불러오는 방식을 권장합니다.
목록을 스크롤에 따라 계속 불러오는 무한 스크롤도 같은 원리라서, 각 묶음을 고유 URL의 페이지네이션으로도 열 수 있게 해야 합니다. 적용 후에는 서치콘솔 URL 검사의 실시간 테스트로 렌더링된 HTML에 이미지와 본문이 들어 있는지 확인합니다.