이미지 및 <iframe> 요소 지연 로드

이미지와 <iframe> 요소는 다른 유형의 항목보다 더 많은 대역폭을 소비하는 경우가 많습니다. 리소스를 배포합니다 <iframe> 요소의 경우 상당한 양의 추가 처리 시간이 그 안에 있는 페이지를 로드하고 렌더링하는 데 관련될 수 있습니다.

이미지 지연 로드의 경우 로드 속도가 느리면 대역폭 경합을 줄이는 데 도움이 될 수 있으므로 초기 표시 영역 내에 더 중요한 리소스를 요청할 수 있습니다 이를 통해 네트워크 연결이 끊기면 페이지의 최대 콘텐츠 페인트 (LCP)가 표시될 수 있습니다. 재할당된 대역폭은 LCP 후보를 로드하고 더 빠르게 페인트칠 수 있습니다.

<iframe> 요소와 관련된 경우 페이지의 다음 페인트와의 상호작용 (INP)를 지연 로드하여 시작 중에 개선할 수 있습니다. 이는 <iframe>는 자체 하위 리소스가 있는 완전히 분리된 HTML 문서입니다. <iframe> 요소는 별도의 프로세스에서 실행할 수 있지만 드문 일은 아닙니다. 다른 스레드와 프로세스를 공유하여 조건을 생성할 수 있습니다. 페이지가 사용자 입력에 덜 반응하게 됩니다.

따라서 화면 밖 이미지 및 <iframe> 요소의 로드를 지연하는 것은 추구할 가치가 있고, 비교적 적은 노력으로 비교적 합리적인 비용을 얻을 수 있습니다. 이 모듈에서는 이러한 지연 로드를 설명합니다. 페이지가 로드되는 동안 더 빠르고 나은 사용자 환경을 위해 중요한 시작 기간입니다.

loading 속성으로 이미지 지연 로드

loading 속성을 <img> 요소에 추가하여 브라우저에 다음과 같이 로드되어야 합니다.

• "eager"는 이미지가 즉시 로드되어야 한다고 브라우저에 알립니다. 이는 초기 표시 영역 밖에 있는 경우에도 마찬가지입니다. 이 값은 loading 속성
• "lazy"는 이미지가 이미지 표시됩니다. 이 거리는 브라우저에 따라 다르지만 보통 사용자가 스크롤할 때 이미지가 로드될 만큼 충분히 커야 합니다.

<picture> 요소를 사용하는 경우 loading 속성은 하위 <img> 요소에 여전히 적용되어야 하며(아님) <picture> 요소 자체. 이는 <picture> 요소가 다른 행을 가리키는 추가 <source> 요소가 포함된 컨테이너 이미지 조합으로, 브라우저에서 선택한 후보가 직접 적용됩니다. 하위 <img> 요소에 추가합니다.

초기 표시 영역에 있는 이미지를 지연 로드하지 마세요.

loading="lazy" 속성은 다음과 같은 <img> 요소에만 추가해야 합니다. 초기 표시 영역 외부에 배치됩니다. 하지만 어떤 특성을 갖고 있는지 페이지가 표시되기 전, 표시 영역 내에서 상대적인 요소의 정확한 위치를 있습니다. 다른 표시 영역 크기, 가로세로 비율, 기기가 고려하시기 바랍니다.

예를 들어 데스크톱 표시 영역은 가로 세로 공간이 더 넓어 이미지 크기에 맞게 조절할 수 있습니다. 광고의 초기 표시 영역에 표시되지 않는 더 작은 기기입니다. 세로 방향으로 사용된 태블릿도 표시됩니다. 상당한 양의 세로 공간이 있으며 이는 일부 데스크톱 버전보다 훨씬 더 클 수 있습니다. 기기에서 사용할 수 있습니다.

하지만 어떤 경우에는 loading="lazy" 적용 중. 예를 들어 히어로 이미지의 경우 <img> 요소의 loading="lazy" 속성 또는 <img> 요소가 어느 기기에서나 레이아웃 상단 근처에 표시되도록 할 수 있습니다. 이보다 훨씬 더 중요한 것은 (LCP 후보일 가능성이 높은 이미지).

