마크업에 먼저 나타난 것과 실제로 지금 필요한 것을 구분하세요
지연 로딩은 리소스를 필요할 때까지 비핵심으로 표시하는 것입니다. 실제 사용자 여정을 기준으로 분류하세요: 최초 보기(First-view) 필수 요소, 화면 아래(하단)의 미디어, 선택적 임베드, 그리고 나중 경로나 패널용 코드. CMS상 위치만으로는 충분한 증거가 되지 않습니다; 같은 이미지라도 템플릿에 따라 오프스크린일 수도 있고 핵심일 수도 있습니다.
작동하지 않은 상태의 콜드 로드를 작은 폰과 일반적인 데스크탑에서 검토하세요. 캠페인 링크와 페이지 내부 앵커도 테스트하세요—이들은 방문자를 페이지 하단으로 직접 데려갈 수 있습니다. 이런 검토가 스크롤 트리거 요청 없이 준비되어야 할 항목을 알려줍니다.
초기 작업, 보이는 내비게이션, 핵심 문구, 그리고 첫 번째 의미 있는 시각 요소는 즉시 사용 가능해야 합니다.
하단의 갤러리, 지도, 소셜 임베드, 오프스크린 플레이어, 선택되지 않은 기능을 위한 코드 등은 일반적 후보입니다.
히어로 영역과 초기 뷰포트를 보호하세요
페이지가 열릴 때 보일 가능성이 있는 콘텐츠는 지연 로드하지 마세요. Google은 이에 대해 주의를 권고하며, web.dev의 분석은 초기 뷰포트 이미지를 지연 로드하면 LCP가 지연될 수 있음을 보여줍니다. LCP 요소는 히어로, 제품 이미지, 포스터 또는 텍스트일 수 있으므로 템플릿별로 확인하세요, 추측하지 마십시오.
확인된 LCP 이미지는 선행(eager)으로 로드하세요. 네트워크 우선순위가 분산되어 중요한 이미지가 주목을 잃는다면 fetch-priority 힌트를 높게 주는 것을 테스트해 보세요. 이는 명령이 아니라 힌트입니다. 크리티컬한 CSS 배경 이미지는 파서가 직접 발견하지 못할 수 있으므로 조기 preload가 필요할 수 있으니 측정하세요.
리스트 페이지에서 피처드 이미지가 잘못해서 lazy로 표시되는 CMS나 플러그인 기본값을 점검하세요.
데스크탑 디자인 미리보기만이 아니라 콜드 모바일 및 데스크탑 로드를 사용하세요.
미디어 도착 전에 공간을 예약하세요
Cumulative Layout Shift(CLS)는 눈에 보이는 콘텐츠의 예기치 않은 이동입니다. 높이가 알려지지 않은 지연 이미지가 텍스트나 컨트롤을 밀면 읽는 도중이나 버튼을 누르려 할 때 상호작용 위험이 발생합니다—단순한 측정치 문제가 아닙니다.
이미지와 비디오에 정확한 width·height 속성을 제공하거나 CSS의 aspect-ratio로 형태를 예약하세요. 컴포넌트의 최종 풋프린트(자리)를 가진 플레이스홀더를 사용하세요. 제3자 프레임에는 높이를 예약하고 명확한 로딩 상태나 사용 불가 상태를 제공하세요.
가능하면 자산과 함께 미디어 치수를 저장하세요; 혼합된 이미지 형태에는 일반적인 비율이 신뢰할 만하지 않습니다.
스크롤, 필터, 패널 열기, 모바일 회전, 뒤로 가기 등을 사용해 후속 레이아웃 이동을 찾아보세요.
콘텐츠 검색성(discoverable)과 상호작용을 이해하기 쉽게 유지하세요
Google Search Central은 Google이 페이지를 스크롤하거나 클릭하지 않는다고 명시합니다. 중요한 지연 로드 콘텐츠는 보이는 순간 로드되어야 하고, 렌더된 HTML은 예상되는 콘텐츠나 미디어 URL을 노출해야 합니다. 구현 후 대표 페이지를 Search Console에서 검사하세요.
인덱스 가능한 무한 리스트(infinite list)는 각 지속 가능한 청크(chunk)에 대해 페이지네이션된 경로가 필요합니다: 고유한 고정 URL, 해당 URL에서의 안정적인 콘텐츠, 그리고 시퀀스를 따라 연결되는 링크. 이렇게 하면 사람들이 다시 돌아올 수 있는 공유 가능한 지점을 만듭니다.
액션이 콘텐츠를 드러낼 때, 제어는 키보드로 조작 가능해야 하고 결과는 이해하기 쉬워야 합니다. 의미 있는 포커스가 아닌 업데이트(예: ‘결과 로드됨’)는 프로그래밍 방식으로 상태를 노출해 보조기술이 포커스 이동 없이 이를 알릴 수 있게 하세요.
제품 설명, 기사 본문, 자격 정보, 작업 지침 등은 방문자 액션 이후에만 존재해서는 안 됩니다.
필요한 체크아웃 또는 인증 컨트롤을 지연시키지 마세요. 결제·ID·서드파티 스크립트 변경은 적격한 보안·컴플라이언스 검토자가 평가해야 합니다.
가장 취약하지 않은(least fragile) 메커니즘을 사용하세요
일반적인 오프스크린 이미지와 iframe에는 브라우저의 네이티브 지연 로딩이 보통 가장 간단한 출발점입니다. 브라우저가 근접한 뷰포트 요청 시점을 결정하지만 그 거리(Threshold)는 보장되지 않습니다. window load 이벤트는 지연 자원이 남아 있는 상태에서 발생할 수 있습니다.
명명된 컴포넌트가 커스텀 활성화가 필요할 때(예: 보여지기 직전에 비싼 패널을 마운트하는 경우) Intersection Observer를 사용하세요. 옵저버는 좁게 유지하고 빠른 스크롤을 위해 충분히 일찍 작업을 시작하세요. 비초기 라우트나 선택적 기능에는 코드 스플리팅을 사용하되, 이를 현재 작업을 지연시키는 이유로 삼지 마세요.
간단한 소스를 data 속성과 여러 스크립트, 라이브러리로 대체하지 마세요—추가 동작이 테스트된 필요를 해결할 때만 도입하세요.
선택적 임베드는 영구 스피너가 아니라 명확한 폴백 또는 생략 상태를 가져야 합니다.
측정·배포·복구를 함께 계획하세요
동일한 URL, 캐시 상태, 뷰포트, 사용자 경로에서 기준(baseline)과 후보(candidate)를 비교하세요. 가능하면 콜드, 제한된 모바일 테스트와 실제 기기 점검을 병행하세요. LCP, 가시적 시퀀스, 레이아웃 이동, 미디어 오류, 렌더된 HTML, 필수 동작을 기록하세요. 필드 데이터는 실험실 테스트를 보완합니다.
되돌릴 수 있고 템플릿 범위로 한정된 변경을 배포하세요. eager에서 deferred로 옮긴 자산, 배포 참조, 캐시 조치, 담당자, 첫 번째 롤백 단계를 기록하세요. LCP가 지연되거나 전환 경로가 불완전해지면 해당 크리티컬 자산의 규칙을 제거하고 다시 확인하세요. 테마, CMS, 이미지 서비스, 태그, 임베드 변경 후에도 재검사하세요.
현재 상태 보고나 경보(alerting)가 아니라 깨진 경험을 예방하고 복구하는 데 중점을 두세요.
이미지 전체 사이트 설정을 다시 조정하기 전에 영향을 받는 템플릿 설정부터 되돌리세요.