웹 사이트 성능을 향상시키기위한 게으른로드 이미지를위한 5 가지 기술

최신 웹 응용 프로그램에서 이미지는 가장 일반적으로 사용되는 콘텐츠 유형 중 하나가되었습니다. 배경 이미지를 사용하면 애플리케이션의 시각적 효과가 향상 될 수 있지만 이미지 크기가 너무 커서 애플리케이션 성능에 심각한 영향을 미칩니다.

최적화 후에도 이미지는 여전히 많은 공간을 차지할 수있어 사용자가 너무 오래 기다릴 수 있습니다. 사용자가 컨텐츠에 빠르게 액세스 할 수있는 경험을 얻지 못하면 인내심을 잃고 다른 웹 사이트로 전환하는 경향이 있으므로 효율적인 이미지로드 체계가 중요합니다.

이 기사에서는 웹 사이트를 최적화하고 사용자 경험을 향상시키는 데 도움이되는 5 가지 게으른 이미지 로딩 방법을 소개합니다. 이 방법은 배경 이미지, 인라인 이미지 및 배너 이미지를 포함한 모든 유형의 이미지에 적합합니다.

키 포인트

이미지 게으른로드는 사진을 비동기로로드하여 웹 사이트 성능을 향상시킵니다. 이것은 모바일 장치와 느린 네트워크를 사용하는 사용자에게 특히 중요합니다.

기본 게으른 하중은 오버 헤드가 거의없는 HTML을 사용하는 쉬운 방법이지만 모든 브라우저 가이 기능을 지원하는 것은 아닙니다. 교차로 관찰자 API는 구현하기 쉽고 효과적인 방법이지만 모든 브라우저가 지원하는 것은 아닙니다.

Lozad.js 및 Yall.js와 같은 JavaScript 라이브러리는 이미지, 비디오 및 iframes의 게으른로드를 빠르고 쉽게 구현할 수 있습니다. 교차로 관찰자 API를 사용하지만 브라우저 호환성을 고려해야합니다. 중간 웹 사이트와 유사하지만 게으른로드 고해상도 사진을 찍는 것은 먼저 저해상도 사진이 흐려져 시각적 효과가 좋을 수 있습니다. 이것은 망막 스크린을 지원하는 Craig Buckler가 제안한 고성능 방법과 같은 다양한 방식으로 달성 할 수 있습니다.

