로드 지연, 더 빠른 웹 페이지, 검색 엔진 최적화 우호적

사진은 당신의 사이트의 관건적인 내용입니까?만약 네가 너의 사이트 성능에 대해 매우 진지하다면, 너는 이미 그것들을 최적화시켰을 것이다.그런데 너는 게으르게 너의 그림을 불러올 생각은 없니?이미지 로드 지연은 우선 중요한 내용을 위해 대역폭을 절약함으로써 사용자 체험을 개선한다.
일부 사람들은 검색 엔진의 최적화를 고려하여 이런 기술의 사용을 거절한다.그러나 그림을 불러오는 것을 적당히 늦추는 것은 색인을 막을 수 없습니다.로드가 지연되는 이유와 SEO의 우호적인 방식으로 구축되는 방법을 알아보겠습니다.
인터넷에는 도처에 그림이 있다.올바른 환경에서 올바른 이미지를 위해 봉사하는 것은 정말 도전적이다.Images need to be optimized, 필요한 경우에만 렌더링 영역에 적용됩니다.
이미지 로드 지연은 마지막 요구 사항을 충족시키기 위한 기술입니다.방문자에게 유용한 경우에만 이미지를 로드합니다. 필요할 때 이미지 다운로드를 터치합니다. 특정한 상호작용 후에 스크롤로 인해 또는 사용하지 않습니다.
According to HTTPArchive, 화면 밖 로드 지연 및 이미지 숨기기를 통해 페이지당 420KB(가운데) 절감

몇몇 용례

많은 구체적인 상황이 로드 지연과 관련된다.몇 분 동안 몇 가지 예를 들자.
전자상거래 검색 결과.이 페이지들은 일반적으로 이렇게 많은 결과를 포함하기 때문에 많은 제품들이 뷰포트 밖에 있다.그들의 사진을 다운로드하는 것이 유용합니까?로드 지연을 통해 페이지가 스크롤될 때까지 로드를 지연할 수 있습니다.
회전목마.너는 그들을 알고 있지, 그렇지?왜 사용자가 모든 그림을 불러와야 하는지, 몇 초 안에 첫 번째... 게으른 그림을 불러와야 하는지!첫 번째를 불러오고 회전목마 애니메이션을 몇 초 전에 백그라운드에서 다음 다운로드를 터치합니다.
메뉴 및 탭.메뉴나 탭에 포함된 이미지는 대개 클릭한 후에만 표시됩니다.로드 지연을 통해 요소를 표시하는 단추를 누르거나 멈출 때까지 이미지의 로드를 지연시킬 수 있습니다.
페이지의 성질에 따라 다른 상황도 나타날 수 있다.만약 사전에 다운로드 지연에 대해 물어보지 않았다면, 페이지에 어떤 그림도 포함해서는 안 된다.하루가 끝날 때 뚜렷한 성능 향상이 있기 때문이다.

가장 기본적인 필수품

브라우저는 즉시 필요하지 않은 이미지의 로드를 지연하거나 이미지를 로드하지 않을 경우 리소스(대역폭 및 CPU)를 절약할 수 있습니다.페이지가 더 빨리 불러오고 사용자 체험도 개선되었다. 왜냐하면 절약된 자원이 더욱 중요한 내용에 영향을 미칠 수 있기 때문이다.서버 측 수익도 있습니다.리소스를 제공하는 데 필요한 CPU 및 대역폭은 관리 및/또는 CDN 비용을 절감하는 데 드는 부담이 적습니다.
인용문에서 말한 바와 같이, 로드 지연은 검색 엔진이 이미지에 색인을 만드는 것을 막지 못한다.그러나 이것은 매우 까다롭고 모든 기술이 불평등할 수 있다. 왜냐하면 시장의 각종 라이브러리와 플러그인은 모든 최선의 실천을 실현하지 못했기 때문이다.유기 검색엔진의 최적화를 보호하기 위해서, 로드 지연이 어떻게 작동하는지, 그리고 그것을 어떻게 안전하게 사용하는지 알아야 한다.

JavaScript로 LazyLoad 로드

