iframe에 대한 브라우저 수준의 기본 지연 로딩이 여기에 있습니다.
https://web.dev/iframe-lazy-loading
loading 속성을 통해 Chrome 76에 도착한 이미지에 대한 기본 지연 로딩은 나중에 Firefox에 도입되었습니다. iframe에 대한 기본 지연 로딩이 이제 표준화 되었으며 Chrome 및 Chromium 기반 브라우저에서도 지원된다는 사실을 공유하게 되어 기쁩니다.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>iframe의 기본 지연로드는 사용자가 근처로 스크롤 할 때까지 오프 스크린 iframe이 로드 되는 것을 지연시킵니다. 이렇게 하면 데이터가 절약되고 페이지의 다른 부분의 로드 속도가 빨라지며 메모리 사용량이 줄어 듭니다.
이 <iframe loading = lazy> 데모는 지연 로딩 동영상 삽입을 보여줍니다.
https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm
왜 iframe을 지연로드 해야 합니까?
제 3 자 삽입은 비디오 플레이어에서 소셜 미디어 게시물, 광고에 이르기까지 다양한 사용 사례를 다룹니다. 종종 이 콘텐츠는 사용자의 뷰포트에 즉시 표시되지 않습니다. 오히려 페이지를 더 아래로 스크롤 해야 볼 수 있습니다. 그럼에도 불구하고 사용자는 스크롤 하지 않더라도 각 프레임에 대해 데이터 및 비용이 많이 드는 JavaScript 다운로드 비용을 지불합니다.
데이터 세이버 사용자를 위한 자동 지연 로딩 오프 스크린 iframe에 대한 Chrome의 연구에 따르면 지연 로딩 iframe은 데이터 중앙값 2-3 % 절감, 중앙값에서 첫 번째 콘텐츠 페인트 1-2 % 감소, 첫 번째 입력 지연 2 %로 이어질 수 있습니다. FID) 95 번째 백분위 수 개선.
iframe의 기본 지연로드는 어떻게 작동하나요?
loading 속성을 사용하면 브라우저가 사용자가 근처로 스크롤 할 때까지 오프 스크린 iframe 및 이미지 로드를 연기 할 수 있습니다. 로드는 세 가지 값을 지원합니다.
auto는 현재 비표준 값이지만 현재 Chrome에서는 기본값입니다. Chrome은 이 값에 대한 제안을 표준 표로 가져올 계획입니다.
iframe에서 loading 속성을 사용하면 다음과 같이 작동합니다.
<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
width="600"
height="400"></iframe>
<!-- or use loading="eager" to opt out of automatic
lazy-loading in Lite Mode -->
<iframe src="https://example.com"
loading="eager"
width="600"
height="400"></iframe>속성을 전혀 지정하지 않으면 Chrome이 자동 값을 사용하여 지연로드 여부를 결정하는 라이트 모드 사용자를 제외하고는 명시적으로 리소스를 열심히 로드 하는 것과 동일한 영향을 미칩니다.
자바 스크립트를 통해 iframe을 동적으로 생성해야 하는 경우 요소에서 iframe.loading = 'lazy'설정도 지원됩니다.
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);iframe 관련 지연 로딩 동작
loading 속성은 iframe이 숨겨져 있는지 여부에 따라 이미지와 다르게 iframe에 영향을 줍니다. (숨겨진 iframe은 종종 분석 또는 커뮤니케이션 목적으로 사용됩니다.) Chrome은 다음 기준을 사용하여 iframe이 숨겨져 있는지 여부를 결정합니다.
iframe이 이러한 조건을 충족하는 경우 Chrome은 숨겨진 것으로 간주하고 대부분의 경우 지연로드 하지 않습니다. 숨겨지지 않은 iframe은 로드 인 거리 임계 값 내에 있을 때만 로드됩니다. Chrome은 여전히 가져 오는 지연로드 iframe에 대한 자리 표시자를 표시합니다.
지연로드 인기 있는 iframe 삽입으로 인해 어떤 영향을 받을 수 있습니까?
지연 로딩 오프 스크린 iframe이 기본값이 되도록 웹을 크게 변경할 수 있다면 어떨까요? 다음과 같이 보일 것입니다.
지연로드 YouTube 동영상 삽입 (초기 페이지 로드시 최대 500KB 절약) :
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>일화 : Chrome.com 용 YouTube 삽입 지연로드로 전환했을 때 페이지가 휴대 기기에서 상호 작용할 수 있는 시간을 10 초 단축했습니다. 소스 코드에 loading = lazy 추가에 대해 논의하기 위해 YouTube에서 내부 버그를 열었습니다.
YouTube 삽입을로드하는보다 효율적인 방법을 찾고 있다면 YouTube 라이트 구성 요소에 관심이 있을 수 있습니다.
지연 로딩 Instagram 임베드 (초기 로드시 gzip으로 압축 된> 100KB 저장) :
Instagram 삽입은 페이지에 iframe을 삽입하는 마크 업 블록과 스크립트를 제공합니다. 이 iframe을 지연로드 하면 삽입에 필요한 모든 스크립트를 로드 할 필요가 없습니다. 이러한 삽입은 대부분의 기사에서 뷰포트 아래에 표시되는 경우가 많으므로 iframe의 기본 지연로드에 적합한 후보로 보입니다.
지연 로딩 Spotify 삽입 (초기로드시 514KB 절약) :
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"></iframe>위의 삽입은 미디어 콘텐츠에 대한 지연로드 iframe의 잠재적 인 이점을 보여 주지만 광고에서도 이러한 이점을 볼 수 있는 잠재력이 있습니다.
사례 연구 : 기본적으로 Facebook의 소셜 플러그인 지연로드
Facebook의 소셜 플러그인을 사용하면 개발자가 웹 페이지에 Facebook 콘텐츠를 포함 할 수 있습니다. 삽입 된 게시물, 사진, 동영상, 댓글 등 다양한 플러그인이 제공됩니다. 가장 인기 있는 것은 페이지를 "좋아요"한 사람의 수를 보여주는 버튼 인 좋아요 플러그인입니다. 기본적으로 웹 페이지에 Like 플러그인을 포함하면 (FB JSSDK 사용) ~ 215KB의 리소스를 가져 오며 그 중 197KB는 JavaScript입니다. 대부분의 경우 플러그인은 기사 끝이나 페이지 끝 근처에 나타날 수 있으므로 화면이 아닐 때 열심히 로드하는 것은 차선책 일 수 있습니다.
엔지니어 Stoyan Stefanov 덕분에 이제 모든 Facebook의 소셜 플러그인이 기본 iframe 지연 로딩을 지원합니다. 플러그인의 데이터 지연 구성을 통해 지연 로딩을 선택한 개발자는 이제 사용자가 근처에서 스크롤 할 때까지 로딩을 피할 수 있습니다. 이를 통해 임베드가 필요한 사용자에게는 여전히 완전한 기능을 제공하는 동시에 페이지 아래로 스크롤 하지 않는 사용자에게는 데이터 절약 효과를 제공합니다. 프로덕션에서 네이티브 iframe 지연 로딩을 탐색하는 많은 삽입 중 첫 번째가 되기를 바랍니다.
잠깐, 브라우저가 오프 스크린 iframe을 자동으로 지연로드 할 수 없나요?
그들은 확실히 할 수 있습니다. Chrome 77에서 Chrome은 사용자가 Android 용 Chrome에서 라이트 모드 (데이터 세이버 모드)를 선택한 경우 자동으로 기본적으로 지연로드 되는 오프 스크린 이미지 및 iframe에 대한 지원을 추가했습니다.
라이트 모드는 일반적으로 네트워크 연결 품질 및 데이터 요금제가 가장 크지 않은 지역에서 사용됩니다. 모든 바이트가 중요하므로 지연 로딩 iframe은 이러한 사용자에게 의미 있는 차이를 만들 수 있는 잠재력이 있습니다.
Origins는 NetworkInformation API의 일부인 navigator.connection.saveData 속성을 확인하여 라이트 모드 사용자로부터 유입되는 트래픽 비율을 감지 할 수 있습니다.
iframe을 브라우저 간 지연로드 할 수 있습니까? 예
기본 iframe 지연 로딩은 점진적 향상으로 적용될 수 있습니다. iframe에서 loading = lazy를 지원하는 브라우저는 iframe을 지연로드 하는 반면 loading 속성은 아직 지원하지 않는 브라우저에서 안전하게 무시됩니다.
lazysizes JavaScript 라이브러리를 사용하여 오프 스크린 iframe을 지연로드 할 수도 있습니다. 다음과 같은 경우에 바람직 할 수 있습니다.
<script src="lazysizes.min.js" async></script>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>다음 패턴을 사용하여 지연로드를 감지하고 사용할 수 없는 경우 지연 크기를 가져옵니다.
<iframe frameborder="0"
class="lazyload"
loading="lazy"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script>
if ('loading' in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]');
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>등록된 댓글이 없습니다.
