지연 로딩
사용자가 가까이 스크롤할 때까지 오프스크린 이미지와 콘텐츠의 로딩을 지연시켜 초기 페이지 로딩 시간을 줄이는 기술입니다.
지연 로딩은 초기 페이지 로드 시 뷰포트에 표시되는 콘텐츠만 로드하여 성능을 향상시킵니다. 스크롤해야 볼 수 있는 부분 아래의 이미지는 사용자가 스크롤하여 실제 이미지 다운로드를 트리거할 때까지 가벼운 자리 표시자로 유지됩니다. HTML loading='lazy' 속성을 통한 기본 지연 로딩은 모든 최신 브라우저에서 지원되며 JavaScript가 필요하지 않습니다. Intersection Observer API는 사용자 정의 구현에 대한 더 많은 제어를 제공합니다. 스크롤 없이 볼 수 있는 히어로 이미지의 경우 지연 로딩을 비활성화해야 합니다. 이러한 이미지는 최적의 콘텐츠가 포함된 최대 페인트를 위해 즉시 로딩되어야 합니다. 표시되는 콘텐츠를 지연시키는 공격적인 지연 로딩은 인지된 성능에 해를 끼칩니다. 눈에 보이는 콘텐츠는 즉시 로드하고 다른 모든 콘텐츠는 지연 로드하는 것이 균형입니다.