Lazy Loading

Lazy Loading이란?

구체적으로 lazy loading은 웹사이트에 적용되는 기술이자 프로그래밍 디자인 패턴으로, 요소와 리소스가 완전히 로드되지 않고, 사용자의 사용에 따라 즉석에서 또는 **주문형(on-demand)**으로 실행되어 콘텐츠의 "지연 로딩"을 생성합니다.

이렇게 하면 리소스가 최적화되고 텍스트, 동영상, 이미지 및 기타 자료와 같은 콘텐츠가 필요할 때만 로드되어 속도, 메모리 사용량 및 처리, 반응성, 로딩 시간이 개선됩니다. 이는 사용자가 모든 요소를 사용하지 않더라도 사이트나 페이지가 완전히 로드되는 **전체 로딩(full loading)**과 대조됩니다.

Lazy loading의 일반적인 장점

lazy loading의 주요 목적이 사용될 때만 요소의 로딩을 최적화하는 것이므로 여러 장점이 있으며 다음과 같이 요약할 수 있습니다:

• ›웹사이트의 주요 요소 표시 속도.
• ›사이트의 사용자 경험(UX) 의 상당한 개선.
• ›모바일 디바이스에서의 성능 개선, 특히 네트워크 연결 리소스가 제한된 경우; Lazy Loading이 활성화되어 있으면 그렇지 않으면 사용 불가능한 열악한 커버리지 조건에서도 페이지를 탐색할 수 있습니다.
• ›모바일 디바이스의 CPU, RAM, 배터리와 같은 리소스의 전체적이고 총체적인 최적화.
• ›로딩 문제가 없어 페이지의 체류 시간 증가는 간접적으로 순위 개선으로 이어집니다.
• ›이탈률 감소.

마찬가지로 lazy loading 프로그래밍 접근 방식은 더 기술적인 관점에서 다음과 같은 장점과 새로움을 가지고 있습니다:

• ›Lazy loading은 React 및 Angular와 같은 JS 프레임워크는 물론 WordPress와 같은 CMS 플랫폼과 완전히 호환됩니다. 사실 이미지를 위한 lazy loading이 WordPress 5.5 버전부터 기본적으로 포함될 것이라고 최근 보고되었습니다.
• ›IntersectionObserver API 덕분에 검색 엔진에서 이미지를 숨기지 않습니다.
• ›이미지와 responsive 클래스 리소스와 같은 여러 콘텐츠 유형 지원.
• ›사이트 이미지가 인덱싱되도록 허용하며, 이는 SEO에 매우 중요합니다.
• ›직접적으로나 간접적으로 SEO의 많은 핵심 포인트를 개선하기 때문에 100% SEO 친화적인 자원입니다.

WordPress에서 lazy loading을 어떻게 구현할까요?

WordPress에 사이트가 있다면 페이지가 훨씬 더 빠르게 로드되도록 lazy loading을 구현하는 많은 솔루션이 있기 때문에 큰 이점이 있다는 것을 알아야 합니다. 아래의 이 스크린샷은 플러그인 저장소에서 가능한 솔루션 중 일부를 보여줍니다:

lazy loading 구현을 위한 가장 두드러진 WordPress 플러그인 보기.

이 구현을 수행하기 위해 여러 옵션이 있습니다:

• ›"Lazy loader", "a3 lazy load"와 같은 특정 lazy loading 플러그인 선택...
• ›"WP Rocket"과 같은 웹 최적화 플러그인 선택, 이는 다른 개선 사항과 함께 이 옵션이 기본적으로 이미 포함되어 있습니다.

Lazy Loading과 관련된 SEO 측면

우리는 이미 지연 로딩의 주요 임무와 그 핵심 장점, 그리고 페이지 성능, UX, SEO 개선에 어떻게 영향을 미치는지 알고 있습니다.

이제 부적절하게 사용하면 반대 효과를 일으킬 수 있기 때문에 최대한 활용하기 위해 지연 로딩을 현명하게 사용해야 합니다.

예를 들어 lazy loading은 속도를 개선하기 위해 캐시를 사용하므로, 거기에 너무 많은 콘텐츠가 저장되면 올바르게 구현되지 않은 경우 속도 저하나 오류가 발생할 수 있으며, Google이 페이지와 요소를 인덱싱하는 것조차 막을 수 있어 사이트 순위에 심각한 영향을 미칠 수 있습니다. 일부 팁은 다음과 같습니다:

• ›캐시를 최적화하고 현명하게 사용합니다.
• ›Google이 사이트에서 크롤링하는 콘텐츠를 확인하기 위해 Google Search Console을 사용합니다.
• ›각 이미지가 Google에 의해 인덱싱될 수 있도록 ALT 텍스트를 추가합니다.
• ›항상 IntersectionObserver API를 사용합니다.
• ›Chrome 브라우저의 Blink LazyLoad 기능 덕분에 iframe 또는 다른 페이지나 출처에서 임베드된 콘텐츠에 loading 속성을 추가합니다. 이미지, 사진, 동영상, 텍스트 및 기타 콘텐츠에 적용됩니다.

Lazy loading과 UX

웹사이트와 관련하여 로딩 시간, 반응성, 리소스 사용량, 일반적인 동작과 관련하여 좋은 사용자 경험(UX)을 제공하기 위한 기술적 및 일반적 최적화는 모두 필수적입니다. 사이트가 매우 반응성이 좋지 않으면 이탈률이 높아지고, 사용자 경험이 좋지 않으면 트래픽, 가시성, 심지어 SEO에도 영향을 미칠 것입니다.

지연 로딩으로 목표는 사용자가 페이지를 스크롤할 때 콘텐츠를 점진적으로 그리고 사용자가 필요로 할 때 로드하여, 이미지든 텍스트든, 사용자에게 중요하지 않은 요소를 보여줄 수 있는 전체 플랫폼을 로딩하는 것에 비해 리소스 사용을 최적화함으로써 단 한 번의 단계로 사이트의 UX를 극적으로 개선하는 것입니다.

Chrome에서의 네이티브 lazy loading(HTML)

Google이 UX에 부여하는 중요성을 보여주듯, 2020년부터 그리고 Chrome 브라우저의 75 버전부터 HTML 페이지 태그와 사진, 동영상 등과 같은 멀티미디어 콘텐츠에 네이티브 lazy loading을 추가하는 것이 가능합니다.

이렇게 HTML lazy loading 속성을 자동으로 추가하면 Chrome 브라우저는 페이지 콘텐츠가 한 번에 모두가 아니라 사용자의 탐색에 따라 로드된다는 것을 이해하여 속도와 반응성을 개선합니다. 이를 사용하려면 시각적 및 멀티미디어 리소스의 각 태그와 iframe에 lazy 값이 있는 loading 속성을 추가합니다:

<img src="image.jpg" loading="lazy" alt="..." />

<iframe src="video-player.html" loading="lazy"></iframe> 이 자원은 이미지에서 사용할 수 있으며, 이는 브라우저가 다운로드해야 하는 정보의 큰 부분을 차지합니다. 그리고 iframe에서도 사용할 수 있습니다. 우리가 이를 사용하여 외부 자원을 사이트에 임베드한다는 것을 기억하세요.

iframe에서의 사용을 강조하는 것이 중요합니다. 이는 사이트의 중요한 로딩 포인트를 나타낼 수 있기 때문입니다.

단점으로는 네이티브 lazy loading이 Chrome에서만 호환되지만, Mozilla Firefox에서 발생하는 것처럼 지원이 없는 경우 호환 라이브러리를 통해 다른 브라우저에서 사용을 구현할 수 있습니다.

Lazy loading의 사용

이미 언급했듯이 lazy loading은 응답을 최적화하기 위해 페이지의 요소 로딩을 지연시키는 데 중점을 둡니다. 이러한 의미에서 도구에 부여된 사용은 모든 시각적 자원에 초점을 맞추지만, 문서 및 기타 파일을 포함할 수 있는 이미지, 동영상, iframe에 강조점을 두며, 모두 태그 수정과 lazy 값이 있는 loading 속성 포함을 통해 무거운 요소나 큰 멀티미디어 콘텐츠가 있더라도 사이트의 일반적인 속도를 최적화합니다.

lazy loading에 대한 질문이 있거나 프로젝트에 구현하고 싶으신가요? 저희가 도와드리겠습니다!

문서 및 참조:

• ›이미지를 위한 Lazy loading
• ›동영상을 위한 Lazy loading
• ›네이티브 Lazy loading