최적의 성능을 위해 이미지를 로드하는 데 지연되는 최상의 방법

이미지 지연 로드는 비교적 유행하는 웹 사이트를 최적화하는 방법으로 상대적으로 실현하기 쉽고 비교적 큰 성능 이득을 얻었기 때문이다.로드 지연을 통해 이미지를 비동기적으로 로드합니다. 즉, 브라우저의 뷰포트에 이미지가 표시될 때만 이미지를 로드합니다.
약 1년 전, 크롬과 다른 주류 브라우저들이 이미지와 iFrame에 대한 로컬 지연 로드를 발표했다.이 기능의 요점은 브라우저가 언제 이미지나 iframe 자원을 요청할지 제어하여 개발 작업을 더욱 쉽게 하는 것이다.그때까지 유일한 선택은 각종 자바스크립트 플러그인을 사용하여 뷰포트의 변화를 감시하고 자원을 동적으로 불러오는 것이다.이제 브라우저가 로컬에서 이 점을 실현할 수 있습니다.
본문을 작성할 때 약 73% of currently used browsers에서 이 기능을 지원했는데, 이것은 괜찮았지만, 우리는 27%의 잠재적 사용자가 사이트의 이미지 내용을 방문하고 사용할 수 없게 하고 싶지 않다.
이것은 우리로 하여금 흥미로운 상황에 처하게 한다.

네이티브 로드 지연을 지원하는 브라우저에서 네이티브 로드 지연의 이점

지연 로드를 위한 백업 방안으로 JS 플러그인을 사용하고 싶습니다. 지원하지 않는 브라우저

에 사용합니다.

브라우저가 네이티브 로드 지연을 지원할 경우 JS 플러그인을 로드 지연을 원하지 않습니다.

은 img과 source을 모두 지원합니다. 요소는

입니다.

로드 속성

우리는 loading 속성에 사용할 수 있는 세 가지 가능한 값이 있다.

auto - 기본값.속성을 설정하지 않은 것과 같습니다.

eager - 지금 리소스를 로드합니다.

lazy - 리소스가 뷰포트에 들어오면 로드됩니다.

비록 이것은 용례에 달려 있지만, 일반적으로 우리는 접은 위의 자원에 대해 eager값을 사용하고, 접은 아래의 자원에 대해 lazy값을 사용하기를 희망한다.

현대적 방법

HTML 문서를 로드한 후 실행하려면 스크립트를 작성해야 합니다.Jekyll을 사용하고 HTML body 요소 끝에 추가된include로 스크립트를 추가했습니다.이것은 JavaScript 함수를 실행하여 렌더링의 장애를 방지하는 가장 효과적인 방법입니다.

이미지 태그

JavaScript 함수는 네이티브 로드 지연 특성을 기반으로 이미지 로드 프로세스를 시작할 수 있도록 지원합니다.이를 실현하기 위해 우리는 data-src이 아니라 src에 그림 경로를 추가할 것이다.그러나 src을 비워서는 안 됩니다. 따라서 1x1px 투명 이미지 자리 표시자를 사용합니다.img개의 요소에 대한 우리의 표기는 다음과 같다

 <img 
    src="/path/to/placeholder/image.png"
    data-src="/path/to/full/image.jpg"
    alt="Image description"
    class="lazyload"
    loading="lazy"
/>

lazyload 예비(fallback) 플러그인은 class="lazyload"을 사용합니다.나는 lazysizes을 사용했는데, 이것은 이 특정한 클래스를 사용했다.
또한 여러 picture 요소와 source 요소를 포함하는 img 요소를 지원하고자 합니다.

<picture>
    <source data-srcset="path/to/image.webp" type="image/webp" />
    <source data-srcset="path/to/image.jpg" />
    <img loading="lazy" 
        class="lazyload"
        src="path/to/placeholder/image.png"
        data-src="path/to/image.jpg"
        alt="Image description"
    />
</picture>

피쳐 체크

사용자의 브라우저가 로컬 로드 지연을 지원하는지 확인해야 합니다.다행히도 JavaScript를 사용하여 이러한 작업을 수행할 수 있습니다.

   if ("loading" in HTMLImageElement.prototype) {
      /* Native lazy loading is supported */
   } else {
      /*  Native lazy loading is not supported */
   }

최종 자바스크립트 코드

본 기기의 마운트 지연에 대해 우리는 data-src과 src 요소의 img 값을 source 값에 분배하고 브라우저로 하여금 나머지 요소를 처리하게 하기만 하면 된다.
지원되지 않는 브라우저의 경우 JavaScript 플러그인을 로드하고 선택적으로 실행하기만 하면 됩니다.나는 이미 lazysizes을 사용했지만, 어떤 플러그인이든 사용할 수 있다. (클래스 이름, 데이터 요소 등)
마지막 JavaScript 코드는 다음과 같습니다.

<script>
    if ("loading" in HTMLImageElement.prototype) {
        var images = document.querySelectorAll('img[loading="lazy"]');
        var sources = document.querySelectorAll("source[data-srcset]");
        sources.forEach(function (source) {
            source.srcset = source.dataset.srcset;
        });
        images.forEach(function (img) {
            img.src = img.dataset.src;
        });
    } else {
        var script = document.createElement("script");
        script.src = "/link/to/lazyload.js";
        document.body.appendChild(script);
    }
</script>

성능 및 등대 점수 향상

personal website에서 모든 브라우저의 이미지 로드 지연을 위해 JavaScript 플러그인을 사용했습니다.이런 현대적인 방법을 실현한 후에 나는 자바스크립트 파일을 삭제했다. 이 파일은 사이트에서 불러올 때 불러오고 해석된다. 이것은 반대로 나의 Lighthouse 점수와 전체 성능을 향상시켰다.

더 많은 이미지 최적화 기술로 최상의 성능 실현

로드 지연은 웹에서 이미지 성능을 최적화하는 많은 방법 중 하나입니다.나는 이 깊이 있는 글을 썼는데 다른 중요한 기술과 인터넷 이미지 최적화 방면을 포함한다. 예를 들어 네트워크에 특정된 이미지 형식, CDN, 점진적인 이미지 사용 등이다.

네트워크 이미지 최적화 - 심도 가이드

아드리안 베스・ 10월 1일부터 19일까지・ 8분 읽기

#webdev #beginners #productivity #html

CSS 및 JavaScript의 렌더링 차단을 제거하여 웹 사이트 성능 향상

아드리안 베스・ 8월 31일・ 5분 읽기

#javascript #webdev #css #tutorial

이 물품들은 커피가 연료를 제공한다.그래서 만약 당신이 나의 일을 좋아하고 그것이 매우 유용하다고 생각한다면, 나에게 커피 한 잔을 사주는 것을 고려해 보세요.고맙겠습니다.

시간을 내서 본문을 읽어 주셔서 감사합니다.만약 네가 이것이 유용하다고 생각한다면 그것을 하나 주어라❤️ 혹은🦄, 공유와 평론.