지연 로드된 이미지는 브라우저가 다음 위치에서 레이아웃을 완료할 때까지 기다려야 합니다. 이미지의 최종 위치가 표시 영역 내에 있는지 알 수 있기 때문입니다. 다시 말해 표시되는 표시 영역의 <img> 요소에 loading="lazy"가 있는 경우 모든 CSS가 다운로드, 파싱 및 분석된 후에에만 요청됩니다. 페이지에 적용되는 것과는 달리 사용자가 검색되는 즉시 가져오는 것이 사전 로드 스캐너에 있어야 합니다.

<img> 요소의 loading 속성은 모든 주요 이미지를 지연 로드하기 위해 JavaScript를 사용할 필요가 없습니다. 페이지에 추가 JavaScript를 추가하여 브라우저에서 이미 제공하는 기능을 제공하세요. INP와 같은 페이지 성능의 다른 측면에 영향을 미칩니다.

이미지 지연 로드 데모

<iframe> 요소 지연 로드

표시 영역에 표시될 때까지 <iframe> 요소를 지연 로드하면 필요한 중요한 리소스의 로딩을 개선하여 최상위 수준 페이지가 로드되어야 합니다. 또한 <iframe> 요소가 최상위 문서 내에 로드된 전체 HTML 문서를 많은 하위 리소스, 특히 JavaScript가 포함되어 있습니다. 페이지의 INP에 상당한 영향을 줄 수 있습니다. 처리하는 데 시간이 오래 걸릴 수 있습니다.

서드 파티 삽입은 <iframe> 요소의 일반적인 사용 사례입니다. 예를 들어 삽입된 동영상 플레이어 또는 소셜 미디어 게시물에서는 일반적으로 <iframe> 요소를 사용합니다. 상당한 수의 하위 리소스가 필요한 경우가 많으며, 최상위 페이지의 리소스에 대한 대역폭 경합이 발생합니다. 예를 들어 YouTube 동영상의 퍼간 동영상을 지연 로드하면 동영상 재생 중에 500KiB 이상을 Facebook의 좋아요 버튼 플러그인을 지연 로드하는 동안 초기 페이지 로드 는 200KiB 이상을 저장합니다. 대부분 JavaScript입니다.

어떤 경우든 페이지에서 스크롤해야 볼 수 있는 부분에 <iframe>가 있을 때마다 미리 로드하는 것이 중요하지 않다면 지연 로드를 사용하는 것이 좋습니다. 사용자 환경을 크게 개선할 수 있습니다.

<iframe> 요소의 loading 속성

<iframe> 요소의 loading 속성도 모든 주요 버전에서 지원됩니다. 있습니다. loading 속성 값과 그 동작은 다음과 같습니다. loading 속성을 사용하는 <img> 요소와 동일합니다.

• "eager"가 기본값입니다. <iframe>를 로드하도록 브라우저에 알립니다. 하위 리소스를 즉시 삭제할 수 있습니다.
• "lazy"는 <iframe> 요소의 HTML 및 하위 리소스 로드를 지연합니다. 표시 영역으로부터 사전 정의된 거리 내에 들어가야 합니다.

iframe 지연 로드 데모

건물 외관

삽입 콘텐츠를 페이지 로드 중에 즉시 로드하는 대신 광고 수요에 대한 피드백을 제공합니다 이미지를 표시하고 또는 다른 적절한 HTML 요소를 사용해야 합니다. 일단 사용자가 요소와 상호작용하는 경우 서드 파티 삽입으로 대체할 수 있습니다. 이 기법을 파사드라고 합니다.

퍼사드의 일반적인 사용 사례는 다음과 같은 서드 파티 서비스의 동영상 삽입입니다. 삽입에는 많은 추가 리소스 및 하위 리소스(예: JavaScript)를 포함하는 것이 좋습니다. 이러한 동영상을 자동재생해야 할 타당한 요구가 없는 경우 사용자가 재생을 클릭하여 재생하기 전에 동영상과 상호작용해야 합니다. 버튼을 클릭합니다.

이것은 동영상을 삽입하는 과정에서 상당한 대역폭을 절약할 수 있습니다. 사용자가 이미지를 클릭하면 실제 <iframe> 삽입으로 대체됩니다. 서드 파티 <iframe> 요소의 HTML 및 하위 리소스가 시작되도록 트리거합니다. 있습니다.

