이 페이지는 Cloud Translation API를 통해 번역되었습니다.

지연 로드 권장사항

Jeremy Wagner

Rachel Andrew

지연 로드 이미지 및 동영상은 긍정적이고 측정 가능한 실적을 보입니다. 가볍게 여겨서는 안 됩니다. 잘못하면 의도하지 않은 결과가 발생할 수도 있습니다 따라서 다음과 같은 형식을 유지하는 것이 중요합니다. 염두에 두어야 합니다

스크롤 없이 볼 수 있는 부분 주의하기

페이지의 모든 미디어 리소스를 JavaScript이지만 이 유혹을 견딜 수 있어야 합니다. 다음 광고 항목 위에 있는 모든 항목은 지연 로드되면 안 됩니다. 이러한 리소스는 따라서 정상적으로 로드되어야 합니다.

지연 로드는 DOM이 상호작용할 때까지 리소스 로드를 지연시킵니다. 스크립트 로드가 완료되고 실행이 시작될 때 아래 이미지의 경우 이는 문제가 없지만 스크롤 없이 볼 수 있는 부분에 중요한 리소스는 표준 <img> 요소를 사용하여 가능한 한 빨리 표시됩니다.

물론 요즘은 웹사이트가 많은 것을 감안해야 하기 때문에 그 부분이 어디인지는 분명하지 않습니다. 다양한 크기의 화면에서 볼 수 있습니다. 노트북에서 스크롤 없이 볼 수 있는 부분에 놓인 항목 휴대기기에서는 아래로 표시될 수 있습니다. 완벽한 조언은 없습니다. 모든 상황에서 이를 최적으로 해결하는 것입니다 그러기 위해서는 페이지의 주요 자산에 대한 인벤토리를 생성하고 이러한 이미지를 있습니다.

또한 접는 선에 대해 너무 엄격하지 않도록 해야 합니다. 임곗값을 설정해야 합니다. 특정 용도에 더 이상적일 수도 있고 이미지가 시작되도록 스크롤해야 볼 수 있는 부분 아래에서 약간 떨어진 곳에 버퍼 영역을 설정합니다. 로드되기 한참 전에 로드되어야 합니다. 예를 들어 Intersection Observer API를 사용하면 rootMargin 속성을 options 객체를 생성할 때 IntersectionObserver 인스턴스를 생성합니다. 이 로드가 완료되기 전에 지연 로드 동작을 트리거하는 버퍼를 요소에 요소가 표시 영역에 있는 경우:

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

rootMargin 값이 CSS에 지정하는 값과 비슷해 보이는 경우 margin 속성이기 때문입니다. 이 경우 관찰된 요소의 하단 여백 (기본적으로 브라우저 표시 영역이지만 root 속성을 사용하여 특정 요소로 변경할 수 있음)는 256만큼 확대됩니다. 픽셀 즉, 이미지 요소가 호출될 때 콜백 함수가 이미지가 표시 영역으로부터 256픽셀 이내에 로드되기 광고가 게재될 수 있습니다.

Intersection Observe을 지원하지 않는 브라우저에서 동일한 효과를 얻으려면 스크롤 이벤트 처리 코드를 사용하고 버퍼를 포함하려면 getBoundingClientRect를 확인합니다.

레이아웃 이동 및 자리표시자

자리표시자를 사용하지 않으면 미디어 지연 로드로 인해 레이아웃이 이동될 수 있습니다. 이러한 변경사항은 사용자를 혼란스럽게 할 수 있으며 비용이 많이 드는 DOM 레이아웃을 트리거할 수 있습니다. 버벅거림을 유발하는 작업이 포함됩니다. 최소한 광고와 크기가 같은 단색 자리 표시자를 사용해 보세요. 타겟팅 이미지 또는 LQIP 또는 미디어 콘텐츠를 암시하는 SQIP 항목을 로드해야 합니다.

<img> 태그의 경우 src는 그때까지 처음에 자리표시자를 가리켜야 합니다. 속성이 최종 이미지 URL로 업데이트됩니다. poster 속성을 <video> 요소를 사용하여 자리표시자 이미지를 가리킵니다. 또한 width 및 <img> 및 <video> 태그 모두에 height 속성 이렇게 하면 자리표시자에서 최종 이미지로 전환해도 렌더링된 크기는 요소가 로드되도록 합니다.