게으른 하중이란 무엇입니까?
• 게으른 이미지 로딩은 웹 사이트에 이미지를 비동기로로드하는 것을 의미합니다. 페이지가 완전히로드 된 후 또는 이미지가 브라우저 창에 나타나는 경우에만 콘텐츠를로드 할 수 있습니다. 즉, 사용자가 하단으로 아래로 스크롤하지 않으면 페이지 하단의 이미지가로드되지 않아 궁극적으로 응용 프로그램 성능이 향상됩니다.
대부분의 웹 사이트의 경우 HTML에서 게으른로드를 가능하게하는 방법을 아는 것이 중요합니다. 예를 들어, HD 사진으로 좋아하는 웹 사이트를 탐색 해보면 곧 웹 사이트가 제한된 수의 이미지 만로드하고 있음을 알게 될 것입니다. 페이지를 아래로 스크롤하면 자리 표시 자 이미지가 실제 이미지로 빠르게 대체됩니다.
• 예를 들어, unsplash.com의 로더를 참고하십시오.
• unsplash.com의 게으른 로딩 예
왜 게으른 이미지로드를 구현해야합니까?
• 게으른로드 이미지를 배우는 것은 웹 성능을 최적화하는 데 필수적입니다. 특히 시각적 콘텐츠가 많은 페이지에서. 웹 사이트의 게으른 로딩 이미지를 고려해야하는 몇 가지 이유는 다음과 같습니다.

  1

  웹 사이트에서 JavaScript를 사용하여 컨텐츠를 표시하거나 사용자에게 기능을 제공하는 경우 DOM을 빠르게로드하는 것이 중요합니다. 스크립트는 일반적으로 DOM이 완전히로드 된 후 실행되기 시작합니다. 많은 이미지가있는 웹 사이트에서 게으른로드 (또는 비동기 적으로 이미지로드)하면 사용자가 계속 탐색 할 것인지 또는 웹 사이트를 떠날지 여부를 결정할 수 있습니다.

  2

  대부분의 게으른 로딩 솔루션은 사용자가 창에서 이미지가 보이는 위치로 스크롤 할 때만 이미지로로드되므로 사용자가 해당 위치에 도달하지 않으면 이러한 이미지가로드되지 않습니다. 이는 많은 대역폭 절약이 절약 될 수 있음을 의미하며, 이는 대부분의 사용자, 특히 모바일 장치 및 느린 네트워크를 사용하는 사용자에게 매우 유리합니다.
  • 이미지의 게으른로드가 웹 사이트 성능을 향상시키는 데 도움이되지만 가장 좋은 방법은 무엇입니까?
  완벽한 방법은 없습니다.
  JavaScript에 능숙하다면 자신의 게으른 로딩 솔루션을 구현하는 것은 문제가되지 않아야합니다. 자신의 코드를 작성하는 것보다 더 많은 제어를 제공하는 것은 없습니다.

  또는 웹을 탐색하여 웹을 찾거나 토론 포럼에 가입하여 아이디어를 공유 할 수 있습니다. 나는 같은 일을 했고이 다섯 가지 흥미로운 방법을 찾았습니다. 1 사용자가 웹 페이지를 스크롤하면 이미지의 기본 게으른로드 및 iframes는 컨텐츠를 직접로드하는 방법입니다. 이미지와 iframe에

  속성을 ​​추가하면됩니다.
  • 보시다시피, javaScript가 필요하지 않으며
  속성의 값을 동적으로 대체 할 필요가 없으며 일반 HTML을 사용하십시오. 이 접근법은 HTML에 추가 오버 헤드없이 게으른 부하를 추가하는 완벽한 예입니다.
  게으른 : 게으른 하중에 매우 적합 eger : 브라우저에 지정된 컨텐츠를 즉시로드하도록 지시합니다

  Auto : 옵션을 브라우저에 게으르게로드할지 여부를 브라우저에 두십시오.

  이 방법은 타의 추종을 불허합니다. 여분의 오버 헤드가 거의 없으며 HTML에서 게으른 부하 이미지를위한 깨끗하고 간단한 방법입니다. 그러나 대부분의 주류 브라우저는 "로드"속성을 잘 지원하지만 일부 브라우저는 글을 쓰는 시점에 여전히 전폭적 인 지원이 부족합니다.

  브라우저 지원 해결 방법을 포함 하여이 HTML Lazy Loading 이미지의 힘에 대한 심층적 인 기사는 Addy Osmani의 "웹 용 기본 이미지 게으른로드!"를 놓치지 마십시오.
  2 교차로 관찰자 API는 게으른 부하 이미지 및 기타 컨텐츠에 사용할 수있는 최신 인터페이스입니다.

  다음은이 API에 대한 MDN의 소개입니다

  교차 관찰자 API는 대상 요소의 조상 요소 또는 최상위 문서 창의 교차 변화를 비동기 적으로 관찰하는 방법을 제공합니다.

  다시 말해서, 교차로 관찰자 API는 한 요소의 교차점을 다른 비동기 적으로 모니터링합니다.

  Mishunov는 Mishunov가 교차로 관찰자에 대한 훌륭한 자습서를 작성하여 게으른 부하 이미지에 사용했습니다. 그의 해결책은 다음과 같습니다 게으른 사진 라이브러리를로드하고 싶다고 가정 해 봅시다. 각 이미지의 표시는 다음과 같습니다

  여기서는 이미지의 경로가

  속성이 아닌

  속성에 포함되어 있습니다. 그 이유는 를 사용하면 이미지가 즉시로드되기 때문입니다. 이는 원하는 것이 아닙니다.

  CSS에서는 100px와 같은 각 사진에

  값을 지정할 수 있습니다. 이것은 각 이미지 자리 표시 자 ( 속성이없는 IMG 요소)를 수직 차원을 제공합니다.

  그런 다음 JavaScript 문서에서 구성 객체를 작성하고 인스턴스에 등록해야합니다.

  <code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
  <iframe loading="lazy" src="content.html"></iframe></code>

  마지막으로, 모든 사진을 반복하여 인스턴스에 추가 할 수 있습니다 : .

  이 솔루션의 장점은 구현, 효율적이며 교차하는 것이 쉽다는 것입니다. 관찰자는 대부분의 컴퓨팅 작업을 수행합니다. data-src
  브라우저 지원 측면에서 IE 11 및 Opera Mini를 제외한 모든 주류 브라우저는 최신 버전의 교차로 관찰자 API를 지원합니다. src 당신은 Denys의 기사에서 교차점 관찰자 API 와이 구현 세부 사항에 대해 더 많이 배울 수 있습니다. src

  3

  min-height lozad.js JavaScript 라이브러리의 Lazy Loading src

  게으른 이미지 로딩을 구현하는 빠르고 쉬운 대안은 JS 라이브러리가 대부분의 작업을 수행하도록하는 것입니다.

  <code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

  NPM/YARN을 사용하여 Lozad를 설치하고 선택한 모듈 패커를 사용하여 가져올 수 있습니다. intersectionObserver
  또는 CDN을 사용하여 라이브러리를 다운로드하여 html 페이지 하단에서

  <code class="language-css">img {
    min-height: 100px;
    /* more styles here */
  }</code>

  에 추가 할 수 있습니다. 다음으로 기본 구현을 위해 태그의 리소스에 클래스 iterationObserver를 추가하십시오.

  마지막으로, JS 문서에 lozad를 인스턴스화하십시오

  <code class="language-javascript">// 创建配置对象：rootMargin和threshold是接口公开的两个属性
  const config = {
    rootMargin: '0px 0px 50px 0px',
    threshold: 0
  };
  
  // 使用intersectionObserver实例注册配置对象
  let observer = new IntersectionObserver(function(entries, self) {
    // 迭代每个条目
    entries.forEach(entry => {
      // 只处理相交的图片。isIntersecting是接口公开的属性
      if(entry.isIntersecting) {
        // 将图片路径从data-src复制到src的自定义函数
        preloadImage(entry.target);
        // 图片现在已就位，停止观察
        self.unobserve(entry.target);
      }
    });
  }, config);</code>

  Lozad Github 저장소에서 라이브러리 사용의 모든 세부 사항을 찾을 수 있습니다.

  lozad는 교차로 관찰자 API에 대해 알고 싶지 않거나 다양한 컨텐츠 유형에 대한 빠른 구현을 찾고 있다면 훌륭한 옵션입니다.

  4 중간 독자 인 경우 사이트가 게시물에 기본 이미지를 어떻게로드하는지 알았을 것입니다. 가장 먼저 보는 것은 이미지의 흐릿한 저해상도 사본이며 고해상도 버전은 게으른로드입니다. CSS 및 JavaScript를 사용하여 HTML에서 게으른 로딩 이미지를 사용하면 비슷한 효과를 얻을 수 있습니다.

  중간 웹 사이트의 흐릿한 자리 표시 자 사진 중간 웹 사이트의 고해상도 게으른로드 사진 여러 가지 방법 으로이 재미있는 흐림 효과를 이미지에 추가 할 수 있습니다.

  내가 가장 좋아하는 방법은 Craig Buckler 방법입니다. 이 솔루션의 모든 장점은 다음과 같습니다

  성능 : 463 바이트의 CSS와 1007 바이트의 압축 된 JavaScript 코드 만. 는 망막 스크린을 지원합니다.

  <: :> 의존성 없음 : jQuery 또는 기타 라이브러리 및 프레임 워크가 필요하지 않습니다.
  레거시 브라우저 및 JavaScript 실패를 처리하기 위해 점진적으로 향상되었습니다.
  "자신의 진보적 인 이미지 로더를 빌드하는 방법"에서 모든 관련 정보를 읽고 프로젝트의 GitHub 저장소에서 코드를 다운로드 할 수 있습니다.
  5 yall.js는 사용자가 스크롤하는 동안 교차로 관찰자 API를 게으른 부하 JavaScript에 사용하는 기능이 풍부한 JavaScript 라이브러리입니다. 사진, 비디오, iframes를 지원하며 필요할 때 전통적인 이벤트 핸들러 기술로 돌아갑니다.

  문서에 yall을 포함시킬 때 다음과 같이 초기화해야합니다.

  다음, 게으른로드 간단한 IMG 요소를로드하려면 태그에서 다음을 수행하면됩니다.

  다음 사항에 주목하십시오 :

  요소에 클래스를 추가합니다.
  의 값은 자리 표시 자 이미지입니다.
  • 게으른 부하를 원하는 이미지의 경로는
  속성에 있습니다.
  다음은 yall.js의 장점입니다
  • 교차 옵저버 API를 사용하여 탁월한 성능을 얻으십시오.
  우수한 브라우저 지원 (IE11로 돌아갑니다).
  다른 종속성이 필요하지 않습니다.
  yall.js가 제공 할 수있는 내용과보다 복잡한 구현에 대해 자세히 알아 보려면 Github의 프로젝트 페이지를 자유롭게 확인하십시오.

  결론 프로젝트에서 실험 및 테스트를 시작할 수있는 5 가지 게으른 로딩 방법이 있습니다. 로드로드 이미지를 게으른 방법을 이해하는 것은 모든 웹 개발자에게 귀중한 기술입니다. 이 itepoint 포럼에 가입하여 이미지 최적화에 대해 더 많이 배울 수 있거나 다른 사람과 전문 지식을 공유 할 수 있습니다.

  게으른 그림 로딩에 대한 자주 묻는 질문

  게으른 사진의 적재는 무엇입니까?

  <code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
  <iframe loading="lazy" src="content.html"></iframe></code>

  게으른로드는 이미지가 필요할 때까지 이미지와 같은 특정 요소를로드하여 웹 페이지 성능을 향상시키는 데 사용되는 웹 개발 기술입니다. 게으른 이미지 로딩은 이미지가 사용자의 창에 들어가거나 웹 페이지에 표시되는 경우에만 페이지가 처음 렌더링 될 때 즉시 모든 이미지를로드하지 않고로드되면됩니다.
  게으른 로딩 사진의 이점은 무엇입니까?

  웹 사이트 성능 향상 초기 페이지 렌더링 속도를 높이고 대역폭 사용이 줄어 듭니다. 사용자 경험을 향상시킵니다.

  서버로드를 줄이고 웹 애플리케이션의 전반적인 효율성을 향상시킵니다.
  • HTML에서 게으른 부하 이미지를 어떻게 게으른가?
  HTML의 이미지에 게으른로드를 추가하려면 "로드"속성을 사용할 수 있습니다. "로드"속성은 이미지를로드해야 할 때 제어 할 수있는 표준 HTML 속성입니다. HTML Lazy Loading 이미지를 활성화하려면 "로드"속성의 값을 "Lazy"로 설정하고 IMG 요소에 추가하십시오. 이렇게하면 브라우저에 이미지가 창에 들어갈 때만 이미지를로드하도록 지시합니다. 예는 다음과 같습니다.
  사진을 게으른 사진을로드해도 괜찮습니까?
  • 예, 웹 개발에서 게으른로드 이미지 HTML을 사용하는 것은 다음과 같은 이유로 유익한 관행으로 간주됩니다. 초기 페이지 렌더링 속도를 높이고 비 필수 이미지로드의로드를 지연시켜 사용자 경험을 향상시킵니다. 이 접근법은 대역폭을 절약하고 데이터 요금제가 제한되어 있거나 인터넷 연결이 느린 사용자에게 유리합니다. 또한 페이지 로딩 속도를 늘려 검색 엔진 최적화 (SEO)에 긍정적 인 영향을 미치고 증분 향상의 원리를 준수합니다. 지각 된 대기 시간을 줄이고로드하는 동안 시각적 신호를 제공함으로써 게으른로드는 특히 모바일 장치에서 더 매끄럽고 효율적인 브라우징 경험을 제공합니다.
  • 이미지가 게으른 지 아는 방법은 무엇입니까?
  HTML에서 게으른로드 이미지를 올바르게 구현했는지 확인하려면 HTML 소스 코드를 확인하거나 브라우저 개발자 도구를 사용 할 수 있습니다. 이미지를 마우스 오른쪽 버튼으로 클릭하고 확인 또는 확인 요소를 선택하면 개발자 도구 패널의 이미지를 나타내는 IMG 요소를 확인할 수 있습니다. IMG 요소에 "로드"속성이 존재하는지 확인하십시오. "로드"속성이 "게으른"것으로 설정된 경우 이미지가 게으른 것으로 구성되었음을 의미합니다. 브라우저 개발자 도구를 사용하여 이미지의 속성을 확인하여 이미지의 게으른로드 상태를 빠르게 결정할 수 있습니다.

  게으른 이미지 로딩을 달성하기 위해 JavaScript를 사용하는 방법은 무엇입니까? JavaScript를 사용하여 게으른 이미지 로딩을 달성하려면 lozad.js 또는 yall.js와 같은 라이브러리를 사용하거나 교차로 관찰자 API를 사용하여 고유 한 사용자 정의 솔루션을 작성할 수 있습니다. 이 라이브러리를 사용하면 요소가 창에 들어가서 그 순간에로드 할 때 모니터링하여 주문시 콘텐츠를로드 할 수 있습니다.

  게으른 이미지 로딩이 SEO에 영향을 미칩니 까?

  예, 게으른 이미지 로딩은 SEO에 긍정적 인 영향을 줄 수 있습니다. 페이지로드 시간을 늘리고 처음로드해야 할 데이터의 양을 줄임으로써 게으른로드는 웹 사이트가 검색 엔진 결과에서 더 나은 순위를 얻는 데 도움이 될 수 있습니다. 더 빠른 페이지 속도는 Google과 같은 검색 엔진으로 알려진 순위 요소이며 Lazy Loading은 웹 사이트 이미지가 전반적인 성능을 늦추지 않도록하여이를 용이하게 할 수 있습니다.

  기본 게으른 하중과 JavaScript 기반 게으른 하중의 차이점은 무엇입니까?

  기본 게으른 하중은 및 태그의 "로드"속성에 대한 브라우저의 내장 지원에 의존합니다. 이 방법은 간단하며 추가 자바 스크립트가 필요하지 않습니다. 반면에 JavaScript (일반적으로 lozad.js 또는 교차로 관찰자 API와 같은 라이브러리를 사용하여 구현)를 기반으로 한 게으른 로딩은 유연성과 사용자 정의가 더 커집니다.

  사진의 게으른 적재에 대한 단점이 있습니까?

  주요 단점은 사용자가 페이지를 아래로 스크롤 할 때 이미지가로드를 지연시킬 수 있다는 것입니다. 또한 일부 이전 브라우저는 게으른 하중을 지원하지 않을 수 있습니다. <img alt="웹 사이트 성능을 향상시키기위한 게으른로드 이미지를위한 5 가지 기술" > <iframe></iframe> WordPress에서 Lazy Load Pictures를 할 수 있습니까?

  예, WordPress에서 쉽게 게으른로드 사진을 찍을 수 있습니다. 많은 테마는 이제 기본적으로 기본 게으른 하중을 지원하지만 "WP Rocket의 Lazy Load"또는 "Smush"와 같은 플러그인을 사용하여 인코딩없이 게으른 하중을 달성 할 수도 있습니다.

위 내용은 웹 사이트 성능을 향상시키기위한 게으른로드 이미지를위한 5 가지 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!