WordPress에서 레이지 로드하는 방법(이미지 및 비디오)

게시 됨: 2023-05-25

웹 사이트 소유자라면 과거에 적어도 한 번은 사이트 속도에 대해 생각했을 것입니다. 결국 Google은 검색 결과에 사이트를 배치할 위치를 결정할 때 속도를 고려합니다. 따라서 사이트 로드 속도가 느리면 순위에 있어 불리합니다. 그리고 순위가 높을수록 더 많은 트래픽이 발생한다는 것을 모두 알고 있습니다.

그렇다면 WordPress 사이트가 최대한 빨리 로드되도록 하려면 어떻게 해야 할까요? 한 가지 방법은 이미지를 지연 로드하는 것입니다.

지연 로딩은 이미지와 비디오가 필요할 때까지 렌더링을 지연시키는 기술입니다. 이를 구현하면 사이트 속도가 상당히 빨라질 수 있으며 좋은 소식은 이것을 작동시키기 위해 개발자가 될 필요가 없다는 것입니다.

오늘은 플러그인을 사용하거나 사용하지 않는 두 가지 방법을 사용하여 WordPress에서 이미지와 동영상을 지연 로드하는 방법을 보여드리겠습니다.

게으른 로딩이란 무엇입니까?

지연 로딩은 페이지 속도를 향상시키는 데 사용되는 일반적인 기술입니다. 아이디어는 간단합니다. 방문자가 처음 도착했을 때 페이지의 모든 이미지를 로드하는 대신 보이는 이미지만 렌더링합니다. 그런 다음 방문자가 페이지를 아래로 스크롤하면 필요에 따라 더 많은 이미지가 로드됩니다.

즉, 방문자가 페이지 하단으로 스크롤하지 않으면 본 페이지 영역 아래의 이미지가 로드되지 않습니다. 따라서 지연 로딩은 페이지 로드 시간에서 귀중한 밀리초(또는 몇 초)를 절약할 수 있습니다.

또한 지연 로딩은 대역폭을 절약하는 데 도움이 될 수도 있습니다. 모바일 장치에서 사이트를 방문하는 사람들이 있는 경우 특히 중요합니다. 보이지 않는 이미지와 동영상의 로딩을 지연시켜 데이터 사용량을 줄일 수 있습니다.

지연 로딩은 어떻게 작동합니까?

일반적으로 지연 로딩은 두 가지 방식 중 하나로 작동합니다. 버전 5.5부터 WordPress는 "로딩"이라는 HTML5 속성을 추가합니다. 이 경우 브라우저는 추가 자바스크립트 없이 지연 로드 프로세스의 모든 부분을 처리합니다.

HTML5의 속성 이전에 개발된 또 다른 방법은 창의적인 자바스크립트를 이용하는 것입니다. 이 경우 페이지 로드 시 빈 자리 표시자가 제공된 다음 이미지가 뷰포트에 들어올 때 JavaScript를 사용하여 이미지를 로드합니다.

어느 쪽이든 브라우저에 필요한 이미지만 로드됩니다. 방문자가 페이지를 아래로 스크롤하면 다른 이미지가 로드됩니다.

이를 수행하는 몇 가지 방법이 있으며 아래에서 자세히 설명합니다. 그러나 이것이 게으른 로딩이 작동하는 방식의 요지입니다.

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

지연 로딩 이미지에는 세 가지 주요 이점이 있습니다.

  • 사이트 속도 증가
  • 대역폭 사용량 감소
  • 더 나은 사용자 경험

증가된 사이트 속도는 일반적으로 지연 로딩을 구현하는 주요 동기입니다. 불필요한 이미지 렌더링을 기다리면 페이지 로드 시간을 줄일 수 있습니다. 페이지에 이미지가 많거나 이미지가 큰 경우 특히 그렇습니다.

다음으로 지연 로딩은 대역폭을 절약하는 데 도움이 될 수 있습니다. 방문자가 페이지 아래로 모험을 떠나지 않는다면 결코 볼 수 없는 낭비되는 대역폭 로드 이미지가 없습니다.

