지연 로딩이란 무엇이며 사용자 경험을 어떻게 개선합니까?

대부분의 웹사이트 소유자가 웹사이트에서 무시하는 측면이 있다면 바로 페이지 로딩 시간입니다. 귀하는 웹사이트에 대한 완벽한 디자인을 얻고 방문자의 참여를 유지하기 위해 다양한 유형의 콘텐츠를 추가하는 데 많은 시간과 돈을 소비합니다. 하지만 이것이 방문자를 사용자로 전환하기에 충분하지 않다면 어떻게 될까요?

연구에 따르면 웹 사이트를 로드하는 데 추가로 1초가 걸릴 때마다 방문자를 고객으로 전환할 가능성이 감소하는 것으로 나타났습니다. Portent 에 따르면 전환 가능성은 로딩 1초에 40%, 다음에는 34%, 3초에는 29%로 떨어집니다. “그렇다면 해결책은 무엇입니까?”라고 궁금해하실 수도 있습니다.

이것이 바로 레이지 로딩(Lazy Loading) 개념이 등장하는 지점입니다. 이는 콘텐츠 품질을 저하시키지 않고 웹사이트를 더 빠르게 로드할 수 있는 방법입니다.

이 기사에서는 지연 로딩(Lazy Loading), 이를 사용하는 이유, 다른 방법과 비교하여 어떻게 비교되는지 살펴보겠습니다. 그것에 들어가 보자!

목차

• 지연 로딩이란 무엇입니까?
• 지연 로딩의 중요성
• 즉시 로딩과 지연 로딩 비교
• 지연 로딩 작동 방식
• 지연 로딩 구현

지연 로딩이란 무엇입니까?

지연 로딩은 웹 사이트에서 필요한 부분만 즉시 로드하여 시간을 절약하는 방법입니다. 모든 것을 한 번에 로드하는 대신 속도가 느리고 리소스를 많이 사용할 수 있는 대신 이 방법은 콘텐츠를 조금씩 로드합니다.

바로 로드되지 않는 이미지나 비디오에는 필요할 때까지 자리 표시자 요소가 있는 경우가 많습니다. 예를 들어 지연 로딩은 모든 이미지를 한 번에 로드하지 않습니다. 화면에 보이는 것만 로드합니다. 나머지는 아래로 스크롤할 때까지 로드되지 않습니다.

모든 것이 로드될 때까지 기다리지 않고 이미 화면에 표시된 내용을 바로 확인할 수 있습니다.

전문가 팁: 다양한 브라우저와 장치에서 지연 로딩이 얼마나 잘 작동하는지 확인하세요.이는 호환성 문제가 없는지 확인하기 위한 것입니다.

지연 로딩의 중요성

우리는 지연 로딩이 전환율을 높이는 데 도움이 된다는 것을 이미 알고 있습니다. 그러나 이것이 유일한 이점은 아닙니다. 웹사이트에 지연 로딩을 구현해야 하는 몇 가지 다른 이유는 다음과 같습니다.

성능 최적화

지연 로딩은 누군가 귀하의 웹사이트를 방문할 때 데이터 전송을 줄입니다. 이는 느린 인터넷과 소규모 데이터 요금제를 사용하는 모바일 장치를 사용하는 사람들에게 중요합니다.

대역폭 및 서버 부하 감소

지연 로딩은 데이터를 절약하고 서버 작업을 줄입니다. 이렇게 하면 필요하지 않은 콘텐츠가 로드되는 것을 중지하여 웹사이트 소유자와 사용자의 비용을 절감할 수 있습니다.

SEO 개선

Google과 같은 검색 엔진은 빠르게 로드되는 웹사이트에 우선 순위를 두기 때문에 이것이 공식 순위 요소가 됩니다. 지연 로딩 기술을 사용하면 페이지 로딩 속도를 높이고 이탈률을 줄이며 웹 사이트 순위를 높일 수 있습니다.

Eager 로딩이란 무엇입니까?

Eager 로딩은 Lazy Loading과 정반대입니다. 처음에는 미디어 파일, 스크립트 및 스타일을 포함하여 필요한 모든 리소스를 한 번에 로드합니다. 이는 필요한 모든 페이지 요소를 즉시 사용할 수 있음을 의미합니다. 따라서 사용자가 스크롤하거나 상호 작용할 때 추가 로딩이 없습니다.

