이미지와 <iframe> 요소는 다른 유형의 리소스보다 더 많은 대역폭을 소비하는 경우가 많습니다. <iframe> 요소의 경우 내부 페이지를 로드하고 렌더링하는 데 상당한 처리 시간이 걸릴 수 있습니다.
이미지의 지연 로드의 경우 초기 표시 영역 밖에 있는 이미지의 로드를 지연하면 초기 표시 영역 내 더 중요한 리소스의 대역폭 경합을 줄이는 데 도움이 될 수 있습니다. 이렇게 하면 네트워크 연결 상태가 좋지 않은 경우 페이지의 최대 콘텐츠 렌더링 시간 (LCP)을 개선할 수 있으며 재할당된 대역폭은 LCP 후보를 더 빠르게 로드하고 페인트하는 데 도움이 될 수 있습니다.
<iframe> 요소와 관련된 경우 지연 로드를 사용하여 시작 중에 페이지의 INP(다음 페인트) 상호작용을 개선할 수 있습니다. <iframe>가 자체 하위 리소스가 있는 완전히 별개의 HTML 문서이기 때문입니다.
<iframe> 요소는 별도의 프로세스에서 실행할 수 있지만 다른 스레드와 프로세스를 공유하는 것은 드문 일이 아니며 이로 인해 페이지가 사용자 입력에 덜 반응하는 조건이 생성될 수 있습니다.
따라서 화면 밖 이미지와 <iframe> 요소의 로드를 지연하는 것은 추구할 가치가 있는 기법이며, 성능 면에서 합리적으로 좋은 결과를 얻기 위해 상당히 적은 노력이 필요합니다. 이 모듈에서는 페이지의 중요한 시작 기간에 이 두 가지 유형의 요소를 지연 로드하여 더 빠르고 나은 사용자 환경을 제공하는 방법을 설명합니다.
loading 속성을 사용한 이미지 지연 로드
loading 속성을 <img> 요소에 추가하여 브라우저에 로드 방법을 알려줄 수 있습니다.
"eager"는 이미지가 초기 표시 영역 밖에 있더라도 이미지를 즉시 로드해야 한다고 브라우저에 알립니다. 이는loading속성의 기본값이기도 합니다."lazy"는 표시되는 표시 영역에서 설정된 거리 내에 있을 때까지 이미지 로드를 연기합니다. 이 거리는 브라우저에 따라 다르지만, 사용자가 스크롤할 때 이미지가 로드될 수 있도록 충분히 크게 설정하는 경우가 많습니다.
<picture> 요소를 사용하는 경우 loading 속성은 <picture> 요소 자체가 아닌 하위 <img> 요소에 계속 적용해야 합니다. 이는 <picture> 요소가 다른 이미지 조합을 가리키는 추가 <source> 요소를 포함하는 컨테이너이고 브라우저가 선택하는 후보가 하위 <img> 요소에 직접 적용되기 때문입니다.
초기 표시 영역에 있는 이미지를 지연 로드하지 마세요.
초기 표시 영역 밖에 위치한 <img> 요소에만 loading="lazy" 속성을 추가해야 합니다. 하지만 페이지가 렌더링되기 전에 표시 영역 내에서 요소의 정확한 위치를 아는 것은 복잡할 수 있습니다. 다양한 표시 영역 크기, 가로세로 비율, 기기를 고려해야 합니다.
예를 들어 데스크톱 표시 영역은 휴대전화의 표시 영역과 상당히 다를 수 있습니다. 이는 더 많은 세로 공간을 렌더링하기 때문에 실제 작은 기기의 초기 표시 영역에는 표시되지 않는 이미지를 초기 표시 영역에 맞출 수 있기 때문입니다. 세로 방향으로 사용되는 태블릿도 상당한 양의 세로 공간을 표시하며, 일부 데스크톱 기기보다 더 많을 수도 있습니다.
그러나 loading="lazy" 적용을 피해야 하는 것이 명백한 경우도 있습니다. 예를 들어 히어로 이미지 또는 <img> 요소가 스크롤 없이 볼 수 있는 부분이나 모든 기기에서 레이아웃 상단 근처에 표시될 가능성이 있는 기타 이미지 사용 사례의 경우 <img> 요소에서 loading="lazy" 속성을 확실히 생략해야 합니다. 이는 LCP 후보가 될 수 있는 이미지의 경우 더욱 중요합니다.
지연 로드 이미지는 이미지의 최종 위치가 표시 영역 내에 있는지 확인하려면 브라우저에서 레이아웃을 완료할 때까지 기다려야 합니다. 즉, 표시되는 표시 영역의 <img> 요소에 loading="lazy" 속성이 있다면 원시 마크업의 미리 로드 스캐너에서 발견되는 즉시 가져오는 것이 아니라 모든 CSS가 다운로드되고 파싱되고 페이지에 적용된 후에만 요청됩니다.
<img> 요소의 loading 속성은 모든 주요 브라우저에서 지원되므로 자바스크립트를 사용하여 이미지를 지연 로드할 필요가 없습니다. 페이지에 자바스크립트를 추가하여 브라우저에서 이미 제공하는 기능을 제공하면 INP와 같은 페이지 성능의 다른 측면에 영향을 미치기 때문입니다.
이미지 지연 로드 데모
<iframe> 요소 지연 로드
<iframe> 요소가 표시 영역에 표시될 때까지 지연 로드하면 상당한 데이터를 절약하고 최상위 페이지를 로드하는 데 필요한 중요 리소스의 로드를 개선할 수 있습니다. 또한 <iframe> 요소는 기본적으로 최상위 문서 내에 로드되는 전체 HTML 문서이므로 상당한 수의 하위 리소스, 특히 JavaScript를 포함할 수 있습니다. 이러한 프레임 내의 작업에 상당한 처리 시간이 필요한 경우 페이지의 INP에 상당한 영향을 미칠 수 있습니다.
서드 파티 삽입은 <iframe> 요소의 일반적인 사용 사례입니다. 예를 들어 삽입된 동영상 플레이어 또는 소셜 미디어 게시물은 일반적으로 <iframe> 요소를 사용하며, 하위 리소스가 많이 필요한 경우가 많으며 이로 인해 최상위 페이지 리소스에 대한 대역폭 경합이 발생할 수도 있습니다. 예를 들어 YouTube 동영상의 삽입을 지연 로드하면 초기 페이지 로드 중에 500KiB 이상을 절약할 수 있는 반면 Facebook 좋아요 버튼 플러그인의 지연 로드는 200KiB 이상(대부분 자바스크립트)을 절약합니다.
어느 쪽이든 페이지에서 스크롤해야 볼 수 있는 부분에 <iframe>가 있을 때마다 전면에 로드하는 것이 중요하지 않다면 지연 로드를 사용하는 것이 좋습니다. 지연 로드를 사용하면 사용자 환경을 크게 개선할 수 있기 때문입니다.
<iframe> 요소의 loading 속성
<iframe> 요소의 loading 속성도 모든 주요 브라우저에서 지원됩니다. loading 속성 값과 동작은 loading 속성을 사용하는 <img> 요소와 동일합니다.
"eager"가 기본값입니다.<iframe>요소의 HTML과 하위 리소스를 즉시 로드하도록 브라우저에 알립니다."lazy"는 표시 영역으로부터 사전 정의된 거리 내에 있을 때까지<iframe>요소의 HTML 및 하위 리소스 로드를 지연시킵니다.
iframe 지연 로드 데모
건물 외관
페이지 로드 중에 삽입을 즉시 로드하는 대신 사용자 상호작용에 응답하여 요청 시 로드할 수 있습니다. 사용자가 상호작용할 때까지 이미지 또는 다른 적절한 HTML 요소를 표시하면 됩니다. 사용자가 요소와 상호작용하면 이를 서드 파티 삽입으로 대체할 수 있습니다. 이 기법을 퍼사드라고 합니다.
퍼사드의 일반적인 사용 사례는 서드 파티 서비스의 동영상 삽입입니다. 이 경우 삽입에는 동영상 콘텐츠 자체 외에도 자바스크립트와 같은 잠재적으로 비용이 많이 드는 추가 하위 리소스를 많이 로드해야 할 수 있습니다. 이 경우 동영상을 자동 재생해야 할 정당한 필요가 없는 한, 동영상 삽입을 사용하려면 사용자가 재생 버튼을 클릭하여 재생하기 전에 동영상과 상호작용해야 합니다.
동영상 삽입과 시각적으로 유사한 정적 이미지를 표시하고 그 과정에서 상당한 대역폭을 절약할 수 있는 좋은 기회입니다. 사용자가 이미지를 클릭하면 실제 <iframe> 삽입으로 대체되어 서드 파티 <iframe> 요소의 HTML 및 하위 리소스가 다운로드를 시작합니다.
초기 페이지 로드를 개선하는 것 외에도 사용자가 동영상을 재생하지 않으면 동영상을 제공하는 데 필요한 리소스가 다운로드되지 않는다는 이점이 있습니다. 이는 사용자가 사용자의 요구사항에 대한 잘못된 가정을 하지 않고 실제로 원하는 항목만 다운로드하게 하므로 좋은 패턴입니다.
채팅 위젯은 퍼사드 기법의 또 다른 훌륭한 사용 사례입니다. 대부분의 채팅 위젯은 페이지 로드 및 사용자 입력 응답성에 부정적인 영향을 미칠 수 있는 자바스크립트를 상당량 다운로드합니다. 미리 로드하는 것과 마찬가지로 로드 시간에 비용이 발생하지만 채팅 위젯의 경우 모든 사용자가 이와 상호작용할 의도가 없습니다.
반면 퍼사드를 사용하면 서드 파티 '채팅 시작' 버튼을 가짜 버튼으로 대체할 수 있습니다. 사용자가 의미 있는 상호작용(예: 적절한 시간 동안 또는 클릭)과 의미 있게 상호작용하면 사용자가 필요로 할 때 실제 채팅 위젯이 제자리에 배치됩니다.
자체 퍼사드를 빌드할 수도 있지만 YouTube 동영상의 경우 lite-youtube-embed, Vimeo 동영상의 경우 lite-vimeo-embed, 채팅 위젯용 React 실시간 채팅 로더와 같이 더 인기 있는 서드 파티에 사용할 수 있는 오픈소스 옵션이 있습니다.
JavaScript 지연 로드 라이브러리
<video> 요소나 <video> 요소 poster 이미지, CSS background-image 속성에 의해 로드된 이미지, 기타 지원되지 않는 요소를 지연 로드해야 하는 경우 latencysizes 또는 yall.js와 같은 자바스크립트 기반 지연 로드 솔루션을 사용하면 됩니다. 이러한 유형의 리소스는 브라우저 수준의 기능이 아니기 때문입니다.
특히 오디오 트랙 없이 <video> 요소를 자동재생 및 반복하는 것은 애니메이션 GIF를 사용하는 것보다 훨씬 더 효율적인 대안입니다. 애니메이션 GIF는 동일한 시각적 품질의 동영상 리소스보다 종종 몇 배 더 클 수 있습니다. 그렇더라도 이러한 동영상은 대역폭 측면에서 여전히 중요할 수 있으므로 지연 로드는 대역폭 낭비를 줄이는 데 큰 도움이 되는 추가적인 최적화입니다.
이러한 라이브러리는 대부분 Intersection Observer API와 추가로 Mutation Observer API(초기 로드 후 페이지의 HTML가 변경되면)를 사용하여 요소가 사용자의 표시 영역에 들어올 때를 인식합니다. 이미지가 표시되거나 표시 영역에 가까워지면 JavaScript 라이브러리는 비표준 속성(종종 data-src 또는 유사한 속성)을 올바른 속성(예: src)으로 바꿉니다.
애니메이션 GIF를 대체하는 동영상이 있지만 JavaScript 솔루션을 사용하여 지연 로드하려고 한다고 가정해 보겠습니다. 다음 마크업 패턴을 사용하는 yall.js를 사용하면 가능합니다.
<!-- The autoplay, loop, muted, and playsinline attributes are to
ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
<source data-src="video.webm" type="video/webm">
<source data-src="video.mp4" type="video/mp4">
</video>
기본적으로 yall.js는 "lazy" 클래스가 있는 모든 적격 HTML 요소를 관찰합니다. yall.js가 페이지에서 로드되고 실행되면 사용자가 표시 영역으로 스크롤할 때까지 동영상이 로드되지 않습니다. 이 시점에서 <video> 요소의 하위 <source> 요소에 있는 data-src 속성은 src 속성으로 교체됩니다. 이 속성은 동영상 다운로드 요청을 전송하고 자동으로 재생을 시작합니다.
학습한 내용 테스트
<img> 및 <iframe> 요소 모두의 loading 속성 기본값은 무엇인가요?
"eager""lazy"JavaScript 기반 지연 로드 솔루션은 언제 사용하기에 적합한가요?
<video> 요소의 포스터 이미지를 지연 로드하는 경우와 같이 loading 속성이 지원되지 않는 리소스
퍼사드는 어떤 경우에 유용한 기법인가요?
다음 작업: 미리 가져오기 및 사전 렌더링
이제 지연 로드 이미지와 <iframe> 요소를 처리할 수 있게 되었으므로 사용자의 요구사항을 고려하면서 페이지를 더 빠르게 로드할 수 있습니다. 하지만 리소스의 추측 로드가 바람직한 경우도 있습니다. 다음 모듈에서는 미리 가져오기와 사전 렌더링에 관해 알아보고, 이러한 기법을 신중하게 사용할 때 미리 로드하여 후속 페이지로의 탐색 속도를 크게 높이는 방법을 알아봅니다.