마지막으로 지연 로딩은 사용자 경험을 향상시킬 수 있습니다. 이는 방문자가 사이트에 참여하기 전에 페이지의 모든 이미지가 로드될 때까지 기다릴 필요가 없기 때문입니다.

WordPress는 기본적으로 지연 로드되나요?

예, WordPress 5.5부터는 설치 시 기본적으로 지연 로딩이 자동으로 활성화됩니다. 그러나 매우 간단하고 직관적인 경험을 사용자 정의하는 몇 가지 방법이 있습니다. 아래에서 이러한 방법에 대해 자세히 설명합니다.

이미지를 지연 로드해야 하나요? 단점이 있습니까?

대부분의 경우 페이지 속도를 개선하거나 대역폭을 절약하려는 경우 이미지를 지연 로드하는 것이 좋습니다. 그러나 고려해야 할 몇 가지 잠재적인 단점도 있습니다.

레이아웃 이동

이미지를 지연 로드하면 페이지 레이아웃이 바뀔 수 있습니다. 예를 들어 페이지 오른쪽에 사이드바가 있고 그 안에 있는 이미지를 지연 로드하는 경우 공간을 만들기 위해 사이드바가 아래로 이동할 수 있습니다. 이것은 방문자에게 매우 혼란스러울 수 있습니다.

일반적으로 이 문제를 방지하려면 자리 표시자를 사용하는 것이 좋습니다.

SEO에 대한 잠재적 타격

제대로 하지 않으면 지연 로딩 이미지로 인해 Google과 같은 검색 엔진이 이미지를 인덱싱하는 데 문제가 발생할 수 있습니다 . 콘텐츠는 순위와 관련하여 왕이 되며, 이 경우 귀중한 덩어리를 잃을 수 있습니다.

이미지가 더 이상 검색 결과에 표시되지 않을 수 있으며 이미지가 나머지 페이지 콘텐츠(예: 전자상거래 목록의 제품 이미지)와 관련하여 얼마나 중요한지에 따라 일반 검색 순위에도 영향을 미칠 수 있습니다.

즉, 지연 로딩을 올바르게 설정하면 문제가 되지 않습니다. 그렇기 때문에 자신 있는 개발자가 아닌 이상 지연 로딩 플러그인을 사용하거나 WordPress에 포함된 기본 지연 로딩을 고수하는 것이 최선의 방법입니다.

플러그인 충돌

또한 지연 로드는 이미지를 사용하여 소셜 미디어 미리 보기를 생성하는 플러그인과 같은 일부 WordPress 플러그인에서 문제를 일으킬 수 있습니다.

사이트를 변경할 때마다 철저히 테스트하여 모든 것이 정상적으로 작동하는지 확인해야 합니다.

그리고 문제가 발생할 경우를 대비하여 빠른 복구를 위해 WordPress 사이트를 백업해 두십시오.

WordPress에서 지연 로딩을 활성화하는 방법

지연 로딩은 이제 WordPress에서 기본적으로 활성화됩니다. 최신 WordPress 반복을 사용하지 않거나(권장하지만) 지연 로드 프로세스를 보다 세부적으로 제어하려는 경우 두 가지 방법 중 하나를 사용하여 제어할 수 있습니다. 대지.

1. 플러그인을 사용한 지연 로드

숙련된 개발자가 아닌 경우 사이트 코드를 편집할 때마다 문제가 발생할 위험이 있으므로 플러그인을 사용하는 것이 좋습니다. 무언가를 깨뜨릴 경우를 대비하여 백업을 가지고 있더라도 평판이 좋은 플러그인을 사용하는 것이 가장 좋습니다.

제트팩 부스트 홈페이지

Jetpack Boost는 사이트 성능을 측정하고 개선하는 데 도움이 되는 무료 플러그인입니다. 다음과 같은 기능을 제공합니다.

  • 필수적이지 않은 자바스크립트 지연
  • CSS 로딩 최적화
  • 게으른 이미지 로딩
  • 사이트 성능 테스트

Jetpack Boost를 시작하려면 WordPress 플러그인 디렉토리에서 무료로 다운로드하십시오.

또는 WordPress 대시보드에서 Plugins → Add New 로 이동한 다음 “Jetpack Boost”를 검색하고 지금 설치를 클릭합니다. 설치가 완료되면 활성화 를 클릭합니다.

