웹 사이트에 대한 지연 로딩을 사용자 정의하는 가장 좋은 방법

Lazy Loading은 나중에 사용자가 웹 페이지를 방문할 때 일부 이미지 또는 웹 페이지 요소의 로드를 연기하는 데 사용됩니다. 이는 일반적으로 스크롤 없이 볼 수 있는 이미지와 웹사이트 요소에 대해 수행됩니다. 아이디어는 전체 웹 페이지를 한 번에 로드하는 대신 사용자가 계속 아래로 스크롤할 때 웹 페이지의 일부를 로드한다는 것입니다.

지연 로딩을 사용하는 주요 이점은 전체 웹사이트의 로딩 시간을 단축한다는 것입니다. Lazy Loading은 방문자가 즉시 보거나 읽을 수 있는 상단 부분을 먼저 로드하여 웹 사이트의 성능을 향상시키고 더 나은 사용자 경험을 제공합니다. 방문자가 귀하의 웹 페이지에 와서 오랫동안 기다려야 하는 경우 관심을 잃고 사라질 수 있습니다. 그러나 웹 페이지의 나머지 부분을 로드하는 동안 즉시 보거나 읽을 내용을 제공하면 웹사이트에 계속 연결될 수 있습니다. 지연 로딩의 두 번째 장점은 비용 절감입니다. 웹사이트 방문자가 웹사이트의 특정 섹션을 방문하는 경우에만 이미지가 다운로드됩니다. 따라서 방문자가 아래로 스크롤하지 않으면 장치에 다운로드되는 데이터가 줄어들어 비용을 절약할 수 있습니다.

이러한 장점으로 인해 지연 로딩은 웹사이트의 사용자 경험과 효율성을 향상시키는 훌륭한 방법입니다.

CSS 배경 속성을 사용하거나 <img> 태그를 사용하는 두 가지 방법으로 웹사이트에 대한 지연 로드를 사용자 지정할 수 있습니다. 그러나 이 기술은 사용하기 쉽기 때문에 <img> 태그 방법이 둘 중 더 일반적입니다.

<img> 태그 속성:

핀

<img> 태그가 사용되면 브라우저는 src 속성을 사용하여 이미지 로드를 트리거합니다. 코드의 첫 번째 이미지인지 100번째 이미지인지는 중요하지 않습니다. 브라우저가 src 속성을 받으면 이미지 로드를 트리거합니다. 따라서 이러한 이미지를 지연 로드하려면 이미지 URL을 src가 아닌 다른 속성에 추가하십시오. 예를 들어 이미지 URL을 data-src 속성에 배치하면 src 속성이 비어 있으므로 브라우저가 이미지 로드를 트리거하지 않습니다.

이제 선행 로드가 중지되었으므로 이미지를 로드해야 하는 시기를 브라우저에 알려야 합니다. 뷰포트에 들어오는 즉시 이미지 로드를 트리거하려고 합니다. 이미지가 뷰포트에 들어가는 타이밍을 확인하는 두 가지 방법이 있습니다.

1. 자바스크립트 이벤트 사용:

핀

이 기술에서 이벤트 리스너는 브라우저의 크기 조정, 방향 변경 및 스크롤 이벤트에 사용됩니다. scroll 이벤트가 가장 확실한 이벤트입니다. 사용자가 웹 페이지를 스크롤할 때 확인하는 데 사용됩니다. 'orientationChange' 및 'resize' 이벤트는 지연 로딩에 똑같이 필수적입니다. 크기 조정 이벤트는 브라우저 창의 크기가 변경되면 트리거됩니다. 'orientationChange' 이벤트는 장치가 세로에서 가로 모드로 또는 그 반대로 회전할 때 발생합니다. 이러한 경우 화면에 표시되는 이미지 수가 변경되므로 이미지 로드를 트리거해야 합니다.

이러한 이벤트 중 하나가 발생하면 아직 로드되지 않은 페이지에 있는 모든 이미지를 찾습니다. 현재 뷰포트에 있는 웹 페이지에 있는 언로드된 이미지를 모두 확인하여 즉시 로드해야 하는 이미지를 찾습니다. 이것은 현재 문서 스크롤 상단, 창 높이 및 이미지의 상단 오프셋을 사용하여 수행됩니다.