Eager Loading은 과거에 사용되었던 일반적인 방법이었으며, 오늘날에도 많은 웹사이트에서 여전히 이를 사용하고 있습니다.

구현하기는 쉽지만 다음을 포함한 여러 요인으로 인해 즉시 로딩의 관련성이 낮아졌습니다.

웹페이지 크기 증가

현대 웹사이트는 더욱 풍부한 미디어와 대화형 부분을 사용합니다. 이는 평균 웹페이지가 이전보다 훨씬 크다는 것을 의미합니다. 따라서 즉시 로드를 수행하면 초기 페이지 로드 시간이 길어질 수 있습니다. 특히 인터넷 연결이 느린 사용자의 경우.

성능에 부정적인 영향

페이지 로드 시간이 길어지면 FCP(First Contentful Paint) 및 LCP(Largest Contentful Paint) 와 같은 중요한 웹사이트 성능 측정이 저하될 수 있습니다 . 이는 SEO 및 사용자 경험의 핵심입니다.

모바일 사용자의 증가

모바일 브라우징이 대량으로 사용되면서 처음부터 매우 빠르게 로드하는 것이 중요해졌습니다.

Eager 로딩과 Lazy 로딩 비교

다음은 Eager Loading과 Lazy Loading을 빠르게 비교한 것입니다.

지연 로딩과 즉시 로딩은 서로 다른 장단점이 있는 두 가지 리소스 로딩 방법입니다. 그러나 오늘날의 기술적 관점에서 보면 지연 로딩은 효율성, 성능 이점 및 더 나은 사용자 경험으로 인해 대부분의 최신 웹 사이트에서 선호되는 기술로 간주됩니다.

지연 로딩의 작동 방식

이제 지연 로딩이 둘 사이에서 더 나은 결과를 보장하는 이유를 알았으니 이를 달성하는 방법을 살펴보겠습니다.

사용자 탐색 및 상호작용 : 지연 로딩은 사용자가 웹페이지를 사용하는 방식에 따라 달라집니다.사용자가 마우스를 스크롤하거나 움직일 때 시작되는 경우가 많습니다. 스크롤할 때 브라우저는 볼 수 있는 영역에 새로운 콘텐츠가 필요하다고 추측합니다. 그런 다음 해당 리소스를 로드하기 시작합니다. 지연 로딩은 버튼 클릭이나 항목 위로 마우스를 가져가는 등의 다른 작업으로 시작할 수도 있습니다.

이미지의 기술적 구현 : 지연 로딩은 콘텐츠 종류에 따라 다르게 작동합니다.매우 일반적인 이미지의 경우 일반적으로 품질이 낮은 자리 표시자나 간단한 로딩 아이콘을 표시하는 것으로 시작합니다. 사용자가 실제 이미지 근처로 스크롤하면 선명한 고품질 이미지가 로드됩니다. 이렇게 하면 사용자는 아직 볼 수 없는 이미지를 기다리지 않아도 됩니다.

다양한 웹 리소스 적용 : 지연 로딩은 이미지뿐만 아니라 다양한 요소에 사용할 수 있는 유연한 방법입니다.비디오, iframe 및 많은 스크립트가 필요한 요소에도 똑같이 잘 작동합니다. 필요할 때만 이러한 요소를 로드하면 페이지 로딩 속도가 크게 향상되고 리소스를 효율적으로 관리할 수 있습니다. 이는 고화질 비디오와 같은 대용량 리소스의 경우 특히 중요합니다.

지연 로딩 구현

이 부분에서는 웹 사이트에 지연 로딩을 구현하는 다양한 방법을 보여 드리겠습니다.

방법 1 – 지연 로딩 수동 구현

지연 로딩을 구현하는 수동 방식은 모든 사람에게 적합한 것은 아닙니다. 복잡하므로 최소한 중급 코딩 지식이 있어야 합니다.

이를 위해 주로 HTML과 JavaScript를 사용하게 됩니다. 시작하기 전에 WordPress 사이트의 테마 파일에 액세스할 수 있는지 확인하고 HTML 및 JavaScript를 편집할 수 있는지 확인하세요.