플러그인 저장소의 Jetpack Boost

그런 다음 Boost 라는 새 대시보드 메뉴 옵션으로 이동합니다. 그런 다음 무료로 시작 을 클릭합니다.

다음 페이지에서 Lazy Image Loading 이라는 큰 토글까지 아래로 스크롤하여 켭니다. 이제 사이트를 살펴보고 모든 것이 제대로 렌더링되고 잘 보이는지 확인하십시오. 그게 다야! 레이지 로딩은 몇 번의 클릭만으로 시작하는 것이 좋습니다.

한 단계 더 나아가 사이트의 지연 로딩을 사용자 지정하려면 functions.php 파일에 추가할 수 있는 코드 스니펫을 사용하면 됩니다. 또는 기능 플러그인으로 삽입할 수 있습니다.

수행할 수 있는 몇 가지 작업은 다음과 같습니다.

  1. 특정 페이지에서 지연 로딩 비활성화
  2. 이미지가 로드될 때까지 표시되는 자리 표시자 설정
  3. 특정 이미지에 대한 지연 로딩 끄기
  4. 특정 CSS 클래스에 대한 지연 로딩 끄기

예를 들어 지연 로딩 프로세스에서 CSS 클래스를 제외하려면 다음 코드를 사용합니다.

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

자세한 내용은 전체 지연 로딩 문서를 확인하세요.

2. WordPress에서 플러그인 없이 이미지를 지연 로드하는 방법

앞에서 언급했듯이 WordPress는 기본적으로 크기가 설정된 모든 이미지에 대해 지연 로드를 활성화합니다. 이를 위해 아무 것도 켜거나 코드를 추가할 필요가 없습니다. 그러나 이 기능이 작동하는 방식을 사용자 지정하려는 경우가 있을 수 있습니다.

예를 들어 템플릿 이미지를 포함하지 않으려는 경우를 가정해 보겠습니다. 이 코드를 functions.php 파일에 추가합니다.

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

또는 특정 이미지에 대한 지연 로딩을 끄고 매우 세분화할 수 있습니다. 페이지나 게시물에 추가할 때 각 이미지에 추가 이미지 클래스를 할당한 다음 functions.php 파일의 다음 코드에 해당 클래스를 추가하면 됩니다.

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

위의 예에서 이미지 클래스 skip-lazy를 이미지에 추가하려면:

  1. 페이지에 이미지를 추가하거나 미디어 라이브러리를 통해 게시합니다.
  2. 이미지를 추가한 후 이미지 설정을 찾습니다. Gutenberg Blocks 편집기, 클래식 편집기 또는 사이트 빌더 플러그인을 사용하는지 여부에 따라 다르게 나타날 수 있습니다. 새 CSS 클래스를 추가하는 기능은 일반적으로 고급 설정 영역(구텐베르크 및 클래식 편집기) 또는 이미지 설정 옵션(대부분의 다른 사이트 빌더) 하단에 있습니다.
  3. skip-lazy 클래스를 이미지에 추가하고 업데이트를 저장합니다.

WordPress 설명서에서 가능성에 대해 자세히 알아볼 수 있습니다.

WordPress에서 동영상을 지연 로드하는 방법

동영상을 지연 로드하려면 게시물이나 페이지의 동영상 자체에 코드를 추가하면 됩니다. 이 코드는 다음과 같아야 합니다.

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

WordPress의 지연 로딩에 대해 자주 묻는 질문

WordPress 지연 로딩에 대해 자세히 알고 싶으십니까? 아래에 몇 가지 자주 묻는 질문에 답변했습니다.

게으른 로딩과 지연된 오프스크린 이미지는 같은 것인가요?

오프스크린 이미지 연기는 스크롤 없이 볼 수 있는 나머지 중요한 콘텐츠가 로드될 때까지 이미지 로드를 기다리는 것을 의미합니다. 이를 수행하는 방법에는 여러 가지가 있지만 WordPress 사이트는 일반적으로 지연 로딩을 사용합니다.

기본적으로 지연 로딩은 오프스크린 이미지를 지연시키는 방법 입니다.