이상적인 경우 브라우저는 자동으로 이미지 로드를 지연합니다.이것은 아마도 미래의 상황에서 Lazyload Feature Policy로서 연구 중인 것일 것이다. 그러나 우리는 아직 거기에 도착하지 않았다.또한 HTML 태그를 수정하고 JavaScript(JS) 종속성을 추가하는 것을 의미하는 다른 해결 방안을 모색해야 합니다.
중요하다
너는 필요도 없고 게으르게 너의 모든 그림을 불러와서는 안 된다.대부분의 시간 동안 일부 이미지가 표시되는 것을 알고 있으면 정상적으로 불러오고 렌더링합니다.다른 이미지만 지연 로드하는 것이 좋습니다.필요 없을 때 복잡성을 증가시키지 마라!
가장 전통적인 해결 방안은 로드가 필요한 경우 JS를 사용하여 각 이미지(또는 이미지를 배경으로 표시하는 각 요소)를 정기적으로 재평가하는 것이다.예를 들어 lazysizes 같은 고성능 라이브러리는 이런 모델을 바탕으로 구축된 것이고 비교적 오래된 브라우저와 호환된다.lazysizes는 사용자 에이전트가 스크롤할 수 있는지, 그렇지 않으면 바로 그림을 불러옵니다.
그러나 이렇게 정기적으로 이 테스트를 실행하는 것은 비용이 있다.교차 및 변이 관찰기 API를 지원하는 웹 브라우저에서는 이러한 비용을 피할 수 있습니다.yall.js 및 lozad.js 은 이러한 기준 기반 기술의 좋은 예입니다with modern browsers만 호환되지만 a polyfill 를 사용하여 이전 브라우저의 부족한 기능을 시뮬레이션할 수 있습니다.
팁
브라우저에서 src 의 누락을 오류로 해석할 수 있으므로 다음과 같이 매우 작은 투명 이미지 자리 표시자 (심지어는 내부 연결) 정의 src 속성 값을 사용하는 것이 좋습니다.

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

클라이언트에서 어떤 JavaScript 솔루션을 선택하든 백엔드를 수정하여 올바른 HTML 코드를 반환해야 합니다.이미지 로드 지연에 사용되는 HTML 태그는 항상 비슷합니다. src 속성의 최종 값은 data-src 속성에 임시로 배치되며, 이 속성은 <img> 요소가 최종 이미지를 즉시 로드하지 못하게 합니다.

<!-- Lazy loaded image: before -->
<img data-src="garden.jpg" src="placeholder.jpg" class="js-lazyload" src="dat…" />

<!-- Lazy loaded background image: before -->
<div data-class="bg-image-garden" class="container js-lazyload">…</div>

