이미지 Lazy Load 장점 4가지와 단점

레이지 로딩(Lazy Loading)은 웹페이지 로딩 시간을 줄이는 기술입니다. “이미지가 로드 되는 시간을 단축 시킨다”로 정의 내릴 수 있습니다. 페이지의 모든 이미지를 유지하면서 페이지 로드 시간을 개선하고 페이지 크기를 줄임으로서 웹페이지의 속도를 향상 시킵니다. ‘이미지 지연 로드’ 특징은 사용자가 페이지에 접속 후 아래로 스크롤을 할 때 이미지가 표시될 때만 로딩이 됩니다. 즉, 페이지 하단에 있는 이미지는 사용자가 실제로 끝까지 스크롤할 하지 않았다면 로드 되지 않습니다.

1. Lazy Load 장점

이와 같은 원리로 사용자가 웹사이트 방문 후 페이지에 처음 접속한 시점에 페이지 로드 속도가 감소합니다. 그리고 대역폭을 절약할 수 있게 됩니다. 이미지와 비디오를 그대로 로딩하지 않는다는 것은 웹사이트의 속도가 향상되는 이점이 발생합니다. 크게 4가지의 장점을 가질 수 있습니다.

• 장점
  • 지연 로드는 이미지·비디오의 전송 최적화로 사용자의 웹페이지 접속 시간을 향상시킵니다.
  • 일부의 파일만 전송하게 되어 사용자가 콘텐츠를 더 빨리 제공 받습니다.
  • 빠른 로딩 속도로 웹사이트의 이탈 확률이 줄어듭니다.
  • 서버의 대역폭을 절감할 수 있습니다.

2. Lazy Load 단점

레이지 로드는 치명적인 단점으로 작용할 수 있습니다. 많은 웹사이트 운영자 및 개발자는 웹사이트의 속도를 향상시키기 위해 여러가지 방법을 사용합니다. 그 중 이미지 지연로드란 선택지가 있습니다. Google에선 콘텐츠가 뷰포트 내에 로드가 되는지 확인되어야 한다고 설명한 적이 있습니다. 뷰포트 내에서 로드되지 못 한다면 GoogleBot은 해당 콘텐츠를 보지 못할 가능성이 생깁니다.

뷰포트란?
웹 페이지가 브라우저 화면(PC&모바일&테블릿 등)상에서 실제로 표시되는 영역입니다.

3. 이미지 지연 로드의 올바른 설정

SEO를 위한 올바른 설정을 해야 합니다. 지연 로딩은 이미지와 비디오 뿐만 아닌 아이프레임에도 설정할 수 있습니다. 이미 2020년 크로미움 기반 브라우저(구글 크롬, 마이크로소프트 엣지, 네이버 웨일 등)에서는 아이프레임에 대한 지연 로딩에 대한 지원이 되고 있습니다.

• 크롬의 아이프레임이 숨겨져 있는지 확인하는 기준
  • iframe의 너비와 높이가 4픽셀 이하
  • display: none 또는 visibility: hidden이 적용되었는지 여부
  • iframe이 음의 X 또는 Y 위치 지정을 사용하여 스크린 외부에 배치

아이프레임이란?

iframe이란 inline frame 의 약자입니다. 웹 브라우저 내에 또 다른 프레임입니다. 현재 브라우저에 렌더링되고 있는 문서 내에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다. 요즘은 HTML5 내의 기능들이 아이프레임을 대체하고 있습니다.

파이어폭스 등 다른 브라우저에서는 지연 로딩 된 아이프레임에 대한 크롤링이 어려울 수 있다는 점을 참고해야 합니다.

♣ 결론

구글에서도 지연 로딩에 대한 어느 정도의 지원이 있다는 점을 참고하여 적절하게 사용한다면 이점이 있습니다. 하지만 운영중인 웹사이트에 장점과 단점 중 어느 것이 더 크게 작용하는지 고려할 수 밖에 없겠습니다.