검색 SEO에도 효과적인 이미지 지연 로딩 방법이란? (주의점 포함)

이미지 지연 로드란 웹 브라우저가 표시될 때 처음으로 이미지를 로드하는 방법입니다. 일반적으로 웹 페이지는 액세스할 때 이미지 파일을 로드하고 완성한 후 표시됩니다. 이 경우 이미지가 무거운 페이지는 이미지가 로드될 때까지 표시되지 않습니다. 웹 페이지를 표시하는 데 시간이 오래 걸리면 이탈 가능성도 높아집니다.

 

페이지의 내용을 보고 이탈되면 내용을 변경하는 등 개선의 여지가 있습니다. 그러나, 표시 시간으로 이탈되는 경우는 Web 사이트의 만드는 방법이 원인이므로 개선이 어렵습니다.

왜 이미지를 지연 로드해야 하는가?

전술한 바와 같이, 화상 지연 로딩을 실시하는 목적은 「이탈률 개선」과 「SEO 시책」입니다(물론 유저빌리티 향상에도 연결됩니다). 2017년 Google 공식 발표에서는 모바일 사이트 로드 시간이 3초 이상 걸리면 53%의 사용자가 이탈한다고 합니다.

▼모바일 페이지 속도에 대한 새로운 업계 벤치마크에 도달하는 방법 알아보기
https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry -벤치마크/

또한 Google은 2018년부터 SEO 알고리즘으로 로딩 속도를 랭킹 요인으로 하는 'Speed ​​Update'를 적용하고 있습니다.

▼ 페이지의 로딩 속도를 모바일 검색의 순위 요소로 사용합니다 (Google 검색 중앙 블로그)
https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search ?hl=ko

본 기사의 취지인 화상 지연 로딩은 로딩 속도 개선의 시책의 하나입니다. 다른 로드 속도 향상에 대한 자세한 내용은 본 블로그 다른 글들을 참고하세요.

여기에서는 구체적인 시책에 들어갑니다. 이미지 지연 로딩을 구현하는 방법은 주로 두 가지가 있습니다.

loading 속성에 의한 이미지 지연 처리

첫 번째는 loading 속성의 추가입니다. HTML의 IMG 태그에 "loading="lazy""라고 추가하기만 하면 됩니다.

<img src="xxx.jpg" loading="lazy">

이렇게 하면 이미지 지연 로드를 적용할 수 있습니다. 그러나 오래된 환경 등 일부 브라우저는 지원되지 않으므로주의가 필요합니다. 현시점에서는 낡은 ​​환경도 고려해 loading 속성에 가세해 다음의 시책도 병용해 두는 것이 무난합니다.

JavaScript로 이미지 지연 처리

loading 속성의 추가는 브라우저의 기능이지만, 대응 환경은 ​​브라우저에 의존합니다. 대조적으로 Javascript로 구현하면 거의 모든 환경에서 대응할 수 있습니다. 이미지 지연 로드를 수행하는 자바스크립트 라이브러리는 여러 가지가 있습니다. 폐사가 이전보다 사용하고 있는 것은 「lozad.js」입니다. 물론 그 밖에도 라이브러리는 있습니다만, 익숙해져 있으므로 이쪽을 소개합니다.

▼lozad.js
jQuery 독립적으로 사용할 수 있는 경량 라이브러리. 오픈 소스로 무료로 사용 가능. 화상·배경 화상·동영상·IFRAME 등 많은 요소에 대응.
https://apoorv.pro/lozad.js/

사전 준비lozad.js 로드 lozad.js 실행<script> const observer = lozad(); observer.observe(); </script>이미지 파일에 대한 설명 예 (data-src에 이미지 경로 설명)<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="xxx.jpg" class="lozad">

지연 로드의 주의점

이상이 화상 지연 로딩의 사용 방법입니다만, 주의점도 있습니다. 이미지 지연 로드는 장치 화면에 표시될 때 이미지만 로드합니다. 이미지 로딩이 빨라지는 것은 아닙니다. 그래서 이미지의 용량이 큰 경우, 당연히 읽어들이기까지 시간이 걸립니다. 이미지 자체를 가볍게 하는 시책도 별도로 실시할 필요가 있습니다.

 

또한 lozad.js는 장치의 화면에 표시되었을 때 data-src 속성을 src 속성으로 다시 쓰는 것으로 지연 로드를 실시하고 있습니다. 즉 이미지의 src 속성에 이미지 파일의 경로를 기술하고 있으면(자) 이미지가 읽혀집니다. 따라서 앞의 이미지 파일에 대한 설명 예제는 src 속성에 1px 투명 이미지를 지정합니다.

 

지금의 사람에게는 익숙한 것이 없을까 생각합니다만, 옛부터 Web 업계에 있는 분은 TABLE 레이아웃으로 코딩을 하고 있는 시대는 spacer.gif라고 하는 투명 화상을 사용해 조정하고 있었습니다. 이미지 지연 로드를 위해 투명 이미지를 사용하면 그리워집니다.

 

블로그 품앗이 봇 사용 시 SEO 지수와 검색순위 떨어지는 현상 주의사항

 

 

구글 키워드 순위를 확인하는 9가지 최고의 순위 추적 도구

 

*참조한 훌륭한 원본 글 링크: https://www.web-ma.co.jp/column/seo/1574/