초기 페이지 로드를 개선하는 것 외에 또 다른 주요 이점은 동영상을 재생하지 않으면 동영상을 제공하는 데 필요한 리소스가 다운로드되었습니다. 이는 사용자가 원하는 것만 다운로드하도록 하기 때문에 좋은 패턴입니다. 고객이 실제로 원하는 것이지만, 사이트에 대해 잘못된 가정을 하지 않고 도움이 될 수 있습니다

채팅 위젯은 퍼사드 기법의 또 다른 훌륭한 사용 사례입니다. 대부분 채팅 위젯은 부정적인 영향을 줄 수 있는 많은 양의 자바스크립트를 다운로드합니다. 사용자 입력에 대한 응답성 및 페이지 로드에 영향을 미칠 수 있습니다. Google Kubernetes Engine으로 비용은 로드 시점에 발생하지만 채팅 위젯의 경우에는 비용이 발생하지 않습니다. 모든 사용자는 상호작용할 의도가 없다는 것입니다.

반면 퍼사드를 사용하면 타사의 'Start'를 Chat" 모조 버튼이 있는 버튼입니다. 사용자가 콘텐츠와 의미 있게 예컨대 적절한 시간 동안 그 위에 포인터를 대거나 채팅 위젯은 채팅 창 상단의 클릭 한 번으로 필요합니다.

파사드를 직접 만들 수도 있지만 더 인기 있는 서드 파티에 제공되는 옵션(예: lite-youtube-embed) YouTube 동영상, lite-vimeo-embed Vimeo 동영상, React Live Chat 채팅 위젯용 로더

JavaScript 지연 로드 라이브러리

<video> 요소, <video> 요소 poster 이미지를 지연 로드해야 하는 경우 CSS background-image 속성에 의해 로드된 이미지 또는 지원되지 않는 기타 이미지 요소를 로드하려면 다음과 같이 JavaScript 기반의 지연 로드 솔루션을 사용하세요. 지연 크기 또는 yall.js를 사용하는 것이 좋습니다. 이러한 유형의 리소스를 지연 로드하는 것은 브라우저 수준 기능입니다.

특히 오디오 트랙 없이 <video> 요소를 자동재생하고 연속 재생합니다. 애니메이션 GIF보다 훨씬 효율적인 대안이 될 수 있습니다. 대체로 동영상 리소스보다 몇 배 더 큽니다. 있습니다. 그럼에도 불구하고 이러한 동영상은 여전히 대역폭, 지연 로드를 사용하면 로드 시간을 크게 단축할 수 있는 대역폭을 줄일 수 있습니다.

이러한 라이브러리는 대부분 Intersection Observer API를 사용하여 작동하며 URL 변경 후 페이지의 HTML이 변경되면 Mutation Observer API도 초기 로드: 요소가 사용자의 표시 영역에 진입하는 시점을 인식합니다. 만약 이미지가 표시되거나 표시 영역에 가까워지면 JavaScript 라이브러리가 비표준 속성(주로 data-src 또는 유사한 속성)을 대체합니다. 올바른 속성(예: src)으로 대체합니다.

애니메이션 GIF를 대체하는 동영상이 있지만 지연 로드를 원한다고 가정해 보겠습니다. 자바스크립트 솔루션을 사용하는 것이 좋습니다 다음을 사용하여 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" 페이지에서 yall.js가 로드되고 실행되면 동영상이 로드되어야 합니다. 이때 data-src가 <video> 요소의 하위 <source> 요소에 있는 속성이 교체됩니다. src 속성으로 전송되어 동영상 다운로드 요청을 전송하고 자동으로 재생이 시작됩니다.

학습한 내용 테스트

다음: 미리 가져오기 및 사전 렌더링

이제 지연 로드 이미지 및 <iframe> 요소를 처리할 수 있습니다. 페이지가 로드되는 중에 더 빠르게 로드되고 사용자의 필요를 존중해야 합니다 그러나 예측적 로딩이 바람직할 수 있습니다 다음 모듈에서는 미리 가져오기와 사전 렌더링에 대해 알아보고 이러한 기술을 사용할 때 을 사용하면 진행해야 합니다