라이브러리는 속성을 통해 목표 이미지를 식별하는데 보통 특정 클래스를 사용한다. (예를 들어 여기서 우리가 사용하는 것은 js-lazyload 클래스이다.라이브러리에서 이 로드된 이미지를 감지하면 data-src 속성은 src 속성을 채우는 데 사용되고 브라우저는 이미지를 로드하기 시작합니다.이 기술은 다른 미디어 형식(영상, iFrame)이나 응답식 웹 디자인에 적용되는 이미지(예를 들어 data-srcset 속성은 임시 보존 srcset 속성의 최종 값에 사용할 수 있다.

<!-- Lazy loaded image: after -->
<img src="garden.jpg" class="js-lazyload" … />

<!-- Lazy loaded background image: after -->
<div class="container js-lazyload bg-image-garden">…</div>

JavaScript가 없습니까?스타일 폴백 (및) 을 사용합니다.

검색엔진 로봇, 예를 들어 Googlebots는 내용 색인을 위해 웹을 훑어보는 파충류이다.Googlebots가 페이지에서 JavaScript를 언제 실행할지, 어떤 용량으로 실행할지 정확히 아는 사람은 없습니다.Googlebots는 demonstrated by Stephan Boyer in 2016 및 이후 Tom Greenaway at Google IO 2018 에서 증명한 바와 같이 첫 번째 액세스 시 JavaScript를 실행하지 않습니다.최종 렌더링은 실제로 며칠 후에 도착할 수 있습니다.

Because Googlebots actually runs two waves of indexing across web content, it’s possible some details might be missed.
Tom Greeaway

그림 같아.
JavaScript가 올바르게 실행되면 로드가 지연되는 이미지를 처리하지 않고 src 속성이 채워지지 않아 브라우저가 이미지를 다운로드하고 표시하지 못하게 됩니다.
JavaScript 없이 이 이미지에 서비스를 제공하는 방법은 무엇입니까?특정 HTML 요소를 사용할 수 있습니다.<noscript>.스크립트 기능이 지원되지 않거나 비활성화된 경우에만 <noscript> 요소의 내용이 표시됩니다.이것이 바로 우리가 필요로 하는 것이다!
따라서 HTML 응답에 다음이 포함될 경우

<img data-src="garden.jpg" src="dat…" alt="A spacious garden dominated by a large pine tree." class="lazyload" />
<noscript>
    <img src="garden.jpg"  alt="A spacious garden dominated by a large pine tree."… />
</noscript>

다음:

JavaScript를 사용할 수 있는 경우 첫 번째 <img> 요소만 표시됩니다.

JavaScript를 사용할 수 없는 경우 페이지가 표시되는 동안 두 요소<img>가 고려됩니다.두 번째 요소<noscript> 요소는 검색 엔진에 의해 표시되고 인덱스됩니다.구글 사이트 관리자 트렌드 분석가들은 이런 기술은 배경 이미지에 있어 완전히 같다고 말한다.

<div data-class="bg-image-garden" class="container js-lazyload">…</div>
<noscript>
    <div class="container bg-image-garden">
        … A spacious garden dominated by a large pine tree. …
    </div>
</noscript>

참고 JavaScript를 사용할 수 없을 때 적용되는 특정 스타일을 놓치지 않고 지연 로드되지 않은 이미지를 숨깁니다.
코드 중복과 관련된 지루한 HTML이 생기는 것을 두려워할 수 있습니다.걱정하지 마십시오. HTML 문서를 인터넷에 보내기 전에 gzip이나brotli를 사용하여 압축해야 하기 때문에 전송 크기에 미치는 영향은 매우 적습니다. (웹 사이트가 압축을 정확하게 사용했는지 확인하지 않으면,audit your pages on Dareboost
물론 이 모든 라벨을 입력하는 것은 정말 지루하다.응답성 이미지, 예술 방향을 관리할 때 이미지의 표시는 매우 복잡하고 복잡할 수 있다.따라서 어쨌든 이 HTML 코드를 수동으로 입력해서는 안 됩니다. 이러한 복잡성을 자동으로 처리하는 것은 CMS의 작업이나 작업 흐름에 기여하는 작업이어야 합니다.

심지어 로드 지연이 이루어지기 전에 Guardian에서 온 그림을 표시합니다

테스트 구현

일단 로드 지연이 실현되면, 그것이 유효한지 테스트해야 한다.물론 가장 간단한 해결 방안은 뷰포트 밖의 모든 이미지가 게으르게 불러오는지 확인하기 위해 Dareboost 실행full web performance diagnosis을 사용하는 것이다.만약 그렇지 않다면, 우리는 너에게 알려주고, 너에게 줄 이미지의 주소를 알려줄 것이다. 불러오는 것은 늦출 수 있다.
브라우저나 사용자 정의 이벤트에 이미지를 로드한 경우 your report’s Waterfall 를 사용하여 이미지 로드가 올바른 순서를 따르는지 확인합니다.사용자 정의 이벤트의 경우Custom Timing: 폭포에서 이벤트를 찾을 수 있습니다.
수동 테스트가 필요할 수도 있습니다.관련 웹 페이지에서 브라우저를 열고 Developer Tools를 열고 Network 탭을 선택하십시오. (현대 브라우저마다 이 기능이 있습니다.)새 호출을 가시화하기 위해 네트워크 스택을 비우고 로드 지연을 위한 상호작용을 자극합니다.
다음은 스크롤 중에 지연 로드가 활성화된 Chrome의 예입니다.
브라우저 기반 도구를 사용하여 테스트를 실행하여 이러한 테스트의 자동화를 실현할 수 있습니다.Puppeter가 그 중 하나입니다. can be used to test Chrome이나 Chrome에 게으름을 피우면 실제 사용자가 그림을 볼 수 있습니다.
파충류 로봇도 당신의 이미지를 볼 수 있다는 것을 검증하기 위해 Google Search Console의 URL 검사기 도구를 사용하여 구글 자신에게 물어볼 수 있다.구글을 통해 얻을 수 있는 웹 페이지가 완전히 똑같다는 것을 보게 될 것이다.URL을 삽입하여 Googlebot에서 페이지를 테스트하고 결과를 캡처하여 <noscript> 반환 기능이 정상인지 확인하십시오.
우리가 여기 있는 동안, 당신이 지금 알고 있는 모든 것은 이미지의 로드 지연, 검색 엔진의 최적화에 대한 영향과 가장 좋은 방법으로 그것을 돌려야 한다는 것이다.몇 페이지 자르라고!