이미지가 뷰포트에 들어가면 data-src 속성에서 이미지 URL을 가져와 이미지 로드를 트리거하는 src 속성에 배치합니다. 그런 다음 이 클래스가 이미지 로드를 지연시키므로 이미지에서 lazy 클래스를 제거해야 합니다. 모든 이미지가 로드되면 이벤트 리스너가 제거됩니다.

스크롤의 경우 스크롤 이벤트가 계속해서 발생합니다. 따라서 성능을 높이기 위해 지연 로딩 실행을 조절하는 작은 시간 초과를 추가할 수 있습니다.

2. 교차 관찰자 API 사용:

핀

Intersection Observer API는 브라우저에서 비교적 새로운 API입니다. 이 기술을 사용하면 뷰포트에 들어가는 요소의 타이밍을 매우 간단하게 감지할 수 있습니다. 이 기술은 이전 방법과 비교하여 복잡한 수학을 사용하지 않고 우수한 성능을 제공합니다.

먼저 지연 로딩이 필요한 모든 이미지에 관찰자를 연결해야 합니다. API가 이미지가 뷰포트에 들어왔음을 감지하면 data-src에서 URL을 선택하고 'isIntersecting' 메서드를 사용하여 이미지 로드를 트리거하는 src 속성에 넣습니다. 그 후 관찰자 제거와 함께 게으른 클래스가 제거됩니다.

Intersection Observer API는 JavaScript 이벤트를 사용하는 것과 비교하여 스크롤할 때 사이트가 느리게 표시되지 않고 빠르게 작동합니다. 이벤트 리스너 기술을 사용하여 약간의 지연을 추가하는 시간 제한을 추가해야 했습니다. 그러나 Intersection Observer API는 모든 브라우저에서 지원되지 않습니다. 따라서 이벤트 리스너는 사용자에게 인기 있는 선택이 되었습니다.

CSS 배경 속성:

핀

CSS 배경 이미지를 로드하기 위해 브라우저는 CSS 스타일이 기존 문서에 있는 DOM에 적용되는지 여부를 결정하기 위해 DOM(문서 개체 모델)과 함께 CSSOM(CSS 개체 모델)을 빌드해야 합니다. CSS 규칙이 요소에 적용되지 않으면 브라우저는 배경 이미지를 로드하지 않습니다.

이 기술을 사용하면 요소가 뷰포트에 올 때 background-image CSS 속성을 적용합니다. CSS에 ID가 bg-image(배경 이미지)인 요소가 있습니다. 클래스 lazy가 이미지에 추가되면 CSS 기술에서 bg-image 속성을 재정의하고 없음으로 만듭니다.

CSS에서는 #bg-image만 사용하는 것보다 #bg-image에 .lazy 클래스를 추가하는 것이 좋습니다. 처음에 브라우저는 background-image: none을 요소에 적용합니다. 웹 페이지를 스크롤하면 이벤트 리스너 또는 Intersection Observer가 뷰포트에 있는 이미지를 감지하고 .lazy 클래스를 삭제합니다. bg-image 속성이 배경 이미지 로드를 트리거하는 요소에 적용되므로 CSS 기술에는 적용되지 않습니다.

그래서, 여기에 당신의 지연 로딩 웹사이트를 커스터마이징할 수 있는 두 가지 방법이 있습니다. 이 두 기술 모두 뛰어난 결과를 제공합니다. 그러나 간단한 기술을 원한다면 <img> 태그로 이동해야 합니다. WordPress 사용자가 WordPress 웹 사이트에서 지연 로딩 이미지를 사용자 정의할 수 있는 플러그인이 많이 있습니다. 지연 로딩과 함께 이러한 플러그인을 사용하여 WordPress 웹사이트용 이미지를 최적화하면 웹사이트 성능이 향상되고 더 나은 경험을 제공하며 SEO에도 도움이 됩니다.