다음은 프로세스를 진행하는 데 도움이 되는 자세한 가이드입니다.

1단계 : 사이트 백업

오류 발생 시 데이터 손실을 방지하려면 테마 파일을 변경하기 전에 항상 WordPress 사이트를 백업하세요 .

2단계 : 테마의 function.php 파일 편집

• WordPress 사이트의 파일에 액세스합니다(호스팅 제어판의 FTP 클라이언트 또는 파일 관리자 사용).
• /wp-content/themes/your-theme/ 으로 이동하여 function.php 파일을 찾으세요 .
• 편집을 위해 function.php를 엽니다 .

3단계 : 지연 로딩 스크립트 추가

function.php 에서 지연 로딩을 위해 JavaScript 파일을 대기열에 추가하는 함수를 추가하세요. 기본적인 예는 다음과 같습니다.

함수 add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

이 코드는 테마 디렉터리 내의 js 폴더 에 lazy-load.js 라는 JavaScript 파일이 있다고 가정합니다 .

4단계 : JavaScript 파일 만들기

• 테마 디렉터리의 js 폴더 에 lazy-load.js 라는 새 파일을 만듭니다 .
• 지연 로딩을 처리하기 위해 JavaScript를 추가합니다. IntersectionObserver를 사용하는 기본 예는 다음과 같습니다 .