이미지 디코딩 지연

자바스크립트에서 큰 이미지를 로드하여 DOM에 드롭하면 이로 인해 사용자 인터페이스가 짧은 시간 동안 응답하지 않을 수 있습니다. 시간이 걸릴 수 있습니다. decode를 사용하여 이미지를 비동기식으로 디코딩 메서드 이러한 종류의 버벅거림을 줄일 수 있지만 주의: 아직 모든 곳에서 사용할 수 없으며 지연 로드 로직이 더 복잡해집니다. 사용하려면 카드를 확인해야 합니다. 아래 프로그램 Image.decode()를 대체와 함께 사용하는 방법:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

CodePen 링크에서 이 예시와 유사한 코드를 실제로 실행합니다. 대부분의 이미지가 상당히 작다면 별다른 도움이 되지 않을 수 있지만 큰 이미지를 지연 로드하고 DOM에 삽입할 수 있습니다.

콘텐츠가 로드되지 않을 때

미디어 리소스가 여러 가지 이유로 로드되지 않고 오류가 발생하는 경우가 있습니다. 발생할 수 있습니다 언제 이런 일이 발생할 수 있나요? 경우에 따라 다르지만 다음과 같은 가상의 시나리오가 있습니다. 짧은 기간 동안 HTML 캐싱 정책이 적용됩니다 (예: 사용자가 사이트를 방문하거나 사용자가 비활성 탭을 열어둔 경우 다시 방문하여 콘텐츠를 읽을 수 있습니다. 이 프로세스의 특정 시점에서 재배포가 발생합니다. 이 배포가 진행되는 동안 해시 기반 버전 관리로 인해 이미지 리소스의 이름이 변경되거나 삭제됨 완전히 달라졌습니다. 사용자가 이미지를 지연 로드할 때까지 리소스는 사용할 수 없으므로 실패합니다

비교적 드물게 발생하지만 백업이 필요할 수 있습니다. 계획을 세울 수 있습니다 이미지의 경우 이러한 솔루션은 다음과 같습니다.

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

오류 발생 시 취할 조치는 애플리케이션에 따라 다릅니다. 대상 예를 들어 이미지 자리표시자 영역을 사용자가 이미지를 다시 로드하려고 시도하거나 오류 메시지를 표시하도록 합니다. 를 입력합니다.

다른 시나리오도 발생할 수 있습니다. 무엇을 하든지 간에 오류 발생 시 사용자에게 신호를 보내고 필요한 경우 조치를 취하도록 할 수 있습니다 조치를 취할 수 있도록 하는 것입니다.

JavaScript 사용 가능 여부

JavaScript를 항상 사용할 수 있다고 가정해서는 안 됩니다. 이미지를 지연 로드하려면 이미지를 표시할 <noscript> 마크업을 제공하는 것이 좋습니다. JavaScript를 사용할 수 없습니다 가장 간단한 대체 예시에는 JavaScript가 사용 중지된 경우 <noscript> 요소를 사용하여 이미지를 제공합니다.

자바스크립트가 사용 중지된 경우 사용자에게 자리표시자 이미지와 <noscript> 요소와 함께 포함된 이미지입니다. 이 문제를 해결하려면 다음을 하세요. <html> 태그의 no-js 클래스

<html class="no-js">

그런 다음 <head>에 인라인 스크립트 한 줄을 스타일 시트 앞에 배치합니다. <html>에서 no-js 클래스를 삭제하는 <link> 태그를 통해 요청됩니다. 요소에 다음 값을 적용합니다.

<script>document.documentElement.classList.remove("no-js");</script>

마지막으로, 지연 시간이 발생할 때 CSS를 사용하여 지연 클래스로 요소를 숨깁니다. JavaScript를 사용할 수 없습니다.

.no-js .lazy {
  display: none;
}

이렇게 해도 자리표시자 이미지가 로드되지 않는 것은 아니지만 있습니다. JavaScript를 사용 중지한 사용자는 자리표시자 이상의 내용을 보게 됩니다. 이는 자리표시자보다 낫고 의미 있는 이미지 콘텐츠가 없는 있습니다.