WordPress 지연 로딩: 사이트에 추가하는 방법
게시 됨: 2023-03-09좋은 페이지 로딩 속도를 갖는 것은 좋은 사용자 경험을 제공하는 데 중요하며 검색 엔진 순위를 높이는 데도 도움이 됩니다. 온라인 웹 사이트 또는 비즈니스 웹 사이트를 만들 때 WordPress보다 더 좋은 CMS는 없습니다.
레이지 로딩은 웹 사이트의 로드 시간을 적절하게 유지하면서 많은 미디어 리소스를 보유하는 가장 좋은 전략입니다. 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 것이 중요 전략입니다. 이 전략을 사용하면 페이지 로드 시간이 단축되고 반송률이 감소하며 고객 경험이 향상됩니다.
WordPress는 비디오, 이미지 및 기타 미디어를 웹 사이트에 통합할 수 있는 최고의 CMS입니다. 그러나 새 버전에는 WordPress 지연 로딩 기능도 함께 제공됩니다.
WordPress 지연 로딩 기능을 활성화하면 사이트의 모든 놀라운 이미지 또는 비디오가 지연 로딩을 거칩니다.
이제 방문자는 사이트를 빠르게 로드하고 콘텐츠에 액세스할 수 있습니다. 이 전략은 비즈니스 수익이 WordPress 웹사이트에 의존하는 경우에 적극 권장됩니다.
지연 로딩이란 무엇이며 어떻게 작동합니까?
지연 로딩은 로딩 콘텐츠를 사용자에게 표시하고 스크롤 없이 볼 수 있는 콘텐츠의 다운로드 및 렌더링을 지연시키는 최적화 기술입니다.
웹사이트에 고해상도 이미지와 동영상이 많다면 사이트가 느리게 로드되지 않아도 됩니다. 이러한 중요한 이미지와 비디오에 우선 순위를 부여하여 로딩 시간을 크게 줄일 수 있습니다.
작동 방식은 다음과 같습니다.
- 브라우저는 이미지를 다운로드하고 비디오를 미리 로드하지 않고 웹 페이지 DOM을 구축합니다.
- 다운로드할 이미지와 미리 로드할 비디오는 JavaScript에 의해 결정된 초기 표시 콘텐츠를 기반으로 합니다.
- 레이지 로딩은 방문자가 화면에서 볼 때만 이미지나 비디오를 로드합니다.
이미지와 비디오는 실제로 필요할 때까지 미리 로드되지 않습니다. 웹 사이트의 여러 부분으로 이동하지 않으면 해당 이미지 중 일부는 로드되지 않습니다.
지연 로딩은 기본적으로 WordPress 이미지 및 비디오의 우선 순위 기반 로딩입니다. 두 세계의 장점을 최대한 활용할 수 있는 매우 효과적인 방법입니다. 훌륭한 그래픽과 속도를 갖춘 놀라운 웹사이트를 가질 수 있습니다.
웹 사이트에 WordPress 지연 로딩을 추가하는 방법
사이트에 지연 로딩을 추가하는 방법에는 두 가지가 있습니다. WordPress 플러그인을 사용하거나 수동으로 할 수 있습니다. 이 작업의 성공을 보장하려면 두 가지 방법을 모두 아는 것이 중요합니다.
1. 플러그인을 이용한 레이지 로딩 구현
플러그인을 설치하여 모든 WordPress 지연 로딩 문제를 제거할 수 있습니다. WordPress에는 많은 플러그인을 사용할 수 있지만 속도 최적화 플러그인을 사용하면 다른 이점을 얻을 수 있습니다.
지연 로딩을 구현하는 동안 사이트의 전체 속도를 최적화하는 w3speedster와 같은 플러그인을 사용할 수 있습니다. 레이지 로드할 수 있는 이미지를 절대적으로 제어할 수 있으며 이 모든 작업을 코딩 없이 수행할 수 있습니다.
팀에 기술 전문 지식이 많지 않은 경우 플러그인을 사용하는 것이 가장 좋습니다. 플러그인 사용을 마치면 PageSpeed Insights를 통해 속도를 확인하세요. 급격한 개선이 보이면 작업을 올바르게 수행한 것입니다!
방문자가 훌륭한 사용자 경험으로 환영받을 것이라고 확신할 수 있습니다.
웹사이트에 w3speedster 플러그인을 성공적으로 추가하려면 다음 단계를 따르십시오.
1단계: 플러그인 설치 및 활성화
WordPress 대시보드로 이동하여 플러그인 섹션을 클릭한 다음 새로 추가를 클릭합니다. w3speedster 플러그인을 찾아 업로드를 클릭합니다. zip 파일을 선택한 다음 설치를 클릭합니다.
설치 프로세스를 시작하기 전에 WordPress에서 사이트에 플러그인을 추가할지 여부를 확인하도록 요청합니다. 예를 선택하면 설치 프로세스가 시작됩니다.
플러그인이 활성화되면 그 이점을 누릴 수 있습니다. 그러나 그 전에 설정 섹션으로 이동해야 합니다.
2단계: 설정 패널을 사용하여 플러그인 구성
지연 로딩에 대한 설정을 구성할 수 있도록 w3speedster 플러그인으로 이동합니다. 여기에서 사이트를 지연 로드할 미디어 파일을 선택할 수 있습니다.
이 플러그인을 사용하면 이미지, 동영상, 오디오 및 iframe을 지연 로드할 수 있습니다. 지연 로드하려는 미디어 파일의 확인란을 클릭합니다. 선택했으면 변경 사항을 저장한 다음 종료합니다.
2. 수동으로 지연 로딩 추가
WordPress 사이트에 다른 플러그인을 추가하고 싶지 않다면 수동으로 추가할 수도 있다는 사실에 기뻐할 것입니다. Chrome, Firefox 및 Opera와 같은 여러 브라우저는 기본 지연 로드를 지원합니다.
추가하기 만하면됩니다. 선택한 이미지 및 동영상에 대한 속성입니다. 속성을 추가하면 사이트에서 자동으로 지연 로딩이 활성화됩니다.
지연 로딩은 이제 WordPress 사이트에서 기본적으로 구현됩니다. 몇 개의 이미지에 대해서만 지연 로딩을 활성화하려는 경우 수동으로 수행할 수 있습니다.
<img src=”image-name.png” loading=”lazy” alt=”대체 속성” width=”300″ height=”300″>
이것은 WordPress 웹 사이트에 게으른 로딩을 추가하는 놀라운 방법이지만. 모든 브라우저가 이 방법을 지원하는 것은 아닙니다. 그러나 가장 인기있는 것 중 일부는 그렇습니다. 따라서 여전히 안전한 내기입니다.
지연 로딩의 장단점
WordPress 웹 사이트에 게으른 로딩을 구현하는 것이 확실하지 않은 경우. 그런 다음 장단점을 고려하여 결정을 내릴 수 있습니다.
장점
- 그것은 호스팅 비용을 줄이는 대역폭 사용을 줄입니다.
- 그것은 방문자의 경험을 더 좋게 만드는 사이트의 속도를 향상시킵니다.
- 모바일 사용성을 향상시킵니다.
- 사이트의 순위를 향상시킵니다.
- 사용자 유지 가능성 증가
단점
- 스크롤 속도가 느려집니다.
지연 로딩은 SEO에 어떤 영향을 미칩니까?
검색 엔진은 사용자에게 결과를 제공하기 위해 이미지와 같은 웹 사이트 및 기타 요소를 크롤링합니다. 게으른 로딩은 사이트 속도를 높이고 성능을 향상시킬 수 있습니다.
경우에 따라 검색 엔진이 이미지를 인덱싱하지 못하도록 할 수 있습니다. 웹사이트의 이미지는 검색 엔진에서 순위를 매기는 데 도움이 될 수도 있습니다. 때때로 사용자는 이미지를 통해 웹사이트를 완전히 찾을 수 있습니다. 따라서 유기적인 결과를 얻는 데 필수적입니다.
확인해야 할 몇 가지 사항이 있습니다.
- Google 및 기타 검색 엔진이 여전히 지연 로드된 이미지를 크롤링할 수 있는지 확인해야 합니다. 이는 Google 검색 콘솔의 크롤링 섹션에서 "Fetch as Google" 도구를 사용하여 확인할 수 있습니다. 소스 코드에서 이미지를 볼 수 있다면 잘 된 것입니다.
- 웹사이트 이미지에는 alt 태그를 사용해야 합니다. 이렇게 하면 검색 엔진이 이미지의 컨텍스트와 웹사이트의 나머지 콘텐츠와 어떻게 관련되어 있는지 알 수 있습니다.
결론
지연 로딩은 사용자 경험을 향상시키는 훌륭한 방법이지만 전략적으로 동일한 작업을 수행하는 것이 중요합니다. 예를 들어 사이트 헤더에 나타나는 이미지를 지연 로드하면 안 됩니다. 이러한 이미지는 빠르게 로드되는 것이 중요하기 때문입니다.
그 외에는 사이트의 나머지 미디어를 지연 로드할 수 있습니다. 게으른 로딩에는 두 가지 이상의 이점이 있습니다. 사이트 속도를 개선하고 대역폭 사용량을 줄이며 뛰어난 사용자 경험을 제공하고 SEO를 개선합니다.