document.addEventListener("DOMContentLoaded", function() {

letlazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (창의 "IntersectionObserver") {

letlazyImageObserver = new IntersectionObserver(함수(항목, 관찰자) {

항목.forEach(함수(항목) {

if (entry.isIntersecting) {

게으른 이미지 = Entry.target을 보자;

lazyImage.src=lazyImage.dataset.src;

lazyImage.classList.remove(“게으른”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(함수(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

5단계 : WordPress에서 이미지 태그 업데이트

지연 로딩을 지원하도록 이미지 태그를 수정하세요. PHP 템플릿이나 게시물/페이지에서 직접 다음과 같이 이미지 태그를 변경하세요.

<img 클래스=”게으른” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”이미지 설명”>

placeholder-image.jpg를 저해상도 이미지나 로딩 그래픽으로 바꾸고 , original-image.jpg를 실제 이미지 URL로 바꾸세요.

전문가 팁: 지연 로드된 이미지에 반응형 자리 표시자를 사용하여 레이아웃이 안정적으로 유지되도록 하세요.

6단계 : 변경 사항 테스트

• 캐싱 플러그인이 설치되어 있는 경우 사이트 캐시를 삭제하세요.
• 그런 다음 웹사이트로 이동하여 이미지가 지연 로드되어야 하는 섹션까지 아래로 스크롤합니다.
• 스크롤할 때 이미지가 원활하게 로드되는지 잠시 살펴보세요.

노트

• 라이브 웹사이트에서 테스트하기 전에 항상 먼저 개발 환경에서 테스트하세요.
• 이 작업을 수행하는 동안 하위 테마를 만드는 것을 고려해보세요. 테마를 업데이트하면 변경 사항을 덮어쓸 수도 있습니다.
• 비디오 또는 iframe과 같은 다른 콘텐츠 유형의 경우 src 속성이 data-src 속성 으로 대체되고 뷰포트에 있을 때 JavaScript를 통해 로드되는 유사한 접근 방식을 사용할 수 있습니다 .

이 기술은 지연 로딩을 통합하는 간단한 방법입니다. 웹사이트가 더 복잡하거나 특정 요구 사항이 있는 경우 더 강력한 솔루션이나 플러그인을 살펴보는 것이 좋습니다.

방법 2 - WordPress 플러그인을 사용하여 지연 로딩 구현

WordPress 플러그인을 사용하여 Lazy Loading을 안전하게 활성화할 수 있으므로 이는 두 가지 방법 중 가장 쉬운 방법입니다. 여러 플러그인을 사용하면 이 작업을 수행할 수 있지만 이 예에서는WP-Optimize를 사용하겠습니다 .WP-Optimize는 웹사이트 속도를 높이고 사용자 경험을 향상시키는 데 도움이 되는 강력한 WordPress 플러그인입니다.

이미지, iframe 및 비디오를 지연 로드로 설정하는 간단하고 쉬운 방법을 제공합니다. 내장된 지연 로드 기능은 웹 리소스가 표시될 때까지 자동으로 웹 리소스 로드를 지연시켜 페이지 로드 시간을 훨씬 단축시킵니다. 그러나 이것은 WP-Optimize의 프리미엄 기능입니다.

기능을 활성화하려면:

• WordPress 관리 대시보드에서WP-Optimize > 이미지 탭을 엽니다.
• 지연 로드 이미지 하위 탭을 엽니다.
• 여기에서 이미지와 비디오/Iframe 모두에 대해 지연 로딩을 활성화할 수 있습니다.

특정 이미지, 배경 이미지, 비디오 또는 iframe에 대해 지연 로딩을 비활성화해야 하는 경우 여기에서 활성화하면 됩니다. 특정 이미지 클래스를 건너뛰도록 선택할 수도 있습니다.

이전과 이후

Lazy Load를 구현하기 전과 후에 샘플 웹사이트의 속도를 테스트했습니다. GTMetrix에 따르면 웹사이트는 FCP(First Contentful Paint) 로드 시간이 1.5초로이미 상당히 빨랐습니다.

지연 로딩을 활성화한 후 FCP는 344ms가 되었으며 이는 이전보다 훨씬 빨라졌습니다. 결과는 페이지에 포함된 콘텐츠의 양에 따라 달라질 수 있지만 대부분의 경우 FCP 점수가 향상됩니다.

페이지 로드 시간을 단축할 준비가 되셨나요?

그래서, 이것이다! 우리는 지연 로딩(Lazy Loading)이 무엇인지, 그리고 현대 사이트에서 지연 로딩의 중요한 역할에 대해 이야기했습니다. 필요할 때까지 로드를 기다리면 페이지 로드 속도가 빨라지고, 인터넷 데이터가 절약되며, 특히 데이터가 제한된 휴대폰에서 탐색이 더욱 원활해집니다.

또한 WordPress에서 Lazy Loading을 사용하는 방법에 대한 몇 가지 유용한 조언도 제공했습니다. 우리는 코드를 사용하여 직접 수행하는 것부터 WP-Optimize와 같은 플러그인을 사용하는 것까지 모든 것을 다룹니다.

웹사이트에 지연 로딩을 추가하고 이것이 성능에 어떤 영향을 미치는지 알려주세요. 질문이 있으신가요? 댓글로 편하게 물어보세요.

자주 묻는 질문

지연 로딩이 좋은가요, 나쁜가요?

지연 로딩은 일반적으로 여러 가지 이점이 있으므로 좋은 방법으로 간주됩니다. 필요할 때만 콘텐츠를 로드하여 웹페이지 로드 시간을 개선하고 사용자 경험을 향상시키는 데 도움이 됩니다.

UI의 지연 로딩이란 무엇입니까?

UI의 지연 로딩은 이미지, 비디오 등의 시각적 요소가 사용자 뷰포트에 있거나 근처에 있을 때만 로드하는 방식을 말합니다.

지연 로딩이 SEO에 영향을 미치나요?

올바르게 구현되면 지연 로딩은 페이지 로드 시간을 개선하고 사용자 경험을 향상시켜 SEO에 긍정적인 영향을 미칠 수 있습니다. 두 가지 모두 중요한 순위 요소입니다.

모든 이미지를 지연 로드해야 합니까?

화면 밖에 있는 이미지를 지연 로드하는 것이 유리하지만, 페이지 로드 시 즉시 표시되는 이미지에는 필요하지 않습니다. 이러한 이미지를 즉시 로드하면 표시 지연을 방지할 수 있습니다.

지연 로딩의 문제점은 무엇입니까?

지연 로딩의 일부 문제에는 사용자가 스크롤할 때 콘텐츠 로딩이 지연되고, 검색 엔진 인덱싱이 올바르게 구현되지 않은 경우 잠재적인 문제가 발생할 수 있으며, JavaScript에 대한 의존도(모든 브라우저에서 지원되지 않을 수 있음)가 포함됩니다.