웹사이트에 지연 로딩을 구현하는 데에는 다양한 방법이 있습니다. 느린 로딩을 지원하는 워드프레스 플러그인 순위 목록을 참고해 보세요.
워드프레스 디렉토리에는 이미지와 동영상을 지연 로딩하는 데 사용할 수 있는 수많은 무료 플러그인이 있습니다. 수십 개의 플러그인을 검토하고 몇 가지를 테스트한 결과, 웹사이트 성능을 크게 향상시키는 두 가지 플러그인을 발견했습니다. 지연 로딩을 구현하고 싶다면 아래 옵션을 고려해 보세요.
WP Rocket(프리미엄) 사용
WP Rocket은 웹사이트에 이미지 지연 로딩 기능을 구현하는 가장 간편한 방법입니다. 더욱이, 활성화하는 데 1분도 채 걸리지 않습니다. WP Rocket에 포함된 플러그인인 LazyLoad는 이미지 지연 로딩 기능을 제공합니다.
LazyLoad 기능이 활성화되면 WP Rocket은 발생 가능한 문제를 방지하기 위해 WordPress의 기본 이미지 지연 로딩 기능을 즉시 중지합니다.
WP Rocket의 LazyLoad 기능을 활성화하려면 아래 단계를 따르세요
- 워드프레스 설치 환경에서 설정 > WP Rocket > 미디어 패널로 이동하면 LazyLoad를 활성화할 수 있습니다.
- 화면 상단의 LazyLoad 영역 아래에 있는 "사진 사용"을 클릭하세요.
- 선택을 완료한 후 "변경 사항 저장"을 클릭하세요.
그 외에 해야 할 일은 모두 끝났습니다. 따라서 방문객들은 사진 로딩 속도가 느려지는 것을 경험하게 될 것입니다.
LazyLoad는 WordPress에서 기본적으로 제공하는 방식과 달리 iframe이나 비디오와 같은 추가적인 HTML 요소에 대한 지연 로딩을 제공합니다. 또한, 특정 HTML 구성 요소에 인라인으로 적용된 배경 이미지에도 지연 로딩을 적용합니다.
WordPress의 기본 이미지 지연 로딩 기능을 사용하려면 WP Rocket에서 LazyLoad 옵션을 비활성화할 수 있습니다. 하지만 이 새로운 로딩 속성은 아직 모든 브라우저에서 지원되지 않습니다. 또한 WordPress 설치는 사진에 초점을 맞추고 있습니다. 따라서 웹사이트에 이미지, 비디오 및 임베드가 많은 경우 WP Rocket의 LazyLoad가 여전히 더 나은 대안입니다.
WP Rocket의 기본 지연 로딩 기능을 활성화할 때 유의해야 할 사항
WP Rocket은 기본적으로 지연 로딩 기능을 사용하는 Chrome 브라우저와의 자동 호환성을 제공하지 않지만, 헬퍼 플러그인을 통해 Chrome의 기본 지연 로딩 기능을 활성화할 수 있습니다. 마찬가지로, WP Rocket이 기본 지연 로딩 기능을 사용하는 다른 브라우저와의 자동 호환성을 제공하지 않더라도, 해당 기능을 활성화하여 Chrome의 기본 지연 로딩을 지원할 수 있습니다.
이 유용한 플러그인을 사용하면 다음과 같은 사항을 확인할 수 있습니다
- 모든 사진에는 네이티브 지연 로딩을 사용하기 위한 필수 HTML 구문이 포함되어 있습니다. Chrome과 호환되는 브라우저는 네이티브 지연 로딩을 자동으로 사용하고, 다른 모든 브라우저는 WP Rocket의 LazyLoad를 자동으로 사용합니다.
- 저희의 강력한 LazyLoad 기술을 계속 사용하시거나 Chrome에 내장된 지연 로딩 기능으로 전환하는 옵션을 선택하실 수 있습니다.
모든 것은 당신에게 달려 있습니다! 먼저, 두 가지 접근 방식을 모두 현장에서 시험해보고, 가장 효과적인 방법을 선택하세요.
a3 Lazy Load(무료)를 사용하세요
무료 옵션을 찾고 계신다면 a3 LazyLoad 플러그인 웹사이트에서 동영상 의 지연 로딩도 가능합니다 .
또한, 이 플러그인은 외부 이미지와 동영상의 지연 로딩을 지원합니다. 워드프레스 코어 구현에서는 이러한 기능이 제공되지 않습니다.
워드프레스 관리자 화면에서 이 플러그인을 설치하고 활성화할 수 있습니다. 이제 도구의 설정을 사용자 지정할 수 있습니다.
2단계: 플러그인 이미지 설정 조정
설정 > a3 Lazy Load로 이동하세요. Lazy Load 활성화 항목을 보면 플러그인이 설치 후 기본적으로 활성화되어 있는 것을 확인할 수 있습니다.
이제 LazyLoad 이미지 탭을 엽니다. (1) 지연 로드할 웹사이트 이미지를 선택하고 (2) JavaScript를 허용하지 않는 웹 브라우저를 위한 대체 방법을 제공할 수 있습니다. 지연 로드를 원하지 않는 이미지의 경우 (3) CSS 클래스를 설정할 수 있습니다
기본 설정에서는 모든 옵션이 활성화되어 . 이 설정을 유지하는 것을 강력히 권장합니다. 특정 이미지에 대해서는 지연 로딩을 건너뛸 수 있도록 CSS 클래스를 생성하세요.
3단계: 플러그인 비디오 설정 조정
다음 단계는 '동영상 및 iframe 지연 로딩' 탭입니다. a3 Lazy Load를 사용하면 이미지처럼 특정 클립에 대해 지연 로딩을 선택할 수 있습니다.
이 플러그인은 (1) 콘텐츠 및 위젯에 비디오를 허용하고 (2) JavaScript를 지원하지 않는 브라우저를 위한 대체 기능을 제공합니다
비디오 설정(3)에서 CSS 클래스를 지정하여 특정 비디오를 지연 로딩에서 제외할 수 있습니다. 보다 간단한 구성을 원하면 이미지 섹션에서 선택한 것과 동일한 클래스를 사용하세요.
워드프레스용 추가 지연 로딩 플러그인
WP Rocket 및 A3 Lazy Load 외에도 고려해 볼 만한 유용한 지연 로딩 플러그인이 몇 가지 있습니다
- 동영상 지연 로딩
- BJ 레이지 로드
- WooCommerce용 제품 더 보기
- WordPress 무한 스크롤 - Ajax를 이용한 더 보기
- Disqus 조건부 로드
- 댓글에 대한 지연 로딩
마지막으로
웹사이트를 업데이트하거나 수정할 때는 잠재적인 충돌 가능성을 항상 염두에 두는 것이 중요합니다. 지연 로딩을 허용한 후 웹사이트의 특정 부분이 작동하지 않는 문제가 발생한다면, 지연 로딩과 관련된 일반적인 문제 목록을 확인해 보세요.
Revolution Slider 및 Envira Gallery와 같은 플러그인에서 업로드하는 이미지에 지연 로딩 기능이 적용되지 않아 호환성 문제가 발생할 수 있습니다. 호환되는 플러그인 전체 목록은 여기에서 확인할 수 있습니다.
이 기사를 비롯한 많은 기사는 Seahawk Media Blog .