WordPress에서 배경 이미지를 지연 로드할 수 있습니까?

예, 원하는 경우 배경 이미지를 지연 로드할 수 있습니다. Jetpack Boost는 배경 이미지에 지연 로딩을 켭니다. 그러나 이미지 설정 방식에 따라 모든 이미지를 식별하지 못할 수도 있습니다. 예를 들어 이미지가 background:url 속성을 통해 로드되는 경우 플러그인은 이미지를 그림으로 읽지 않으므로 지연 로드를 활성화하지 않습니다.

이 경우 지연 로드할 특정 배경 이미지를 선택할 수 있는 지연 로더와 같은 도구를 사용할 수 있습니다.

YouTube 동영상을 지연 로드할 수 있나요?

그래 넌 할수있어! 이렇게 하려면 WPOrbit의 다음 코드 스니펫을 테마의 functions.php 파일에 삽입합니다. 이 작업을 수행하는 방법을 잘 모르는 경우 functions.php 파일 액세스 및 편집에 대한 가이드를 확인하십시오.

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

지연 로딩이 SEO에 영향을 미칩니까?

예, 지연 로딩은 검색 엔진 순위에 긍정적인 영향을 미칠 수 있습니다. Google은 검색 결과에서 페이지 순위를 결정할 때 사이트 속도를 고려합니다. 지연 로딩은 성능을 향상시키므로 사이트에 대한 Google의 인식도 높일 수 있습니다.

지연 로딩 플러그인을 사용하는 대신 수동으로 수행하고 실수하면 검색 엔진의 이미지 인식 능력을 방해하여 SEO에 부정적인 영향을 미칠 수 있습니다.

지연 로딩이 사용자 경험에 영향을 미칩니까?

예, 레이지 로딩은 사이트의 로드 시간을 줄이면서 방문자가 콘텐츠를 바로 볼 수 있도록 하므로 사용자 환경을 개선할 수 있습니다. 이것은 차례로 브랜드에 대한 인식을 향상시킬 수 있습니다.

내 콘텐츠를 지연 로드하려면 플러그인이 필요합니까?

아니요, 콘텐츠를 지연 로드하기 위해 플러그인이 필요하지 않습니다. 레이지 로딩은 WordPress에서 기본적으로 활성화되어 있습니다. 그러나 지연 로딩 프로세스를 더 많이 제어하려면 플러그인을 사용하는 것이 좋습니다. 다음은 WordPress를 위한 최고의 지연 로드 플러그인입니다.

지연 로딩 콘텐츠에 단점이 있나요?

게으른 로딩 콘텐츠에는 단점이 많지 않습니다. 속도, 사용자 경험 및 검색 엔진 순위를 향상시킵니다. 그러나 때때로 페이지 레이아웃이 이상하게 바뀔 수 있습니다. 따라서 지연 로딩을 활성화한 후에는 항상 사이트를 테스트해야 합니다.

모든 콘텐츠를 지연 로드해야 하나요?

아니요, 모든 콘텐츠를 지연 로드할 필요가 없습니다. 이미지, 동영상 또는 iFrame과 같은 특정 요소만 지연 로드하도록 선택할 수 있습니다.

로딩 속도를 개선하기 위해 무엇을 더 할 수 있습니까?

지연 로딩 외에도 다음을 포함하여 WordPress 사이트의 속도를 향상할 수 있는 여러 가지 다른 방법이 있습니다.

  • 콘텐츠 전송 네트워크(CDN) 사용
  • Core Web Vitals를 개선하는 것과 동일한 사항을 개선하는 데 집중합니다.
  • 이미지 최적화
  • 브라우저 캐싱 활성화
  • 리소스 최소화

WordPress 지연 로딩으로 사이트 속도 향상

이미지 지연 로드는 사이트 성능을 최적화하고 전반적인 사용자 경험을 개선하는 좋은 방법입니다. Jetpack Boost는 지연 로딩을 활성화하는 가장 편리하고 강력한 방법을 제공하는 동시에 다른 강력한 속도 도구도 제공합니다. 시작할 준비가 되셨습니까? 제트팩 부스트를 받으세요!